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>