Introduction

Purpose

This guide provides steps to integrate Google Pay as a Nuvei alternative payment method (APM) into your payment flow using the Nuvei Simply Connect 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.
• Contact Nuvei Support to provide you with a “gatewayMerchantId” for the “nuveidigital” gateway.
• 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 assistance.
• If you are using Domain Registration, there are additional implementation steps.

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. Create an HTML Placeholder
   This instantiates the Web SDK with the sessionToken received from the server call to /openOrder.

2. Collect the Card Details

The Google Pay button is used to collect your customer’s card details.

Display the Google Pay button in the payment methods gallery on the Simply Connect page, as follows:

Send a checkout() request with its mandatory checkout() Input Parameters as shown in the example.

If you want to customize any of the Google Pay parameters then you can include the optional apmConfig class.

Here are some examples of optional customizations that can be done in the apmConfig class:

• googleMerchantId:
  • Use: “BCR2DN6TZ6DP7P3X“
  • Or, if you prefer to use your own googleMerchantId, then contact the Nuvei Integration team to configure your Nuvei merchant account.
• If you want to customize the Google Pay button:
  • To customize the text on the Google Pay button, include the buttonType parameter:
    Possible values: buy (default), book, checkout, order, pay, plain, subscribe
  • To customize the Google Pay button color, include the buttonColor parameter:
    Possible values: black (default), white
  • To customize the Google Pay button location, include the buttonLocation parameter:
    Possible values: onTop (default), gallery
• The 3Dflow parameter determines whether your card transaction is processed with 3DS verification using Simply Connect (enable – default) or if the transaction is processed as non-3D (disable).
• The collectUserDetails parameter determines whether you would like to receive the user’s details from Google Pay. If you set it to true, Nuvei collects the user’s details directly from Google Pay and sends the information in the payment() response. The default value is false.

Example checkout() Request for Google Pay

checkout({
  logLevel: 0,
  payButton: "amountButton",
  showResponseMessage: true,
  sessionToken: document.getElementById('session').value,
  env: 'int', // Nuvei API environment - 'int' (integration) or 'prod' (production - default if omitted)
  merchantSiteId: document.getElementById('merchantSiteID').value,
  merchantId: document.getElementById('merchantID').value,
  country: 'US',
  locale: 'en',
  apmConfig: {
    GooglePay: {
      allowCreditCards: true,
      allowPrepaidCards: true,
      allowedCardAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"],
      allowedCardNetworks: ["AMEX", "DISCOVER", "INTERAC", "JCB", "MASTERCARD", "VISA"],
      assuranceDetailsRequired: true,
      billingAddressFormat: "MIN",
      phoneNumberRequired: false,
      billingAddressRequired: true,
      checkoutOption: "COMPLETE_IMMEDIATE_PURCHASE",
      gateway: "nuveidigital",
      gatewayMerchantId: "googletest", //'googletest' for test or 'nuveidigital' for production
      merchantId: "BCR2DN6TZ6DP7P3X", // or contact Nuvei Integration team to use your own ID
      merchantName: "Google Pay Web SDK",  // or your Google Pay name
      tokenizationType: "PAYMENT_GATEWAY",
      totalPriceStatus: "FINAL",
      3Dflow: 'enable', //enable (default), disable 
      buttonColor: 'black', // black (default), white
      buttonType: 'buy', // buy (default), book, checkout, order, pay, plain, subscribe
      buttonLocation:’onTop’, // onTop (default), gallery
      collectUserDetails: true
    }
  },
  currency: 'USD',
  amount: 135,
  renderTo: '.container_for_checkout',
  onResult: onResult,
  autoOpenPM: true,
  alwaysCollectCvv: false,
  fullName: 'John Smith',
  email: '[email protected]'
})
}

3. Payment

The Google Pay button is displayed in the payment methods gallery on the Simply Connect page.

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 the cards associated with the customer’s Google account, or asks the customer to “Add new credit / debit card” details.
3. After the customer selects one of their Google Pay payment methods, Google Pay returns the encrypted token (containing the paymentMethod class in JSON format) for Nuvei to process the transaction.
4. Nuvei process the transaction and handles the rest of payment flow automatically.
5. When the transaction is complete, the system displays the relevant “Approved”/”Declined” transaction message.

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.

Simply Connect JSFiddle

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