Enable Google Pay for Web
Google Pay for Web is a dedicated button for custom websites, suitable for those not utilizing PayFrame or PayFields integrations. It allows the creation of hosted payment sites using Payrix Pro as a secure gateway for processing card information through Google Pay tokens. The tutorial guides integrating the Google Pay API with Payrix Pro, covering aspects like registration, API configuration, and payment method management, along with valuable insights and code examples. Key steps include defining the payrixTokenizationSpecification and modifying JavaScript for transactions, ensuring compliance with Payrix Pro requirements for capturing cardholder information, and managing transaction amounts
To enable Google Pay for PayFields or PayFrame integrations, refer to the following resources:
Getting Started
To get started enabling Google Pay for Web, follow the steps below:
Register for access to the Google Pay Business Console.
Get your Merchant ID for Google Pay environments.
For production access to the Google Pay API and to register your Merchant account with Google, check out Google Pay developer documentation. You'll need to register at the Google Pay Business Console to get access to your Google Pay API Merchant ID.
Note
Referrers can integrate Google Pay with Payrix Pro, but please note that we do not provide support for Google’s Integration Checklist or the Google Pay API regarding setup or troubleshooting.
Configuring Google Pay on the Payrix Pro Gateway
The following example shows how to integrate Google Pay with the Payrix Pro gateway. Google provides framework-specific examples in their Google Pay GitHub Repository. The setup steps below utilize the HTML example provided by Google.
Configure Payrix Pro as the Google Pay Payment Gateway
In your code, define the
payrixTokenizationSpecification, replacing{{your_payrixpro_gateway_merchantid}}with the appropriate values for sandbox testing or production.
Refer to Google's Google Pay Setup Tutorial for specific guidance on setting up Google Pay integration for the web.
// Update the `gatewayMerchantId` property with your own value.
// This id will be different for TEST and PRODUCTION environments
const payrixTokenizationSpecification = {
type: 'PAYMENT_GATEWAY',
parameters: {
gateway: 'payrix',
gatewayMerchantId: '{{your_payrixpro_gateway_merchantid}}',
},
};
Object.freeze(payrixTokenizationSpecification); Configure Google Pay Transaction Parameters
The Payrix Pro gateway mandates that the cardholder's first and last name be provided when processing payments. To comply, you must modify the definition of
baseGooglePayRequestto setbillingAddressRequired: true. Additionally, include theFULLformat forbillingAddressParametersor supply the cardholder's first and last name through other means.
const baseGooglePayRequest = {
apiVersion: 2,
apiVersionMinor: 0,
allowedPaymentMethods: [
{
type: 'CARD',
parameters: {
allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
allowedCardNetworks: ['AMEX', 'DISCOVER', 'INTERAC', 'JCB', 'MASTERCARD', 'VISA'],
billingAddressRequired: true,
billingAddressParameters: {
format: 'FULL',
},
},
tokenizationSpecification: payrixTokenizationSpecification,
},
],
merchantInfo,
};The total transaction amount for the Payrix Pro gateway is represented as an integer in cents. It is essential to convert this value accurately from the
transactionInfo.totalPriceprovided by Google Pay. To enhance your JavaScript for creating requests to the Payrix Pro Gateway, please incorporate the following helper functions.
function extractIntegerCents(totalPrice) {
// Use regex to match a formatted number
const match = totalPrice.match(/-?\d+(?:,\d{3})*(?:\.\d+)?/);
if (match) {
// Remove commas and convert to float
const cleanedNumber = match[0].replace(/,/g, '');
return parseFloat(cleanedNumber) * 100;
}
return NaN; // Return NaN if no number is found
}
function getPayrixGatewayRequestData({ gatewayMerchantId, totalPrice, paymentDataResponse}) {
const paymentToken = JSON.parse(paymentDataResponse.paymentMethodData.tokenizationData.token);
const [ first, ...last ] = paymentDataResponse.paymentMethodData.info.billingAddress.name.split(' ');
return {
merchant: gatewayMerchantId, // Payrix Merchant ID
total: extractIntegerCents(totalPrice), // integer transaction total as cents
type: 'sale',
origin: 2, // E-Commerce
entryMode: 10, // Google Pay
payment: {
encrypted: 'googlePaymentToken',
paymentData: paymentToken
},
address1: paymentDataResponse.paymentMethodData.info.billingAddress.address1,
address2: paymentDataResponse.paymentMethodData.info.billingAddress.address2,
city: paymentDataResponse.paymentMethodData.info.billingAddress.locality,
state: paymentDataResponse.paymentMethodData.info.billingAddress.administrativeArea,
zip: paymentDataResponse.paymentMethodData.info.billingAddress.postalCode,
first,
last: last.join(' '),
};
}Set Up Google Pay Payment Success Handlers to Integrate with Payrix Pro
To modify the Google Pay payment success handler, update it to call the Payrix Pro gateway using the provided helpers. Ensure to replace
{{your_payrixpro_gateway_url}}and{{your_payrixpro_gateway_apikey}}with the correct values for testing in the sandbox environment or for going live in production when you are ready.
const gatewayReq = getPayrixGatewayRequestData({
gatewayMerchantId: payrixTokenizationSpecification.parameters.gatewayMerchantId,
totalPrice: req.transactionInfo.totalPrice,
paymentDataResponse: res
});
return fetch('{{your_payrixpro_gateway_url}}', {
method: 'POST',
headers: {
'Content-Type': 'application/json; charset=UTF-8',
'APIKEY': '{{your_payrixpro_gateway_apikey}}',
},
body: JSON.stringify(gatewayReq),
});
})Configure Payrix Pro Gateway Response Handlers
To effectively manage the Payrix Pro gateway response, your code could be structured as follows, particularly if you are utilizing promises:
Tip: For framework-specific examples, visit Google’s Google Pay GitHub Repository.
// Get an instance of the Google Payments Client.
getGooglePaymentsClient()
// Load the payment data in console for the transaction.
.loadPaymentData(req)
// If the payment is successful, process the payment
.then(function (res) {
// show returned data for debugging
console.log(res);
// @note DO NOT save the payment credentials for future transactions,
// unless they're used for merchant-initiated transactions with user
// consent in place.
const gatewayReq = getPayrixGatewayRequestData({
gatewayMerchantId: payrixTokenizationSpecification.parameters.gatewayMerchantId,
totalPrice: req.transactionInfo.totalPrice,
paymentDataResponse: res
});
return fetch('{{your_payrixpro_gateway_url}}', {
method: 'POST',
headers: {
'Content-Type': 'application/json; charset=UTF-8',
'APIKEY': '{{your_payrixpro_gateway_apikey}}',
},
body: JSON.stringify(gatewayReq),
});
})
.then(function (gatewayRes) {
if (!gatewayRes.ok) {
throw new Error(`Payrix gateway response status: ${gatewayRes.status}`);
}
return gatewayRes.json();
})
.then(function (gatewayResJson) {
if (gatewayResJson.errors && gatewayResJson.errors.length > 0) {
throw new Error(`Payrix gateway response errors: ${gatewayResJson.errors}`);
}
// payment gateway authorizes payment
console.log(gatewayResJson);
})
// If there is an error, log it to the console.
.catch(console.error);Sandbox Testing
To ensure a smooth integration and functionality of Google Pay on your web platform, follow the steps below to test in both Payrix Pro and Google Pay's sandbox environments.
If you have created a direct integration with Google Pay using your own Google Pay Console account, you can proceed by following the steps in the Integration Checklist provided by Google for Developers. This checklist will guide you through the steps necessary to test your integration in the sandbox environment.
Conclusion
In summary, integrating Google Pay for Web with the Payrix Pro gateway effectively processes payments on custom websites. This tutorial outlines essential steps for setting up Google Pay using a standalone button for efficient transaction management.
Key findings emphasize accurately defining billing address parameters and converting transaction amounts to meet Payrix Pro requirements. The tutorial also includes links to resources for integrating Google Pay with PayFields and PayFrame.