Overview

This guide provides steps to integrate Google Pay as a Nuvei alternative payment method (APM) into your payment flow using the Nuvei Web SDK platform.

Prerequisites and Notes

• This guide assumes you have completed all account setup prerequisites, and are ready to integrate Google Pay into your payment flow.
• Use these gateway credentials in requests:
  • For the test (sandbox) environment: gatewayMerchantId: “googletest“
  • For the production environment: gatewayMerchantId: “nuveidigital“
• The Google Pay Web environment must be set up according to the Google Pay guidelines:
  • Google Pay Web Developer Documentation
  • Google Pay Brand Promoting Guidelines
    For your domain to be verified with Google, the merchant must send Nuvei’s Integration Team screenshots (like the one shown below) of your payment flow along with your domain URL:
    
  • Google Pay Test Card Suite
  • Google Pay Web Integration Checklist
    
    Only some information in the pages listed are relevant to Nuvei integration. Other information is relevant only for merchants performing a direct Google Pay integration, without Nuvei.

• The Google account used for testing should be linked to a relevant test card:
  • Google Pay provides test cards, see Google Pay Test Card Suite for details.
  • Alternatively, you can use one of the test cards listed in the topic.
    Test credentials and testing scenarios can be provided by Nuvei if necessary.
    You can contact Nuvei Support for any assistance.
• Google Pay supports recurring payments only if you (the merchant) conforms to the following policies:
  1. The merchant must comply with the network rules, especially the merchant-initiated transactions (MIT) rules.
  2. The merchant must disclose the “Terms of payment” within the Merchant’s “buyflow”, and the customer must accept the “Terms of payment”.
• Before using Web SDK for non-3D payments, contact Nuvei Support and have them configure your account for the non-3D payment flow.

1. Authentication

Follow the instructions in these steps:

1. Initiate a Session
   This authenticates and sets up an order in the Nuvei system, by sending an /openOrder request, and returns a sessionToken.
2. Initialize the Web SDK
   This instantiates the Web SDK with the sessionToken received from the server call to /openOrder.
3. Get APM Details (optional)
   Perform this is an optional step if you want to retrieve a list of APMs for the customer to choose a payment method.
   (If you already have the relevant APM details then there is no need to perform this step.)

2. Google Pay UI Button

1. Create the Google Pay UI button according to the instructions in the Google Pay for Web Payments Brand Guidelines Guide.
2. On your payment page, define the tokenizationSpecification constant as shown below.
   (When the customer presses the Google Pay button, this parameter identifies your gateway and your site’s gateway merchant identifier.)

   Example tokenizationSpecification Request

   const tokenizationSpecification = {
     type: "PAYMENT_GATEWAY",
     parameters: {
       "gateway": "nuveidigital",
       "gatewayMerchantId": "googletest", //'googletest' for test or 'nuveidigital' for production
     }
   };

3. Collect the Card Details

Pressing the Google Pay button collects your customer’s card details and returns them to you as an encrypted Google Pay token.

1. The customer triggers the Google Pay payment flow by pressing the Google Pay button.
   At this point, your customer may be asked to log in to their Google Pay account.

2. Google Pay displays all the cards associated with the customer’s Google account, or asks the customer to “Add new credit or debit card” details.
3. The customer selects a payment method and Google Pay returns the encrypted Google Pay token (containing the paymentMethod class in JSON format).

4. Payment

The Web SDK createPayment() method manages end-to-end card payment processing, including any 3D-Secure or PCI requirements.

Send a createPayment() request with the paymentOption.card.externalToken parameters:

• externalTokenProvider: “GooglePay“
• mobileToken: “<encrypted Token using Nuvei open key>“

Example createPayment() Request

sfc.createPayment({
  sessionToken: "<sessiontoken>", // received from openOrder API 
  merchantId: "<your merchantId>", // as assigned by Nuvei 
  merchantSiteId: "<your merchantSiteId>", // as assigned by Nuvei 
  clientUniqueId: "<unique transaction ID in merchant system>", // optional 
  paymentOption: {
    card: {
      externalToken: {
        externalTokenProvider: "GooglePay",
        mobileToken: "<encrypted Token using Nuvei open key>"
      }
    }
  },
  billingAddress: {
    email: "[email protected]",
    county: "US"
  },
  function(res) {
    console.log(res)
    if (res.cancelled === true) {
      example.querySelector(".token").innerText = "cancelled";
    } else {
      example.querySelector(".token").innerText = res.transactionStatus + " - Reference: " + res.transactionId;
    }
    example.classList.add("submitted");
  }
});

