PrimeFaces Extensions Showcase

Credit Card

Credit Card will take any credit card form and make it the best part of the checkout process. Just map the input fields to fields you probably already have!

IMPORTANT: You must use prependId="false" on the h:form and your ID's of your text fields must be "number", "name", "cvc", "expiry". See: Stack Overflow as to why.

Source

XHTML page


                <p:panelGrid id="pnlCreditCard" columns="4" layout="tabular">
        <f:facet name="header">
            <pe:creditCard id="creditCard" labelMonthYear="MM/YY" placeholderExpiry="**/**" placeholderName="Optimus Prime"/>
        </f:facet>
        <p:inputText id="number" placeholder="Card number" inputmode="numeric"/>
        <p:inputText id="name" placeholder="Full name"/>
        <p:outputPanel id="expiration">
            <p:datePicker id="month" widgetVar="monthPicker" view="month" pattern="MM/yy" yearNavigator="true" yearRange="2000:2050"
                          placeholder="MM/YY"
                          onchange="$('#expiry').val(PF('monthPicker').input.val()); $('#expiry')[0].dispatchEvent(new Event('change'));"/>
            <!-- Hide Expiration field so we can use PF MonthPicker -->
            <p:inputText id="expiry" placeholder="MM/YY" inputmode="numeric" style="display:none"/>
        </p:outputPanel>
        <p:inputText id="cvc" placeholder="CVC" inputmode="numeric"/>
    </p:panelGrid>

Use Cases

Documentation pe:creditCard

Attributes (move mouse over the names to see data types)

Name	Description
binding	An EL expression referring to a server side UIComponent instance in a backing bean.Default is generated.
formatting	Whether to format the card number with spaces.Default is true.
id	Unique identifier of the component in a namingContainer.Default is generated.
labelMonthYear	Label for the month/year field.Default is month/year.
labelValidDate	Label for the valid date field.Default is valid thru.
placeholderCvc	Placeholder for the CVC input.
placeholderExpiry	Placeholder for the expiry date input.
placeholderName	Placeholder for the cardholder name input.Default is Full Name.
placeholderNumber	Placeholder for the card number input.
rendered	Boolean value to specify the rendering of the component, when set to false component will not be rendered.Default is true.
widgetVar	Name of the client side widget.
width	Width of the credit card widget in pixels.Default is 350.