Theme
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: Use 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

                <p:panelGrid id="pnlCreditCard" columns="4">
        <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>
            
Components and more
Use Cases
Documentation pe:creditCard
Attributes (move mouse over the names to see data types)
Name Description
id Unique identifier of the component in a namingContainer.
widgetVar Name of the client side widget.
width Width of the card image in pixels. Default is 350px.
formatting Whether or not formatting is applied to the input fields. Default is true.
labelValidDate Localization of the Valid Date string on the card. Default 'valid\nthru'
labelMonthYear Localization of the Month Year string on the card. Default 'month/year'
placeholderNumber Placeholder for the card number. Default '•••• •••• •••• ••••'
placeholderName Placeholder for the name. Default 'Full Name'
placeholderExpiry Placeholder for the expiry. Default '••/••'
placeholderCvc Placeholder for the CVC. Default '•••'
PrimeFaces Extensions Showcase - © 2011-2021,PrimeFaces: 11.0.0,PrimeFaces Extensions: 11.0.3,JSF: Apache MyFaces JSF-2.3 Core API 2.3.9,Server: jetty/9.4.36.v20210114,Build time: 2022-04-17 14:55
occured!