Google Pay ™

Integrating Google Pay for the web using Payload is as simple as a line or two of JavaScript with a Payload.js secure inputs payment form.

Follow this guide to learn how to integrate Google Pay for your Payload account. For a live preview, see the demo below:

View a Demo

Integrate


<!-- Simple example of enabling Google Pay -->
<script src="https://payload.co/Payload.js"></script>

<script>
Payload('test_client_key_3bcr16ohAy8aEcwK3Vffs')

const checkout = new Payload.Form({
        form: document.getElementById('checkout-form')
    })
    .googlepay(document.getElementById('google-pay-btn'))
    .on('processed', function(evt) {
        console.log(evt.transaction_id)
    })
</script>

Step 1) Create a Checkout Form

To begin using Google Pay on the web, first you'll need to create a checkout form using Payload.js. For a full guide on creating a Payload enabled checkout form, see the full section on Secure Inputs.

Below is a simple example of how you can initiate a Payload enabled checkout form:

<script>
const checkout = new Payload.Form({
        form: document.getElementById('checkout-form')
    })
    .on('processed', function(evt) {
        console.log(evt.transaction_id)
    })
</script>

Step 2) Google Pay Button

Once you have a Payload enabled checkout form, the next step is to add a Google Pay button to your checkout. The best way to do this is to use Google's javascript library, see the example below:

<script src="https://pay.google.com/gp/p/js/pay.js"></script>
<script>
    const btn = new google.payments.api
        .PaymentsClient({environment: 'PRODUCTION'})
        .createButton()
    document.getElementById('container').appendChild(btn);
</script>


For more information, see the Styling Buttons section for guidelines on how to style and incorporate the buttons appropriately.


Step 3) Activate Trigger

On the Payload.Form there is a googlepay function. Use this to activate the buttons. Both functions also accept a callback function to determine if Google Pay is active and supported by the device.

<script>
const btn = document.getElementById('google-pay')
checkout.googlepay(btn, function(active) {
    if ( !active ) {
        // you could display a message or hide the button
    }
})
</script>


It's a good idea to use the callback to update the UI if Google Pay cannot be activated on the device.

Alternate Trigger

If you want to control the trigger in a different way, instead of passing a button element into the googlepay() function, you can just pass in the activation callback and setup a separate trigger using the "open" command.

<script>
checkout.googlepay(function(active) {
    if ( active )
        btn.addEventListener('click', function() {
            checkout.googlepay('open')
        })
})
</script>


Styling and Displaying Buttons

It's important to follow the guidelines outlined by Google on how to display their buttons. Below is a link to their guidelines:

Google Pay branding guidelines