Google Pay

Introduction

Google Pay can be utilized as a checkout option on a payment page as well as a direct checkout option on the cart page (fast checkout). Loading the Google Pay button via COPYandPAY payment widget is just like loading any other brand, i.e. in step 2, GOOGLEPAY must be specified as a brand. Once the Google Pay button will be used by the consumer, the Google Pay payment sheet will appear on the device.

As soon as the consumer starts to interact with the Google Pay payment sheet, several events will be triggered. All events can be consumed by implementing the COPYandPAY API callback functions. All callback functions offered by the Google Pay are wrapped into the COPYandPAY API. No interaction with the Google Pay is required.

For steering the Google Pay payment sheet or for updating data on the Google Pay payment sheet after the consumer started to interact with it, several options are available.

Google Pay on the cart page (fast checkout)

Sometimes you might want to display the Google Pay button early on the payment workflow where you do not yet have a checkout ID. Usually, the shopper can decide whether to continue with the normal checkout, or to immediately pay with Google Pay.

It is possible to display the Google Button first and create a checkout ID later. In step 2:

• Use paymentWidgets.js without a checkout ID

  <script src="https://test.global-connect.tech/v1/paymentWidgets.js"></script>

• Define a callback function in wpwlOptions.createCheckout to create a checkout

We will call the callback function once the Google Pay button is clicked. The function should return a checkout ID, or a promise that will return a checkout ID. Specifically, the returned object can be any thenable object. In particular, both JavaScript Promise and jQuery Promise are supported.

Example:

wpwlOptions.createCheckout = function() {
    // Call your server to create a checkout
    return $.post("https://your.server")
    .then(function(response) {
        // Assume that your server returned the response containing checkoutId
        return response.checkoutId;
    });
};

As with other options, you can modify the Google Pay behavior by using wpwlOptions.googlePay. The full reference of all available options is available here.

In addition, since the checkout amount and currency are initially unknown, you will need to manually set the Google Pay parameters amount and currencyCode. See Google Pay Options further configurations.