For the web
To implement Google Pay™ API in your website, you must implement Google Pay client-side libraries in your website. This then allows you to inject the Google Pay Button in your website.
To ensure a compliant integration for web, please refer to Google’s official resources. Review the Google Pay Web developer documentation for a full introduction to the API, use the Google Pay Web integration checklist to guide you through testing and deployment, and follow the Google Pay Web brand guidelines when incorporating buttons, logos, and other assets into your site.
Payment Flow
When a user clicks the Google Pay payment button, they see a payment sheet with a list of supported payment methods they have stored. When they select their preferred method, Google Pay securely returns an encrypted payment token for that method to your website. Your website sends the payment token to your backend.
To execute the payment, your backend calls the Dibsy Payments API with the token and the amount. The Dibsy API will process the payment and responds with a success or a failure status. If there is an issue with parsing the token, Dibsy will respond with a 4xx status error.
Step 1 - Prepare your server
Google requires all websites implementing Google Pay to follow certain prerequisites before accepting payments. Read more about this here.
Step 2 - Define the API version
Define the API version of your Google Pay API with Major version 2 and minor version 0. This may be updated from time to time. Please refer to changelog for updates.
const baseRequest = {
apiVersion: 2,
apiVersionMinor: 0
};
Step 3 - Define your token specification
Define type as "PAYMENT_GATEWAY" . Set the gateway for Google Pay configuration as "dibsy" and gatewayMerchantId as your Dibsy Organization ID.
const tokenizationSpecification = {
type: 'PAYMENT_GATEWAY',
parameters: {
'gateway': 'example',
'gatewayMerchantId': 'exampleGatewayMerchantId'
}
};
Step 4 - Define supported payment card networks and auth methods
Define the card networks accepted by your website to limit to only VISA and MASTERCARD. Define the auth methods (methods to authenticate the customer) to "CRYPTOGRAM_3DS" and "PAN_ONLY". This may be updated from time to time. Please refer to changelog for updates.
const allowedCardNetworks = ["MASTERCARD", "VISA"];
const allowedCardAuthMethods = ["CRYPTOGRAM_3DS", "PAN_ONLY"];
Step 5 - Define a total price, country and currency
Define the totalPrice , currencyCode as 'QAR' and countryCode as 'QA'. If parameters are not defined as such, payment will be rejected.
paymentDataRequest.transactionInfo = {
totalPriceStatus: 'FINAL',
totalPrice: '123.45',
currencyCode: 'QAR',
countryCode: 'QA'
};
Step 6 - Receive the payment data
When the customer authorizes the payment, Google Pay API will supply your website with the payment data. See example below.
{
apiVersionMinor: 0,
apiVersion: 2,
paymentMethodData: {
description: 'Visa •••• 0024',
tokenizationData: {
type: 'PAYMENT_GATEWAY',
token: "{\"signature\":\"MEYCIQChz/r0aXzIAolwEDsX4jBBE5hI1lwXlnlv6SgusJuVLgIhAPbFAE1i9Jc38NyxINy2uyyzDxEaz5h/65Ql4CWk/oBf\",\"intermediateSigningKey\":{\"signedKey\":\"{\\\"keyValue\\\":\\\"MFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAEscNvbcumCuMoUPxBvM46MC8F5xkbDoWlgKFVnxzZrFgKVBBhbu7S8hsMqDmr/O3atg5cnU0ZyYKSylCIZJ2E7A\\\\u003d\\\\u003d\\\",\\\"keyExpiration\\\":\\\"1662628070554\\\"}\",\"signatures\":[\"MEYCIQC5bXcIf/538uw3vdgxMCgTKT/koxvn710ZpU+X/FNICgIhALaHQF+gE4QtQGrr918wpg+gWONsXf0bWadBL1WUAH4X\"]},\"protocolVersion\":\"ECv2\",\"signedMessage\":\"{\\\"encryptedMessage\\\":\\\"ejUCGeYGKwxslIOy64emnSZm9gO+CbHqdQLkbDE+UbjBTyfcC+JxJToexn4Y4bI/7aPhe2DwCKaZYZzi+bsb85jToPbjM5NIFbFHlZIy4QNpbzvyBKg8JZ/JJ0QoWsXLXpSqspfWXKTbCoi9TBCrq2i5+XRNmFA7muqhzoqH1VP6JhQKtkww7+m/pXXLnKwlNjzm8B0fztJc/SMzmhro+1nIaaO2wJkhll78czU3K0rFaSTS5kohLaWAgWeJPFOIEnkibeDQZm2B4drUX1GWWjJKPdj0FnNkLEtn4j4O2wJqz/IUGSW1STiFkKnoYSGws7KHyfwupNskGYWtcbl8NiBCMFusZQEj71DhJaDLmH01Oi3WUVg0WoWxutwjYZGtGFj2Xb4Tp9Le0pjJoqwH/sGPduTwLozALWWp60P8iOb8/QLNQlR8IrxCzTnoZ/DlcvzaKGOP91lddIDAIG9mFlOk2bozD/eTb9n/Rz/bywRMz1Owe+tBmrcCrMhzSVaUDMYys+aS8KnauobN62CJFjfDxrft25GnVxuCZl0MhIybPEdHrWufbPRxtP0McS5KC3G4AcMjIaz+xcSP6RdtnG4L3kNEn9Q\\\\u003d\\\",\\\"ephemeralPublicKey\\\":\\\"BH/zNJm/V5Z1JlH5iIarKXWL4gr74OBPtAFVfktRua0GQrVANMSSdaYTXyqayjnDy2pIY7Uw50/m4KwIhv+t3R4\\\\u003d\\\",\\\"tag\\\":\\\"ftWvlSj1hTRKZhBUtaQz4apRpsrLqPB0MlxIOsA+4Ys\\\\u003d\\\"}\"}",
},
type: 'CARD',
info: { cardNetwork: 'VISA', cardDetails: '0024' }
}
}
Step 7 - Process Google Pay Payment token with Dibsy
Request
POST /payments HTTP/1.1
Content-Type: application/json
{
"method": "googlepay",
"amount": {
"value": "40.00",
"currency": "QAR"
},
"description": "Order #1337",
"googlePayToken": '{"description":"My card","tokenizationData":{"type":"PAYMENT_GATEWAY","token":"{\\"signature\\":\\"MEUC...3d\\\\\\"}\\"}"},"type":"CARD","info":{"cardNetwork":"MASTERCARD","cardDetails":"2969"}}',
"redirectUrl": "https://example.com",
"metadata": {
"order": 1337
}
}
Response
{
"id": "pt_6CVWLUT7fxhbWZZS88",
"resource": "payment",
"mode": "live",
"amount": {
"value": "40.00",
"currency": "QAR"
},
"amountNet": {
"value": "38.50",
"currency": "QAR"
},
"amountRemaining": {
"value": "40.00",
"currency": "QAR"
},
"description": "Order #1337",
"method": "googlepay",
"redirectUrl": "https://example.com",
"webhookUrl": null,
"status": "succeeded",
"organizationId": "22858676",
"sequenceType": "oneoff",
"metadata": {
"order": 1337
},
"createdAt": "2022-03-25T21:31:15.843917",
"paidAt": "2022-03-25T21:31:15.500235",
"_links": {
"self": {
"href": "https://api.dibsy.one/v2/payments/pt_6CVWLUT7fxhbWZZS88",
"type": "application/hal+json"
},
"dashboard": {
"href": "http://dashboard.dibsy.one/payments/pt_6CVWLUT7fxhbWZZS88",
"type": "text/html"
},
"documentation": {
"href": "http://api.dibsy.dev/#operation/Create%20Payment",
"type": "text/html"
}
}
}
Step 8 - Redirect your customer to 3-D Secure
If you receive a PAN_ONLY payment method token from the Google Pay response, you can process it through the Dibsy API. Unlike CRYPTOGRAM_3DS, transactions using PAN_ONLY require an extra authentication step with 3-D Secure, similar to a standard credit card payment flow.
To complete this process, redirect the customer to the checkout URL provided in _links.checkout. After successfully completing 3-D Secure authentication, the customer will be redirected back to your application via the redirectUrl you specified.
Trail the outcome
After your customer completes the payment and is redirected back to your application, you must make another API call to fetch the payment details and thank the customer. This may seem tedious but the new payment security philosophy enforces this flow. Moreover, you can also verify your payment with the webhook notification.
Request
curl --location --request GET 'https://api.dibsy.one/v2/payments/pt_NfszStROpb8poeUrIl' \
--header 'Authorization: Bearer sk_test_mpmEeSyDEnRkXW6qCFRkX' \
Response
HTTP/1.1 201 Created
Content-Type: application/hal+json
{
"id": "pt_NfszStROpb8poeUrIl",
"resource": "payment",
"mode": "live",
"amount": {
"value": "5.00",
"currency": "QAR"
},
"amountNet": {
"value": "3.85",
"currency": "QAR"
},
"amountRemaining": {
"value": "5.00",
"currency": "QAR"
},
"description": "Order #1236",
"method": "googlepay",
"redirectUrl": "https://example.com/order/12345",
"webhookUrl": "https://example.com/webhook/12345",
"status": "succeeded",
"organizationId": "300000",
"sequenceType": "oneoff",
"metadata": {
"order_id": "12345"
},
"details": {
"cardCountryCode": "GB",
"cardHolder": "Kenny Mcormick",
"cardLabel": "Visa",
"cardNumber": "4242 42XX XXXX 4242"
},
"createdAt": "2022-01-03T09:10:33.663",
"expiresAt": "2022-01-03T09:25:33.585",
"paidAt": "2022-01-03T09:11:01.94",
"_links": {
"self": {
"href": "http://api.dibsy.one/v2/payments/pt_NfszStROpb8poeUrIl",
"type": "application/hal+json"
},
"dashboard": {
"href": "https://dashboard.dibsy.one/payments/pt_NfszStROpb8poeUrIl",
"type": "text/html"
},
"documentation": {
"href": "https://api.dibsy.dev/#operation/Get%20Payment",
"type": "text/html"
}
}
}