Example createPayment() Response

{
  "result": "APPROVED",
  "errCode": 0,
  "errorDescription": "",
  "userPaymentOptionId": "14958143",
  "ccCardNumber": "5****5761",
  "bin": "511142",
  "last4Digits": "5761",
  "ccExpMonth": "09",
  "ccExpYear": "21",
  "transactionId": "1110000000004146935",
  "threeDReason": "",
  "threeDReasonId": "",
  "challengeCancelReasonId": "",
  "challengeCancelReason": "",
  "isLiabilityOnIssuer": "1",
  "challengePreferenceReason": "12",
  "cancelled": false
}

5. Control 3D Flow

The merchant can control 3D flow via Web SDK by addinggooglePay3Dflow to the paymentOption class in createPayment(). When sending googlePay3Dflow=enable (default), Web SDK processes the card transaction with 3D-Secure verification; when sending googlePay3Dflow=disable, Web SDK processes the card transaction as a non-3D Google Pay transaction.

Example createPayment() request with googlePay3Dflow

sfc.createPayment({
  sessionToken: "<sessiontoken>", // received from openOrder API 
  merchantId: "<your merchantId>", // as assigned by Nuvei 
  merchantSiteId: "<your merchantSiteId>", // as assigned by Nuvei 
  clientUniqueId: "<unique transaction ID in merchant system>", // optional 
  paymentOption: {
    card: {
      externalToken: {
        externalTokenProvider: "GooglePay",
        mobileToken: "<encrypted Token using Nuvei open key>"
      }
    }
  },
  googlePay3Dflow: "enable", //default value is enable
  billingAddress: {
    email: "[email protected]",
    county: "US"
  },
  function(res) {
    console.log(res)
    if (res.cancelled === true) {
      example.querySelector(".token").innerText = "cancelled";
    } else {
      example.querySelector(".token").innerText = res.transactionStatus + " - Reference: " + res.transactionId;
    }
    example.classList.add("submitted");
  }
});

Recurring Payments

You can use Google Pay for recurring payments, which involves two types of payments.
The first payment is initiated by the customer using Google Pay.
Subsequent payments are initiated by the merchant.

Follow these steps to integrate Google Pay recurring payments into your payment flow:

• Initial Recurring Payment
• Subsequent Recurring Payments

Initial Recurring Payment

The first recurring payment request is initiated by the customer.

Initiate a Session

When sending the /openOrder request described in the Initiate a Session topic, include the following parameters:

• userTokenId: “<unique customer identifier in merchant system>“
• isRebilling: “0“

Example /openOrder Request for Recurring Payments

{
  "merchantId": "<your merchantId goes here>",
  "merchantSiteId": "<your merchantSiteId goes here>",
  "clientUniqueId": "<unique transaction ID in merchant system>",
  "clientRequestId": "<unique request ID in merchant system>",
  "userTokenId": "<unique customer identifier in your system>",
  "isRebilling": "0",
  "currency": "USD",
  "amount": "200",
  "timeStamp": "<YYYYMMDDHHmmss>",
  "checksum": "<calculated checksum>"
}

Send the Initial Payment

Perform the steps in the Payment topic above.

(How it works: Behind the scenes, the createPayment() request knows that this is an “initial recurring payment” via the sessionToken.)

Subsequent Payments

Subsequent recurring payments are initiated by you (with the customer’s consent) from the backend using REST API (not from the frontend via Web SDK).

Perform the steps in the REST API Subsequent Recurring Payments topic, and also include this parameter: userTokenId: “<unique customer identifier in merchant system>“.

Appendix – JSFiddle Example

Editing JSFiddle Examples

You can use the JSFiddle demonstration environment to view, run, and customize the code examples below.

To edit sample code in JSFiddle, press Edit in JSFiddle in the top right corner.
This redirects you to a page where you run and test the code.

Feel free to change your code, including the HTML and CSS.

Payment Web SDK JSFiddle

You can use the JSFiddle demonstration environment to view, run and customize this Google Pay Web SDK example: