Introduction
Purpose
This guide provides steps to integrate Google Pay as a Nuvei APM (alternative payment method) 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 Testing Cards 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:- Initiate a Session
This authenticates and sets up an order in the Nuvei system, by sending an/openOrder
request, and returns asessionToken
. - Create an HTML Placeholder
This instantiates the Web SDK with thesessionToken
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
block.
apmConfig
block:
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
- To customize the text on the Google Pay button, include the
- 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 thepayment()
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.
- The customer triggers the Google Pay payment flow by pressing the Google Pay button.
- Google Pay displays the cards associated with the customer’s Google account, or asks the customer to “Add new credit / debit card” details.
- After the customer selects one of their Google Pay payment methods, Google Pay returns the encrypted token (containing the
paymentMethod
block in JSON format) for Nuvei to process the transaction. - Nuvei process the transaction and handles the rest of payment flow automatically.
- 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: