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

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:

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.