NAV Navbar
Logo
Web

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 and activate Google Pay for your Payload account. For a live preview, see the demo below:

View a Demo

Supported Payment Methods

* Payload currently only operates in the US and Canada

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

Account Activation

To activate your account for Google Pay, you must first register with the Google Pay Business Console. Follow the steps below to set up your business profile for use with Payload.

Step 1) Create a Business Profile

To start you’ll need to create your business profile from Google’s business console. This information should match what was submitted with your merchant application with Payload.

Step 2) Create an Integration

Navigate to the Integrations tab and click “Add website” under the Integrate with your website section. Enter the url where the checkout page will reside, select Gateway as your integration type, upload the requested screenshots, save your changes and the click Submit for approval.

Step 3) Provide Merchant ID

Once your integration has been approved, you can copy the full merchant id provided by google in the upper right hand corner of your business console and paste that into the Google Pay Merchant ID field under Settings > Features & Add-ons > Google Pay from your Payload dashboard.