Google Pay™
You can quickly accept payments on your site from millions of Google users who have saved their bank card data in Google accounts.Read the Google Pay requirements and conditions before accepting.
- General information for developers on Google site
- Guide
- Google's brand guidelines and recommendations for improving the user interface
- Google Pay™ Web integration checklist
- Join test card suite group Use the following options to send a request to Google Pay
If you want to add Google Pay as a payment method on your website, you have several ways to do it:
-
Integrate our payment widget on your website
-
Place the Google Pay button on your website yourself, obtain the configuration for it from us, and then process the payment using our endpoint with the data received from Google Pay. This method will be described in more detail below
Placing the Google Pay button yourself
Step 1
Create an order using the Create order by ID endpoint.This step is optional but it will help you to obtain a configuration object with filled-in transaction info.
Step 2
Use the Get payment config endpoint to obtain the configuration for the Google Pay button.
Step 3
When a user selects the payment method in the wallet and confirms the payment, you will receive a paymentData object from Google Pay.You need to send this object to us by Create payment by ID endpoint for creating the payment
This is the example how to apply the configuration and encode paymentData to create a payment. Create file index.html
<!DOCTYPE html>
<html>
<head>
<title>Google Pay Test</title>
<script src="google.js"></script>
</head>
<body>
<script async src="<https://pay.payerly.tech/gp/p/js/pay.js>" onload="onGooglePayLoaded()"></script>
<div id="container">
</body>
</html>
Create file google.js
// Get the configuration object from your server, which will obtain this config from our API server using a security token.
// Here is hardcoded example of the configuration object
const config = {
environment: "TEST",
isReadyToPayRequest: {
apiVersion: 2,
apiVersionMinor: 0,
allowedPaymentMethods: [
{
type: "CARD",
parameters: {
allowedAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"],
allowedCardNetworks: [
"AMEX",
"DISCOVER",
"INTERAC",
"JCB",
"MASTERCARD",
"VISA",
],
allowPrepaidCards: true,
allowCreditCards: true,
assuranceDetailsRequired: true,
billingAddressRequired: true,
billingAddressParameters: {
format: "MIN",
phoneNumberRequired: true,
},
},
tokenizationSpecification: {
type: "PAYMENT_GATEWAY",
parameters: {
gateway: "simbasoft",
gatewayMerchantId: "exampleGatewayMerchantId",
},
},
},
],
existingPaymentMethodRequired: true,
},
paymentDataRequest: {
apiVersion: 2,
apiVersionMinor: 0,
merchantInfo: {
merchantId: "01234567890123456789",
merchantName: "ExampleMerchant",
},
allowedPaymentMethods: [
{
type: "CARD",
parameters: {
allowedAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"],
allowedCardNetworks: [
"AMEX",
"DISCOVER",
"INTERAC",
"JCB",
"MASTERCARD",
"VISA",
],
allowPrepaidCards: true,
allowCreditCards: true,
assuranceDetailsRequired: true,
billingAddressRequired: true,
billingAddressParameters: {
format: "MIN",
phoneNumberRequired: true,
},
},
tokenizationSpecification: {
type: "PAYMENT_GATEWAY",
parameters: {
gateway: "simbasoft",
gatewayMerchantId: "exampleGatewayMerchantId",
},
},
},
],
transactionInfo: {
currencyCode: "KZT",
transactionId: "1242752223000000111",
totalPriceStatus: "FINAL",
totalPrice: "402.00",
},
emailRequired: false,
shippingAddressRequired: false,
shippingOptionRequired: false,
},
};
let attempts = 0;
let paymentsClient = null;
function getGoogleIsReadyToPayRequest() {
// Use "isReadyToPayRequest" field from the configuration object
return Object.assign({}, config.isReadyToPayRequest);
}
function getGooglePaymentDataRequest() {
// Use "paymentDataRequest" field from the configuration object
return Object.assign({}, config.paymentDataRequest);
}
function getGooglePaymentsClient() {
// Use "environment" field from the configuration object
if (paymentsClient === null) {
paymentsClient = new google.payments.api.PaymentsClient({
environment: config.environment,
});
}
return paymentsClient;
}
function onGooglePayLoaded() {
const paymentsClient = getGooglePaymentsClient();
paymentsClient
.isReadyToPay(getGoogleIsReadyToPayRequest())
.then(function (response) {
if (response.result) {
addGooglePayButton();
}
})
.catch(function (err) {
console.error(err);
});
}
function addGooglePayButton() {
const paymentsClient = getGooglePaymentsClient();
const button = paymentsClient.createButton({
buttonColor: "default",
buttonType: "pay",
buttonLocale: "en",
onClick: onGooglePaymentButtonClicked,
});
document.getElementById("container").appendChild(button);
}
function onGooglePaymentButtonClicked() {
const paymentDataRequest = getGooglePaymentDataRequest();
const paymentsClient = getGooglePaymentsClient();
paymentsClient
.loadPaymentData(paymentDataRequest)
.then(function (paymentData) {
processPayment(paymentData);
})
.catch(function (err) {
console.error(err);
});
}
function processPayment(paymentData) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
// Send the "encryptedPaymentData" object to your server, which will send a request to our API server to create a payment using a security token
const encryptedPaymentData = toBase64(JSON.stringify(paymentData));
console.log(encryptedPaymentData);
if (attempts++ % 2 == 0) {
reject(new Error("Every other attempt fails, next one should succeed"));
} else {
resolve({});
}
}, 500);
});
}
function toBase64(str) {
const bytes = new TextEncoder().encode(str);
const binString = Array.from(bytes, (byte) =>
String.fromCodePoint(byte)
).join("");
return btoa(binString);
}