These docs are intended for a developer audience.
Set up a payment card method
This topic describes how to add FramePay to a checkout form and use it to tokenize payment card information.
1. Obtain IDs and a publishable API key
- Obtain your organization ID and website ID:
- In the left navigation bar, click Settings .
- In the Management section, click My organization & websites.
- In the Organization details section, note the ID value.
- In the Website section, note the ID value. When you first log in to Rebilly, you create an organization as part of the setup process. A default website is created when a new organization is created. For more information, see Organizations and websites.
- Obtain your publishable API key:
- In the left navigation bar, click Automations .
- In the Development section, click API keys.
- Optionally, if you have not created a publishable key:
- In top right of the screen, click Add API.
- In the API key type section, select Publishable, then complete the form and click Save API key.
- Go back to the API Keys page.
- Select a publishable key and copy the Key value.
2. Set up a payment card method
This step describes how to add FramePay to a checkout form and use it to tokenize payment card information.
Initial set up
Set up the library and provide the HTML.
Include the FramePay stylesheet
This adds default styles to FramePay elements on the page.
Include the FramePay script
This exposes FramePay in the global JS scope as Framepay.
Create your checkout form
FramePay automatically gathers data from your checkout form.
To enable this, you must use data-rebilly attributes on your input fields.
Include the HTML mounting points
Add an empty HTML element with a unique ID to your checkout form.
This is where FramePay will render the card field.
Configure FramePay
This step describes the basic set up for mounting.
Initialize
Initialize FramePay with a configuration object.
For more information, see FramePay configuration reference.
Rebilly data
Provide your publishable API key, organization ID, and website ID to connect with the Rebilly API.
Transaction data
Provide the transaction data. Payment card requires amount and currency.
Get the payment token
Mount FramePay to your page and listen for a payment token.
Mount the card field
After initialization, mount the card field in the container element. - Framepay.on('ready', ...) - Framepay.card.mount(...)
Create a payment token
When you mount your card element, your customer will be able to complete the form.
To send the form data to FramePay, call Framepay.createToken().
- If the collected form data is valid, you will receive a successful result with a new payment token.
- If the collected form data is not valid, you will receive an error explaining why.
For more information, see: Framepay.createToken(form).
Basic set up complete
To learn more about payment cards and FramePay, see: - FramePay reference - Payment gateways
- HTML
- JavaScript
1<!doctype HTML>2<HTML>3 <head>4 <link href="https://framepay.rebilly.com/framepay.css" rel="stylesheet">5 <script src="https://framepay.rebilly.com/framepay.js"></script>6 </head>7 <body>8 <form id="payment-form">9 <input data-rebilly="firstName" placeholder="First Name" />10 <input data-rebilly="lastName" placeholder="Last Name" />11 <div id="mounting-point"></div>12 </form>13 </body>14</HTML>1Framepay.initialize({2 publishableKey: 'pk_sandbox_123',3 organizationId: 'org-123',4 websiteId: 'website-123',5 transactionData: {6 currency: 'USD',7 amount: 10,8 },9});10Framepay.on('ready', function () {11 const card = Framepay.card.mount('#mounting-point');12});13try {14 const form = document.getElementById('payment-form');15 const paymentToken = await Framepay.createToken(form);16 console.log(paymentToken);17} catch(error){18 console.log('❌ Create token error:', error);19}Interactive example
This is an interactive example of a basic checkout form which uses FramePay to tokenize payment cards. It is the result of the previous steps.
To view console.log messages, open the example in a new window.