Payment Gateway Developer Documentation
Google Pay
Google Pay
Building a Website Integration with Source Allies' Payment Gateway - Google Pay
Related Pages:
- [Payment Gateway Developer Documentation Overview](/payment-gateway/developer)
- [Credit Card and eCheck Transactions](/payment-gateway/developer/cc-and-echeck)
- [Recurring Payments](/payment-gateway/developer/cc-and-echeck)
- [Apple Pay Transactions](/payment-gateway/developer/apple-pay)
- \@sourceallies/payment-gateway
- NPM package
- Developer Documentation
### Getting started with Payment Gateway
We recommend following our tutorial for [cedit card and eCheck transactions](/payment-gateway/developer/cc-and-echeck) and [recurring payments](/payment-gateway/developer/cc-and-echeck) before you incorporate Google Pay.
You will need to include our @sourceallies/payment-gateway NPM package for this tutorial. The developer documentation for @sourceallies/payment-gateway can be found here. Add the following script tag to your payment page:
```html
<script src="https://unpkg.com/@sourceallies/payment-gateway@latest/dist/payment-gateway.umd.js">
</script>
```
You will want to replace `@latest` in the URL with the current version which can be found on the NPM repository here or in the badge below (i.e. If the badge shows 0.3.2 in the green part, replace `@latest` with `@0.3.2`). Including this package allows you to access all of the functions for interfacing with Payment Gateway.
[](https://badge.fury.io/js/%40sourceallies%2Fpayment-gateway)
### Integrating with Google Pay
The process for becoming a vendor that supports Google Pay transactions is different than other payment types. Before setting up a business account with Google, it is necessary to first build out a submission form. This submission form will only be able to handle test submissions through Google Pay until the completed form has been submitted and approved by Google.
Another big difference is that Google Pay does not have test cards for test transactions. To test Google Pay, use a real credit card against their TEST environment. The card will not be charged.
Finally, the Google Pay button should **not** be created in HTML. Google Pay's API has a function that will create the Google Pay button programmatically. If Google Pay is not available, the button should not be displayed. See Google's Brand Guidelines for a complete list of dos and don'ts regarding this button.
> This tutorial was built to be followed along in parallel with the official Google Pay tutorial. The Google Pay instructions will step you through how to get an encrypted payment nonce. Our steps however, guide you through processing it with Payment Gateway.
>
> The steps listed inside of the parentheses for each section were the corresponding steps in the Google Pay tutorial at the time of writing this. Because of this, they may not correctly correspond.
#### Define your Google Pay API version. (Step 1)
We are using version 2.0 of the Google Pay API.
#### Choose a payment tokenization method. (Step 2)
When constructing the `tokenizationSpecification` object, specify Authorize.Net as the provider like this:
```javascript
const tokenizationSpecification = {
type: "PAYMENT_GATEWAY",
parameters: {
gateway: "authorizenet",
gatewayMerchantId: "YOUR AUTHORIZE.NET PAYMENT GATEWAY ID"
}
};
```
#### Describe your allowed payment methods. (Step 4)
When constructing the `baseCardPaymentMethod` object, you can specify additional parameters to get things like billing and shipping addresses from the Google Pay API. For instance, if you wanted to get the billing address, your `baseCardPaymentMethod` would look like this:
```javascript
const baseCardPaymentMethod = {
type: "CARD",
parameters: {
allowedAuthMethods: allowedCardAuthMethods,
allowedCardNetworks: allowedCardNetworks,
billingAddressRequired: true,
billingAddressParameters: {
format: "FULL"
}
}
};
```
#### Register an event handler for user gestures. (Step 9)
After completing all the steps to get a payment nonce, the nonce can be sent to Payment Gateway to finalize the transaction. The nonce itself will look something like this (the `billingAddress` object will only be there if it is set to required):
```json
{
"apiVersionMinor": 0,
"apiVersion": 2,
"paymentMethodData": {
"description": "Visa •••• 1111",
"tokenizationData": {
"type": "PAYMENT_GATEWAY",
"token": {
"signature": "SADFGsdfsdfsESDFse234CSDD3...==",
"protocolVersion": "ECv1",
"signedMessage": {
"encryptedMessage": "dfsgsdGSDFGesrgdfgSA3/a9RqwUuynUhdsfgIU4emfdsfgdsggr3ArMopexmm2Z...==",
"ephemeralPublicKey": "sdfgasfgxsdSER23dSEcgf32d...=",
"tag": "sxd54gs34DSFG5saS2="
}
}
},
"type": "CARD",
"info": {
"cardNetwork": "VISA",
"cardDetails": "1111",
"billingAddress": {
"address3": "",
"sortingCode": "",
"address2": "",
"countryCode": "US",
"address1": "123 Abc Street",
"postalCode": "50500",
"name": "Bob Jones",
"locality": "Des Moines",
"administrativeArea": "IA"
}
}
}
}
```
Now that the payment nonce has been obtained, it is time to build a transaction request and process it with Payment Gateway. This can be done using the function `paymentGateway.processGooglePayTransactionRequest`. `paymentGateway.processGooglePayTransactionRequest` takes in a callback function, the parameter passed into the callback function of `paymentsClient.loadPaymentData`, your gateway data, the payment amount, the customer information, the order information, and the environment of Payment Gateway you want to make the request to. The callback function will take in the `XMLHttpRequest` object.
The `gatewayData`, `customer`, and `order` objects have the following structures:
```javascript
// Your information to link the payments to your Payment Gateway account.
const gatewayData = {
partnerName: "YOUR PARTNER NAME",
gatewayName: "YOUR GATEWAY NAME"
};
const customer = {
email: "Email"
};
const order = {
description: "Description",
invoiceNumber: "Invoice Number"
};
```
> If you would like to modify the `transactionRequest` object that is being sent to Authorize.Net, see the advanced usage section.
>
> `paymentGateway.processGooglePayTransactionRequest` will add a default line item to the request body sent to Authorize.Net. You can specify your own line items by passing in an additional parameter to `paymentGateway.processGooglePayTransactionRequest`. This function also builds the `billTo` object from `paymentData`. You can optionally pass in this object as a parameter as well. See @sourceallies/payment-gateway documentation for more information.
The final function to process the transaction with Payment Gateway will look something like this:
```html
<form>
<label for="invoice_number">Invoice Number</label>
<input id="invoice_number" type="text" value="1">
<label for="amount">Amount</label>
<input id="amount" type="text" value="1.00">
<label for="email_address"></label>
<input type="email" id="email_address" value="email@email.com"></label>
</form>
<script async src="https://pay.google.com/gp/p/js/pay.js"></script>
<script src="https://unpkg.com/@sourceallies/payment-gateway@latest/dist/payment-gateway.umd.js"></script>
<script>
// Your information to link the payments to your Payment Gateway account.
const gatewayData = {
partnerName: "YOUR PARTNER NAME",
gatewayName: "YOUR GATEWAY NAME"
};
// Specifies the environment to be used when Payment Gateway makes requests. This can be set to "DEV" or "PROD".
const environment = "DEV";
// ...Additional code for Google Pay and HTML manipulations...
paymentsClient.loadPaymentData(paymentDataRequest).then(function(paymentData){
const amount = document.getElementById("amount").value
const customer = {
email: document.getElementById("email").value
};
const order = {
description: "Description",
invoiceNumber: "SOME INVOICE NUMBER"
};
function handlePaymentGatewayProcessTransactionResponse(xmlHttpRequest) {
if (!xmlHttpRequest || !xmlHttpRequest.status || xmlHttpRequest.status !== 200) {
console.error("Error when processing the transaction.");
} else {
const data = JSON.parse(xmlHttpRequest.response);
validateResponseBody(data);
}
}
paymentGateway.processGooglePayTransactionRequest(
handlePaymentGatewayProcessTransactionResponse,
paymentData,
gatewayData,
amount,
customer,
order,
environment/*,
lineItems,
billTo */
);
}).catch(function(err) {
// show error in developer console for debugging
console.error(err);
});
</script>
```
A good response will look something like this:
```json
{
"refId": null,
"messages": {
"resultCode": "OK",
"message": [
{
"code": "I00001",
"text": "Successful."
}
]
},
"sessionToken": null,
"transactionResponse": {
"responseCode": "1",
"rawResponseCode": null,
"authCode": "SL47NA",
"avsResultCode": "Y",
"cvvResultCode": "P",
"cavvResultCode": "2",
"transId": "40047844022",
"refTransID": "",
"transHash": "",
"testRequest": "0",
"accountNumber": "XXXX1111",
"entryMode": null,
"accountType": "Visa",
"splitTenderId": null,
"prePaidCard": null,
"messages": {
"message": [
{
"code": "1",
"description": "This transaction has been approved."
}
]
},
"errors": null,
"splitTenderPayments": null,
"userFields": null,
"shipTo": null,
"secureAcceptance": null,
"emvResponse": null,
"transHashSha2": "",
"profile": null,
"networkTransId": "ERQL94OI6JZQRNCF7Q18U1P"
},
"profileResponse": null
}
```
Declined transactions will look something like this:
```json
{
"refId": null,
"messages": {
"resultCode": "OK",
"message": [
{
"code": "I00001",
"text": "Successful."
}
]
},
"sessionToken": null,
"transactionResponse": {
"responseCode": "2",
"rawResponseCode": null,
"authCode": "",
"avsResultCode": "Y",
"cvvResultCode": "P",
"cavvResultCode": "2",
"transId": "40047885239",
"refTransID": "",
"transHash": "",
"testRequest": "0",
"accountNumber": "XXXX1111",
"entryMode": null,
"accountType": "Visa",
"splitTenderId": null,
"prePaidCard": null,
"messages": null,
"errors": {
"error": [
{
"errorCode": "2",
"errorText": "This transaction has been declined."
}
]
},
"splitTenderPayments": null,
"userFields": null,
"shipTo": null,
"secureAcceptance": null,
"emvResponse": null,
"transHashSha2": "",
"profile": null,
"networkTransId": "0BKWE0WSLF0N2WH79JZUYKL"
},
"profileResponse": null
}
```
## Moving to a Production Environment
Once the form is completed and you are receiving good test transactions from Google Pay, step through Google Pay's Integration Checklist. Once you are certain that all steps have been completed, it is time to Request Production Access from Google. You will want to do this with an Admin account, like __admin@yourcompany.com__. The link provided will take you to the Google Pay Business Console. To request an integration, you will need to provide the following information:
- Website URL (eg: www.sourceallies.com)
- Google Pay API integration type (Gateway)
- Screenshots of your Buyflow (if multiple screenshots are the same thing, Google may have follow-up questions)
- Item Selection: When a user is browsing an item or service
- Pre-Purchase Screen: When a user is ultimately ready to make a purchase
- Payment Method Screen: When a user selects Google Pay as their payment method
- Google Pay API Payment Screen: When a user is shown the payment info they’ve saved to Google Pay
- Post-Purchase Screen: When a user has made a successful purchase
If this is your first time using Google's Business Console, you will also need to fill in a Business Profile. This includes the following:
- Business Logo (optional)
- Legal Business Name
- Public Business Name
- Merchant Category Code (MCC)
- Business Phone (optional)
- Your Business's Website
- Customer Support URL
- Customer Support Email
- Customer Support Phone
Once Google accepts your integration, the Merchant ID can be found in the upper right hand corner of the business console.