Setting up Google Pay™
FramePay allows the usage of digital wallets, such as Google Pay.
Some additional configuration is required to set up Google Pay. Here's the step-by-step guide:
Step 1: Initialize FramePay
The organizationId
and digitalWallet
properties are required when using Google Pay.
digitalWallet
must provide the following:
- Transaction information.
- A list of supported card brands.
- Merchant details.
Optionally, display options for the Google Pay button may also be passed as googlePayDisplayOptions
. Display options include the button type and color; you can checkout how that looks in the live demo.
Here is an example configuration:
Rebilly.initialize({
publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
organizationId: 'organization-1', // Required
digitalWallet: { // Required
transactionData: {
amount: 10,
currency: 'USD', // 3-letter currency code following ISO 4217
countryCode: 'US', // 2-letter country code following ISO 3166-1 alpha-2
label: 'Purchase label 1'
},
allowedCardBrands: [
Rebilly.digitalWallet.GooglePayAllowedCardNetworks.Mastercard,
Rebilly.digitalWallet.GooglePayAllowedCardNetworks.Visa,
],
merchantConfig: {
merchantName: 'Example',
merchantOrigin: 'www.example.com' // Please do not include the protocol (http, https)
},
googlePayDisplayOptions: {
buttonColor: 'white',
buttonType: 'short',
}
},
})
Step 2: Mount the Google Pay field
Once FramePay has been initialized, mount a new digital wallet:
Rebilly.on('ready', () => {
const googlePay = Rebilly.digitalWallet.mount('#mounting-point', {
type: 'googlePay',
form: document.getElementById('paymentForm'),
});
});
Step 3: Listen for the generated payment token
Once a customer has submitted the Google Pay form, Rebilly creates a payment token.
To retrieve it listen for the token-ready
event:
Rebilly.on('token-ready', (data) => {
// At this point you can handle the payment token the way you normally would
console.log('Payment token:', data);
})
Bringing everything together
All necessary data is passed in programmatically, so the button itself is sufficient.
Here's an example form with just the Google Pay button:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://framepay.rebilly.com/rebilly.css" rel="stylesheet">
<script src="https://framepay.rebilly.com/rebilly.js"></script>
<div>
<form id="paymentForm">
<fieldset>
<div class="field">
<div id="mounting-point"></div>
</div>
<input id="rebilly-token-input" type="hidden" data-rebilly="token" name="token" />
</fieldset>
<button>Continue</button>
</form>
</div>
<link href="/examples/framepay-example-google-pay.css" rel="stylesheet">
<script src="/examples/framepay-example-google-pay.js"></script>
(function () {
var config = {
publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
organizationId: 'organization-1',
digitalWallet: {
transactionData: {
amount: 10,
currency: 'USD',
countryCode: 'US',
label: 'Purchase label 1'
},
allowedCardBrands: [
Rebilly.digitalWallet.GooglePayAllowedCardNetworks.Mastercard,
Rebilly.digitalWallet.GooglePayAllowedCardNetworks.Visa,
],
merchantConfig: {
merchantName: 'Example',
merchantOrigin: 'www.example.com'
},
googlePayDisplayOptions: {
buttonColor: 'white',
buttonType: 'short',
}
},
};
const form = document.getElementById('paymentForm');
Rebilly.initialize(config);
Rebilly.on('ready', () => {
const googlePay = Rebilly.digitalWallet.mount('#mounting-point', {
type: 'googlePay',
form: document.getElementById('paymentForm'),
});
});
Rebilly.on('token-ready', (data) => {
// Handle token
const hiddenInput = document.getElementById('rebilly-token-input');
hiddenInput.value = data.id;
form.submit();
})
Rebilly.on('error', (err) =>{
console.log(JSON.stringify(err, null, 2));
});
})();
Live demo
Here's an interactive example that showcases all possible Google Pay button styles:
It is using Google's development environment, so you will not be charged.
Brand guidelines
Google Pay provides some specific guidelines on how the Google Pay button should be used.
You can find the full guide here.
As a quick reference, here are some rules of a thumb:
1. Use black buttons on white or light backgrounds to provide contrast.
2. Use white buttons on dark or colorful backgrounds.
3. Use the same style of button throughout your site.
4. Ensure that the size of the Google Pay buttons remains equal to or larger than other buttons.
5. Always maintain the minimum clear space of 8 dp on all sides of the payment button. Ensure the clear space is never broken with graphics or text.
In addition, Google provides UX best practices for using Google Pay - you can find them here.