Plants
& More

Google Pay™

Google Pay enables a user to pay with card information securely stored by Google without a cumbersome process of filling card and payment information on the website.

This example shows how you can process Google Pay payments using our shift4.js.

Payment with the Google Pay API JavaScript library

To support Google Pay for the widest audience, we advise using the Google Pay API JavaScript library.

The entire process is detailed in the code snippets below and can be organized into the following main sections:

  • Load shift4.js and Google Pay API JavaScript library [1]
  • Setup Shift4.js with your public key and merchant ID [2]
  • Initialize Google's PaymentClient with a proper environment [3]
    • Before going live with your integration, you need to provide your Google merchant ID. See the Publish your integration guide for details. [3a]
    • Pass Shift4's Merchant ID as gatewayMerchantId [3b]
  • Setup payment button [4]
    • Check if Google Pay is available in the browser [4a]
    • Configure the Google Pay button and add it to the page [4b]
  • Proceed with payment on button click [5]
    • Load payment data [5a]
    • Create token [5b]
    • Trigger 3D Secure, it will be skipped if not required [5c]
    • Create charge [5d]
    • Show result [5e]

Payment button configuration details

In steps 4, 5, and 6, code uses details that are utilized by Google's SDK to display a payment sheet and generate a final token. Those details are configured in the following functions:

  • getAllowedPaymentMethod configures supported card networks and tokenization details that will allow our API to decode payment token successfully.
  • createGooglePaymentDataRequest uses getAllowedPaymentMethod, but also defines transaction and payment process specific information like its currency, amount, and merchant display name.

Advanced Google Pay setup

This page shows a basic integration example of Google Pay and our API. If you want to get a better understanding of Google Pay API or want to better understand more complex possibilities, please refer to official Google Pay Web developer tutorial

Google Pay and 3D Secure Requirement

There are two types of Google Pay tokens: PAN_ONLY and CRYPTOGRAM_3DS.

In case of CRYPTOGRAM_3DS 3D Secure data are embedded into the token and there are no additional requirements before making payment with it.

In case of PAN_ONLY there is an additional requirement to perform 3D Secure before creating a charge. See the next section to see how it is achieved using our API

Google Pay and 3D Secure in Shift4

Thanks to shift4.js and our API you don't have to distinguish between the two token types, and the 3D Secure will be triggered only when necessary.

Official Google Pay guidelines

Before using Google Pay payments on your website, be sure to read through official guidelines written by Google: 



@RestController
@RequestMapping("/ajax/examples/charge-with-google-pay")
class ExamplesAjaxChargeWithGooglePayController {
    @PostMapping("/payment")
    Map<String, String> tokenPayment(@RequestBody GooglePayTokenPaymentExampleRequest exampleRequest) throws IOException {
        try (Shift4Gateway shift4Gateway = createShift4Gateway()) {
            // create charge using received token ID
            ChargeRequest chargeRequest = new ChargeRequest(100, "USD")
                    .paymentMethod(new PaymentMethodRequest(exampleRequest.token));
            Charge charge = shift4Gateway.createCharge(chargeRequest);
            // pass clientObjectId of charge to frontend
            return singletonMap("clientObjectId", charge.getClientObjectId());
        } catch (Shift4Exception e) {
            throw new BadRequestException(e.getMessage());
        }
    }

    static class GooglePayTokenPaymentExampleRequest {
        String token;
    }
}