This topic describes how to use the FramePay library to tokenize payment data from the following methods in one checkout form:
- Express method.
- Payment card (requires input mounting).
- Bank account (requires input mounting).
- Any other alternative payment method (does not require input mounting).
The payment card and bank account payment methods require inputs to be mounted in your checkout form. For all other payment methods, you only provide the method name when creating the token.
If this is your first time using the FramePay library, add FramePay to a form with one payment method in isolation before completing this tutorial. For more information, see Get started with FramePay.
Prerequisites
To complete this guide, you must have an organization ID, a website ID, and a publishable API key.
You must also have a payment gateway configured in your Rebilly account. For sandbox testing, the TestProcessor gateway is pre-configured.
If you already have your IDs and API key, continue to Step 1: Initial set up. If you do not, see Set up your environment.
Set up the library and provide the HTML.
Include the FramePay stylesheet
Add the default styles for the FramePay library elements on the page.
Include the FramePay script
Expose the FramePay library in the global JS scope as Framepay.
Add CSS for your checkout form
Add CSS styles for your checkout form.
Create your checkout form
Create a checkout form on your page.
Define the data-rebilly attributes on your input fields. This instructs the FramePay library to automatically gather data from your checkout form.
Add mounting points to your form
Specify an empty placeholder div with a unique ID. This is where the FramePay library mounts:
- Express methods (Paypal in this example).
- Methods that require input elements (payment card and bank account in this example).
Configure the FramePay library with your credentials and transaction data, then mount the payment method elements to your form.
Initialize
Create a configuration object and initialize the FramePay library with it.
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.
For more information, see Prerequisites.
Transaction data
Provide the transaction data in your configuration object.
Optional: Style FramePay inputs
Customize the card payment and bank account fields to match the look and feel of the rest of your form.
To customize, add the style property to your configuration object.
For all available properties, see Style.
Mount the pre-selected payment method
Mount the pre-selected payment method (either card payment or bank account) in its container. Store references to the current element instances in a cache. This example uses a mountedFrames array as a cache.
Also mount the express methods element in its container.
Manage payment method switching
This step is not necessary for express methods.
When a customer selects another payment method, destroy the element instances by invoking the .destroy() method and re-mount the FramePay library element for the selected payment method.
Generate a payment token using the FramePay library.
Express methods
For express methods, when a customer completes the flow, the FramePay library creates a payment token. Listen to the token-ready event to retrieve it.
For more information, see Framepay.on('token-ready', ...).
Non-express methods
For non-express methods, send the form data to the FramePay library and specify the selected payment method.
Send form data
To send the form data to the FramePay library, call Framepay.createToken().
If the collected form data is valid, the FramePay library returns a successful result with a new payment token.
If the collected form data is not valid, the FramePay library returns an error explaining why.
For more information, see Framepay.createToken(form).
Specify selected payment methods
To specify the payment method selected by the customer, when creating the payment token, pass its value as the method property in extraData. This example includes:
method: 'payment-card'for card payment.method: 'ach'for bank account.method: 'China UnionPay'for China UnionPay.
For a full list of supported methods, see the method payload of the Create payment token operation.
This is an interactive example of a basic checkout form that uses the FramePay library to tokenize payment data from multiple methods. View console.log messages in a new window.
Complete the payment flow using this test card number: 4111 1111 1111 1111. Use any future expiration date and any 3 digits for the CVC number. For more test cards, see Test payment cards, IBANs, and ACH details.
<!doctype html>
<html>
<head>
<link href="https://framepay.rebilly.com/framepay.css" rel="stylesheet" />
<script src="https://framepay.rebilly.com/framepay.js"></script>
<script src="./client.js" defer></script>
<link href="./style.css" rel="stylesheet" />
</head>
<body>
<div class="container mm-example">
<div id="paypal-mount"></div>
<div class="divider"></div>
<form id="payment-form">
<div class="field">
<input data-rebilly="firstName" placeholder="First name" />
</div>
<div class="field">
<input data-rebilly="lastName" placeholder="Last name" />
</div>
<div class="field">
<input data-rebilly="emails" placeholder="Email address" />
</div>
<div class="payment-methods">
<div class="tabs">
<div class="tab">
<input type="radio" id="card" name="paymentMethod" value="payment-card" checked />
<label class="tab-label" for="card">Payment Card</label>
<div class="tab-content">
<div id="mounting-point"></div>
</div>
</div>
<div class="tab">
<input type="radio" id="ach" name="paymentMethod" value="ach" />
<label class="tab-label" for="ach">Bank account</label>
<div class="tab-content">
<div>
<div class="field">
<label class="label">Account type</label>
<div id="bank-account-type"></div>
</div>
<div class="field">
<label class="label">Account number</label>
<div id="bank-account-number"></div>
</div>
<div class="field">
<label class="label">Routing number</label>
<div id="bank-routing-number"></div>
</div>
</div>
</div>
</div>
<div class="tab">
<input type="radio" id="cn-u-pay" name="paymentMethod" value="China UnionPay" />
<label class="tab-label" for="cn-u-pay"> China UnionPay </label>
<div class="tab-content">
<div class="flex align-items-center">
<div class="text-grey">
After submitting your order, you will be redirected to securely complete your
purchase.
</div>
</div>
</div>
</div>
</div>
</div>
<button id="pay-now">Make payment</button>
</form>
</div>
</body>
</html>