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.
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.
Please reach out to dev@dibsy.one to receive your gateway and gatewayMerchantId
important
Step 1 - Prepare your server
Google requires all websites implementing Google Pay to follow certain prerequisites when setting up your server. 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" . Please reach out to dev@dibsy.one to receive your gateway and gatewayMerchantId .
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"
}
}
}
(Optional) Redirect your customer to 3-D Secure
If you have obtained the payment method token (PAN_ONLY) from the Google Pay response, you can use it to process the payment through the Dibsy API. Compared to CRYPTOGRAM_3DS, payment requests made with PAN_ONLY require an additional step of authentication (3-D Secure). This is similar to a credit card payment flow.
Redirect your customer to the checkout URL which is present in _links.checkout to complete 3-D Secure authentication. Once the customer completes this stage, they will be redirected to the URL passed in the redirectUrl parameter.
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"
}
}
}