Set up Google Pay™

This topic describes how to use FramePay to tokenize payments made using Google Pay™ digital wallet.

1. Include FramePay script

To enable FramePay, include the following line in your checkout page. This exposes the library in the global JS scope as Rebilly.

Copy
Copied
<script src="https://framepay.rebilly.com/rebilly.js"></script>
Automatic updates

Backward-compatible updates will be made available automatically without the need to change this URL.

2. Initialize FramePay

Initialize FramePay (Rebilly.initialize) with a configuration object that contains the following required properties: organizationId and digitalWallet.

The digitalWallet property must provide the following:

  • Transaction information.
  • A list of supported card brands.
  • Merchant details.

Configuration example

Copy
Copied
Rebilly.initialize({
    // Use your own publishable key:
    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)
        },
    },
})

3. Create your checkout form

3.1 Add a mounting point to your form

You must specify an empty HTML element where FramePay will render the Google Pay™ button.

Edit your checkout form to add a new html element with a unique id, for example, a div with an id value of google-pay:

Copy
Copied
<form>
    ...
     <div id="google-pay"></div> 
    ...
</form>

Google Pay™ is an express method that does not require customer information to be collected, a form is not required.

3.2 Mount the Google Pay™ field

Once FramePay has been initialized, mount a new digital wallet element:

Copy
Copied
Rebilly.on('ready', () => {
    const googlePay = Rebilly.digitalWallet.mount('#mounting-point', {
        type: 'googlePay'
    });
    // Here you can inspect the mounted Google Pay element
    console.log('💳 Google Pay™ element: ', googlePay);
});

3.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:

Copy
Copied
Rebilly.on('token-ready', (data) => {
    // At this point you can handle the payment token the way you normally would
    console.log('Payment token:', data);
})

4. (Optional) Customize Google Pay™

Optionally, to control the look and feel of the Google Pay™ button, pass the googlePayDisplayOptions in the digitalWallet property.

Display options include button type and button color. For an example, see Interactive example.

Example configuration:

Copy
Copied
Rebilly.initialize({
    // Use your own publishable key:
    publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
    organizationId: 'organization-1', // Required
    digitalWallet: { // Required
        ...
        googlePayDisplayOptions: {
            buttonColor: 'white',
            buttonType: 'short',
            buttonHeight: '40px' // Button has a width of 100% by default
        }
    },
})

Brand guidelines

Google Pay provides specific guidelines on how the Google Pay™ button must be used. For the full guidelines, see Google's Brand guidelines.

As a quick reference, here are some general guidelines:

  • Use black buttons on white or light backgrounds to provide contrast.
  • Use white buttons on dark or colorful backgrounds.
  • Use the same style of button throughout your site.
  • Ensure that the size of the Google Pay buttons remains equal to or larger than other buttons.
  • 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.

For information on UX best practices when using Google Pay™, see UX best practices.

Interactive example

This is an interactive example of a basic checkout form which uses FramePay to tokenize payments that are made using Google Pay™ digital wallet.

It showcases all possible Google Pay™ button styles.