Examples
FramePay can be customized to match the look and feel of your existing forms.
Payment cards
View ExampleAdditional 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
andcardCvv
- Separate fields with partial information Card with separate fields for
cardExpiration
andcardCvv
- 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
Google Pay does not require any additional payment form fields, the button by itself is sufficient for creating a payment token.
View ExampleBank accounts
Bank account base
View ExampleBank account styled buttons
View ExampleIBAN
View ExampleOther Payment Methods
View ExampleMultiple Payment Methods
View ExampleErrors
Card base errors
View ExampleCard separated fields errors
View ExampleCard expiration dropdowns errors
View ExampleBank accounts errors
View ExampleIBAN errors
View ExampleEvents
Card
View ExampleSee browser console
Card expiration dropdown
View ExampleSee browser console
Card separated
View ExampleSee browser console
Card separated dropdown
View ExampleSee browser console
Extra data
View ExampleUsing 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.