Set up Google Pay™
This topic describes how to use FramePay to tokenize payments made using Google Pay™.
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. If you have not created a website yet, see Add new or additional websites. 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.
Obtain your publishable API key:
In the left navigation bar, click Automations .
In the Development section, click API keys.
In the API keys page, note the Secret key value. If you have not yet created an API key, click Create API key, complete the form, make sure you select Publishable in the API key type and note the Secret key value.
In top right of the screen, click Create API key.
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 Google Pay™
This step describes how to use FramePay to tokenize payments made using Google Pay™.
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
.
Include the HTML mounting points
You must specify an empty HTML element where FramePay renders the Google Pay™ button.
Edit your checkout form to add new HTML element with a unique ID.
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. Google Pay™ requires amount, currency, and label.
(Optional) Customize Google Pay™
Optionally, to control the look and feel of the Google Pay™ button and enable shipping address.
Get the payment token
Mount FramePay onto your page and listen for a payment token.
Mount the Google Pay™ button
After initialization, mount the Google Pay™ button in the container element. - Framepay.on('ready', ...) - Framepay.googlePay.mount(...)
Listen for the generated payment token
When a customer completes the Google Pay™ flow, Rebilly creates a payment token.
To retrieve it, listen for the token-ready
event.
For more information, see Framepay.on('token-ready', ...).
Basic set up complete
To learn more about Google Pay™ and FramePay, see: Configuration reference.
- 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>9 <div id="google-pay-mount"></div>10 </form>11 </body>12</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 label: 'Demo purchase label',9 lineItems: [10 {11 label: 'Subtotal',12 amount: '8.70',13 },14 {15 label: 'Tax',16 amount: '1.30',17 }18 ]19 },20 googlePay: {21 buttonColor: 'black',22 buttonType: 'buy',23 buttonHeight: '48px',24 },25});26Framepay.on('ready', function () {27 const googlePay = Framepay.googlePay.mount('#google-pay-mount');28});29Framepay.on('token-ready', (data) => {30 // At this point you can use the token for other operations31 // for example to create a payment instrument or transaction32 console.log('Payment token:', data);33});
Interactive example
This is an interactive example of a basic checkout form which uses FramePay to tokenize payments that are made using Google Pay™.
It showcases all possible Google Pay™ button styles.