This guide describes how to use the FramePay JavaScript library to tokenize payment card data using Google Pay™.
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 setup. If you do not, see Set up your environment.
Set up the FramePay library and create the necessary HTML structure.
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
.
Include the HTML mounting points
Specify an empty HTML element where the FramePay library will mount the Google Pay™ button.
Add a new HTML element with a unique ID to your checkout form.
This step covers the basic configuration needed to mount the Google Pay button.
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. Google Pay™ requires amount
, currency
, and label
values.
(Optional) Customize Google Pay™
Optionally, customize the look and feel of the Google Pay™ button.
Mount the FramePay library onto your page and listen for a payment token
Mount the Google Pay™ button
Mount the Google Pay™ button in the container element.
For more information, see:
Listen for the generated payment token
When a customer completes the Google Pay™ flow, Rebilly creates a payment token. Listen for the token-ready
event to retrieve it.
At this point you can use the token for other operations, for example to create a payment instrument or transaction.
For more information, see Framepay.on('token-ready', ...).
This is an interactive example of a basic checkout form that uses the FramePay library to tokenize payment data using Google Pay™. It showcases all possible Google Pay™ button styles.
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>
</head>
<body>
<form>
<div id="google-pay-mount"></div>
</form>
</body>
</html>