The Google Pay API can be used in conjunction with other supported
payment methods in
PaymentRequest
.
Step 1: Create a PaymentDataRequest object
Configure a
PaymentDataRequest
object specifying your payment gateway and accepted methods of payment.
We recommend you obtain shipping address, email address, and phone number
through the browser's PaymentRequest
options
argument,
not the Google Pay API, for consistency across payment methods.
Use the Google Pay API to receive only the payment credentials and
optional billing address.
const googlePaymentDataRequest = { environment: 'TEST', apiVersion: 2, apiVersionMinor: 0, merchantInfo: { // A merchant ID is available after approval by Google. // @see {@link https://developers.google.com/pay/api/web/guides/test-and-deploy/integration-checklist} // merchantId: '12345678901234567890', merchantName: 'Example Merchant' }, allowedPaymentMethods: [{ type: 'CARD', parameters: { allowedAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"], allowedCardNetworks: ["AMEX", "DISCOVER", "INTERAC", "JCB", "MASTERCARD", "VISA"] }, tokenizationSpecification: { type: 'PAYMENT_GATEWAY', // Check with your payment gateway on the parameters to pass. // @see {@link https://developers.google.com/pay/api/web/reference/request-objects#gateway} parameters: { 'gateway': 'example', 'gatewayMerchantId': 'exampleGatewayMerchantId' } } }] };
Step 2: Declare Google Pay API support
Add the Google Pay API payment method identifier and its configuration to
the methodData
parameter passed to PaymentRequest
.
const methodData = [ {supportedMethods: 'https://google.com/pay', data: googlePaymentDataRequest} ];
Putting it all together
The following example shows an implementation of the Google Pay API with
other supported payment methods in PaymentRequest
:
<div id="checkout"> <button id="buyButton">Checkout</button> </div> <script> const allowedCardNetworks = ["AMEX", "DISCOVER", "INTERAC", "JCB", "MASTERCARD", "VISA"]; const allowedCardAuthMethods = ["PAN_ONLY", "CRYPTOGRAM_3DS"]; if (window.PaymentRequest) { const request = createPaymentRequest(); request.canMakePayment() .then(function(result) { if (result) { // Display PaymentRequest dialog on interaction with the existing checkout button document.getElementById('buyButton') .addEventListener('click', onBuyClicked); } }) .catch(function(err) { showErrorForDebugging( 'canMakePayment() error! ' + err.name + ' error: ' + err.message); }); } else { showErrorForDebugging('PaymentRequest API not available.'); } /** * Show a PaymentRequest dialog after a user clicks the checkout button */ function onBuyClicked() { createPaymentRequest() .show() .then(function(response) { // Dismiss payment dialog. response.complete('success'); handlePaymentResponse(response); }) .catch(function(err) { showErrorForDebugging( 'show() error! ' + err.name + ' error: ' + err.message); }); } /** * Define your unique Google Pay API configuration * * @returns {object} data attribute suitable for PaymentMethodData */ function getGooglePaymentsConfiguration() { return { environment: 'TEST', apiVersion: 2, apiVersionMinor: 0, merchantInfo: { // A merchant ID is available after approval by Google. // 'merchantId':'12345678901234567890', merchantName: 'Example Merchant' }, allowedPaymentMethods: [{ type: 'CARD', parameters: { allowedAuthMethods: allowedCardAuthMethods, allowedCardNetworks: allowedCardNetworks }, tokenizationSpecification: { type: 'PAYMENT_GATEWAY', // Check with your payment gateway on the parameters to pass. // @see {@link https://developers.google.com/pay/api/web/reference/request-objects#gateway} parameters: { 'gateway': 'example', 'gatewayMerchantId': 'exampleGatewayMerchantId' } } }] }; } /** * Create a PaymentRequest * * @returns {PaymentRequest} */ function createPaymentRequest() { // Add support for the Google Pay API. const methodData = [{ supportedMethods: 'https://google.com/pay', data: getGooglePaymentsConfiguration() }]; const details = { total: {label: 'Test Purchase', amount: {currency: 'USD', value: '1.00'}} }; const options = { requestPayerEmail: true, requestPayerName: true }; return new PaymentRequest(methodData, details, options); } /** * Process a PaymentResponse * * @param {PaymentResponse} response returned when a user approves the payment request */ function handlePaymentResponse(response) { const formattedResponse = document.createElement('pre'); formattedResponse.appendChild( document.createTextNode(JSON.stringify(response.toJSON(), null, 2))); document.getElementById('checkout') .insertAdjacentElement('afterend', formattedResponse); } /** * Display an error message for debugging * * @param {string} text message to display */ function showErrorForDebugging(text) { const errorDisplay = document.createElement('code'); errorDisplay.style.color = 'red'; errorDisplay.appendChild(document.createTextNode(text)); const p = document.createElement('p'); p.appendChild(errorDisplay); document.getElementById('checkout').insertAdjacentElement('afterend', p); } </script>
Payment method parameter list
The Google Pay API configuration passed in PaymentRequest
is similar to the
PaymentDataRequest
object used by the Google Pay API JavaScript client library with a few exceptions:
- An
environment
property should be set on the object matching a string value described inPaymentOptions
- The
transactionInfo
property should be omitted. Total price and currency should instead be specified in thedetails
argument passed toPaymentRequest
Additional object properties specified for the Google Pay API payment method in a PaymentRequest
payment method data property:
Property | Type | Necessity | Description |
---|---|---|---|
environment |
string | optional |
|