Plants
& More

Google Pay™

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

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 [2]
    • Your public key is also a Shift4's merchant identifier in Google Pay [2i]
  • Initialize Google's PaymentClient with proper environment [3]
  • Setup payment button [4]
    • Check if Google Pay is available in the browser [4a]
    • Configure 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 payment sheet and generate final token. Those details are configured in 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 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 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 wrote by Google: 



@AjaxController
@RequestMapping("/ajax/examples/charge-with-google-pay")
class ExamplesAjaxChargeWithGooglePayController {
    @PostMapping("/payment")
    Map 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;
    }
}