Overview
This guide provides steps to integrate Google Pay as a Nuvei APM (alternative payment method) 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“
- For the test (sandbox) environment:
- 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
- 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 any assistance.
- Google Pay supports recurring payments only if you (the merchant) conforms to the following policies:
- The merchant must comply with the network rules, especially the merchant-initiated transactions (MIT) rules.
- 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:
- Initiate a Session
This authenticates and sets up an order in the Nuvei system, by sending an/openOrder
request, and returns asessionToken
. - Initialize the Web SDK
This instantiates the Web SDK with thesessionToken
received from the server call to/openOrder
. - 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. The Google Pay UI Button
- Create the Google Pay UI button according to the instructions in the Google Pay for Web Payments Brand Guidelines Guide.
- 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
Constant in an/initPayment
Requestconst 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.
- The customer triggers the Google Pay payment flow by pressing the Google Pay button.
- 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.
- The customer selects a payment method and Google Pay returns the encrypted Google Pay token (containing the
paymentMethod
block 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
block 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
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: