Examples

FramePay can be customized to match the look and feel of your existing forms.

Payment cards

Additional examples

• Card with a full-name field Card with one input fullName
• Expiration dropdown Card with expiration year and month dropdown fields
• Styled example Styled card element
• Separate fields Card with separate fields for cardNumber, cardExpiration and cardCvv
• Separate fields with partial information Card with separate fields for cardExpiration and cardCvv
• Card with disabled submit Card example with submit button that only becomes enabled when all fields are valid
• Separate card fields with disabled submit Separate card inputs with disabled submit button
• Separate fields and expiration dropdown Separate card with expiration dropdown

Digital wallets

Google Pay

Bank accounts

Bank account base

Bank account styled buttons

IBAN

Other Payment Methods

Multiple Payment Methods

Errors

Card base errors

Card separated fields errors

Card expiration dropdowns errors

Bank accounts errors

IBAN errors

Events

Card

See browser console

Card expiration dropdown

See browser console

Card separated

See browser console

Card separated dropdown

See browser console

Extra data

Using with ReactJS

Supported versions: 14,15,16+ We offer an easy-to-use wrapper component for ReactJS, called framepay-react.

framepay-react is the easiest way to integrate framepay into your React project. However, if you prefer to use framepay directly, you can look at the example framepay-preact-direct-integration

Using with VueJS

We offer an easy-to-use wrapper component for VueJS, called framepay-vue.