Google Pay™

• We recommend reading through the Google Pay Web Developer documentation to get an idea of how google pay works on your site. You should also read through Google Pay's Integration Checklist and Brand Guidelines.
• When requesting the payment network token from Google, the merchant needs to include the following values.
  • gateway use whenthen
  • gatewayMerchantId your google merchant ID (as described at the beginning of the tutorial).
• In the Google Pay integration tutorial, Step 2 explains how to set the payment tokenization method. Theparameters object would look something like:
const tokenizationSpecification = {
    type: 'PAYMENT_GATEWAY',
    parameters: {
      'gateway': 'whenthen',
      'gatewayMerchantId': '*** YOUR GOOGLE MERCHANT ID ***'
    }
  };

• After obtaining a payment network token from Google Pay, you can then use this to call the Create Payment API setting the paymentMethod as GOOGLE_PAY and passing the network token in the walletToken field. You must also send the transactionId under the googlePay object. The transactionId is a unique ID that identifies a transaction attempt. Read more info here.
curl
-X POST
-H "Content-Type: application/json"
-H "Authorization: Bearer xxxxxxx"
-d '{
	"query": "mutation authorizePayment($authorisePayment: AuthorisedPaymentInput!) {
    authorizePayment(authorisePayment: $authorisePayment) {
       id
       status
    }
  }",
  "variables": {
    "authorisePayment":{
      "orderId":"557512fb-e5f3-45ce-9e60-b9418b92153b",
      "flowId":"2d0fc623-f1ca-4051-b60a-7366ca14783c",
      "amount":100,
      "currencyCode":"*** ISO 4217 Curency Code ***",
      "paymentMethod":{
         "type":"GOOGLE_PAY",
         "walletToken":"*** GOOGLE PAY TOKEN ***",
         "googlePay":{
            "transactionId":"123"
         }
      },
      "customer":{
         "id":"1ba5d56b-f6d6-4170-b246-ca886d1e111f"
      },
      "perform3DSecure":{
         "redirectUrl":"*** redirect URL for 3DS ***"
      }
    }
  }
}'
https://api.whenthen.com/api/graphql

Display the Google Pay button on your checkout by adding googlepay to the alternativePaymentMethods option.

Configuration works for both Elements and Drop-In.

const option = {
	alternativePaymentMethods: [
		{
		"type": "googlepay",
		"option": {
				/* Required parameters */
			  merchantInfo: {...},
			  transactionInfo: {...},
				
				/* Optional parameters */
			  cardParameters: {...}
			  existingPaymentMethodRequired: true,
			  paymentData: {...},
			  button: {...}
			} 
		}
	]
}    

Elements and Drop-in uses the same configuration for googlepay, the difference is that when using Elements, onPaymentRequest callback function will receive a second parameter, paymentData (see PaymentDataRequest for more details) while Drop-In process the payment and return the result fromauthorizePayment in onPaymentComplete callback function.

Card Parameters

{
  allowedAuthMethods: ['AMEX', 'DISCOVER', 'INTERAC', 'JCB', 'MASTERCARD', 'MIR', 'VISA'],
  allowedCardNetworks: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
  allowPrepaidCards: true,
  allowCreditCards: true,
  billingAddressRequired: false,
  billingAddressParameters: undefined,
}

Payment Data

paymentData option is only relevant if you are integrating with WhenThen Checkout SDK Elements. If you're integrating with drop-in, you'll only get the result from theauthorizePayment api call on the onPaymentComplete callback function.

{
  emailRequired: false,
  shippingAddressRequired: false,
  shippingOptionRequired: false,
  shippingAddressParameters: undefined,
  shippingOptionParameters: undefined
}

Button

{
  buttonColor: 'black',
  buttonType: 'buy',
  buttonLocale: undefined // Default is set to the browser or operating system language settings.
}

Elements

onPaymentRequest receives a second parameter — paymentData

See PaymentDataRequest for more details.

const handlePaymentRequest = ({paymentMethod, paymentData}) => {
	switch(paymentMethod){
			case "googlepay": 
					// handle google pay
				}
				...
		}

}
    

{
	paymentMethod: "googlepay", 

	paymentData: { // Additonal data requested in the paymentData option will be returned in this object
		paymentMethodData: {
			description: "Mastercard •••• 0000",
			info: {
				cardDetails: "2738",
				cardNetwork: "MASTERCARD"
			},
			tokenizationData: {
				token: "*** GOOGLE PAY TOKEN ***",
				type: "PAYMENT_GATEWAY"
			},
			type: "CARD"
		}
	}
}
    

Integrating Google Pay into your android application provides your customer with the ability to securely make one-touch payments using any credit or debit card connected to their GooglePay app.

To begin accepting payment with Google Pay on Android, you must first, make a GraphQL request to our setupWallet API to register your GooglePay merchantId with us.