--- updatedAt: 2026-02-16T08:46:36.000Z agentTools: projectIndex: https://docs.myfatoorah.com/llms.txt --- # Google Pay™ Direct Integration ## **Introduction** The Google Pay™ enables fast, simple checkout on your website, and gives you convenient access to hundreds of millions of cards saved to Google Accounts worldwide. To provide a better user experience to your Google Pay™ users. MyFatoorah provides support to the direct integration that allows you to handle your front-end interactions completely, this gives you the desired flexibility. However, this also means that you need to handle a few interactions with Google in order to support Google Pay™. {683} Google Pay™ Button {1471} Google Pay™ Payment Sheet Page > 📘 MyFatoorah Prerequists > > * Google Pay™ to be enabled to your account (Contact your Account Manager for Activation). > 📘 Google Criteria: Must be Applied > > * [Web integration developer documentation](https://developers.google.com/pay/api/web/overview). > * [Brand Guidelines.](https://developers.google.com/pay/api/web/guides/brand-guidelines) > * [Integration checklist.](https://developers.google.com/pay/api/web/guides/test-and-deploy/integration-checklist) > * Your website must include a link to the Google Pay™ [Google Pay™ terms of services.](https://payments.developers.google.com/terms/sellertos) and communicate that these terms apply whenever the Google Pay™ service is offered. > * You will need To [contact](https://pay.google.com/business/console/home) Google via the Business Console so that they can add your app to their system **for production use** and to get the value of **merchantId**.
## Direct Integration: How it works The following Events and functions are needed to be handled in integration with the Google Pay™ API: * **isReadyToPay**: This function is to determine a user's ability to return a form of payment from the Google Pay™ API. * **onPaymentAuthorized Event**: This method is called when a payment is authorized in the payment sheet. You need to call InitiateSession Endpoint when loading your checkout page to get the **SessionId** and **CountryCode** to be used in your configuration. You need to do this for each payment separately. **SessionId** is valid for only one payment. The endpoint on Swagger is [Payment\_InitiateSession](https://apitest.myfatoorah.com/swagger/ui/index#!/Payment/Payment_InitiateSession) ```json { "IsSuccess": true, "Message": "Initiated Successfully!", "ValidationErrors": null, "Data": { "SessionId": "601d963a-2f28-ec11-bae9-000d3aaca798", "CountryCode": "KWT" } } ``` ## 1. Add Google Pay™ button container You will need to add an HTML div element like below. ```html
``` ## 2. Load Google Javascript file You will need to load the Google Pay™ Javascript file first, as mentioned [here](https://developers.google.com/pay/api/web/overview). ## 3. Identify your payment processor You need to identify the payment processor in the **TokenizationSpecification** message to google. Google will use these identifiers to encrypt the Payment token using the Public key of the Payment processor. ```javascript "tokenizationSpecification": { "type": "PAYMENT_GATEWAY", "parameters": { "gateway": "myfatoorah", "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" // add your gateway merchant id } } ``` ## 4. Define the supported payment card networks ```javascript const allowedCardNetworks = ["AMEX", "MASTERCARD", "VISA"]; const allowedCardAuthMethods = ["PAN_ONLY", "CRYPTOGRAM_3DS"]; ``` > 📘 Supported Card Networks & Authentication Methods Configuration > > 1- Currently only allowed card networks value are: AMEX, MASTERCARD, VISA.\ > 2- MyFatoorah supports both PAN\_ONLY and CRYPTOGRAM\_3DS authentication methods: > > * PAN\_ONLY - the card is stored on file within your customer's Google account and not bound to an Android device. > * CRYPTOGRAM\_3DS - the payment credentials is bound to an Android device. > > **The Difference between PAN only and Cryptogram lies in the way authentication/3D Secure is handled:** > > * PAN Only: 3DS/Authentication is handled through MyFatoorah in the usual way. > * Cryptogram: Authentication is handled by the device, e.g. by using the devices fingerprint sensor. **This is limited to Android devices, using the Google Chrome browser! All other devices and browsers will always chose PAN Only!**. ## 5. Set the Google Pay™ environment. ```javascript const paymentsClient = new google.payments.api.PaymentsClient({environment: 'PRODUCTION'}); //value TEST for test environment ``` ## 6. Add Callback intents ```javascript function getGooglePaymentDataRequest() { paymentDataRequest.callbackIntents = ["PAYMENT_AUTHORIZATION"]; return paymentDataRequest; } ``` ## 7. Handle Google Pay™ Button Click. Register for the user clicks and load the the payment sheet by calling loadPaymentData(). ```javascript function onGooglePaymentButtonClicked() { // ... paymentsClient.loadPaymentData(paymentDataRequest); // ... } ``` After the client click Google Pay button, the payment sheet will be shown. ## 8. Handle Pay Button Click (payment sheet) When the client clicks pay button **onPaymentAuthorized** will be called with the paymentData. The paymentData will be sent to MyFatoorah in **UpdateSession** endpoint as token parameter. Actions to be done to complete the payment:\ 1- Send the  paymentData and sessionId to your server to call **UpdateSession** endpoint.\ Please check [Payment\_UpdateSession](https://apitest.myfatoorah.com/swagger/ui/index#!/Payment/Payment_UpdateSession).\ 2- When receiving success response from **UpdateSession**, call [ExecutePayment](https://myfatoorah.readme.io/docs/execute-payment) endpoint with the **SessionId** to process the actual transaction. ```javascript function onPaymentAuthorized(paymentData) { //Send the paymentData and sessionId to your server and perform the following actions: //1: Call UpdateSession endpoint //2: If success then call ExecutePayment endpoint } ``` > ❗️ Parameters conflict > > Do not pass the **PaymentMethodId** parameter in the [ExecutePayment](https://docs.myfatoorah.com/docs/execute-payment) request and use the **SessionId** parameter instead. As **PaymentMethodId** overwrite **SessionId**. > > The "SessionId" you receive from InitiateSession Endpoint can not be used directly in [ExecutePayment](https://docs.myfatoorah.com/docs/execute-payment) Endpoint.