Google Pay iFrame
Pre-Requisites
- Access to our permissioned Google Pay feature
- Legal Entity ID (other than your app's) -- required to create an Account
- Account ID (other than your app's) -- required to create a Payment in the last step of this article
We support the use of Google Pay on your platform. Using Google Pay allows your merchants to simplify the checkout flow, making checkouts faster and improving the conversion performance of your platform. Google Pay payment method tokens are encrypted by Google and decrypted by us, protecting payment information even in the event of a compromised application. Follow this guide to learn how to integrate Google Pay for your merchants.
The sequence diagram below describes the happy path flow of our Google Pay iFrame.
Embed The Google Pay iFrame
Step 1: Generate a Google Pay token via our iFrame
Note that this CodePen is intended to:
- Showcase the configurable options available on our Google Pay iFrame
- Make the fields in a Google Pay response easily available for testing
This CodePen uses a pre-configured app ID for demonstration purposes, so you will not be able to use tokens from this CodePen in the WePay API. Feel free to copy and paste this code into your own project once your app is enabled for Google Pay, or just take the following components:
<div id="google_pay_iframe"></div>
in your payer-facing HTML<script src="https://cdn.wepay.com/wepay.min.js"></script>
in your payer-facing HTML head- The entire JS from the CodePen
Configure The Google Pay Button
You can configure the following properties of the Google Pay button, as seen starting on line 10 of the CodePen:
- Button color
- Button language
- Button text (e.g. checkout, buy, pay, etc.)
- Button size behavior
You can also add custom styling.
Configure The Google Pay Request
You can configure the following properties of the Google Pay request, as seen starting on line 29 of the CodePen:
- Accepted card brands -- Note that this must match the card brands that we accept
- Merchant name
- Whether the payment sheet will require the payer's email address
- Whether the payment sheet will require the payer's shipping address
- Further define requirements of the shipping address, if required
- Details about the transaction (e.g. amount, currency, display items, etc)
- Discount details
- Whether the payer will be required to select a shipping method
- Details about shipping method selections to show the payer
Again, your configuration must include setting the accepted card brands to the card brands that we accept:
const allowedCardNetworks = ["AMEX", "DISCOVER", "INTERAC", "JCB", "MASTERCARD", "VISA"];
Send the returned Google Pay token to your server in preparation for using it with the WePay APIs.
Use The Google Pay Token
Step 2: Convert the Google Pay token into a WePay Payment Method
After you've generated a Google Pay token with your own app ID, you will need to send aPOST /payment_methods
request to us, using the Google Pay token returned by our iFrame. See the sample request below, where the Google Pay token, payment method
type
, and cardholder information need to be provided. All the required card holder information can be retreived from the iFrame response. See our Process Payments article for further information on processing payments.Note
3.0.rc.2.1
or 3.2
in the Version header parameter for your requests to this endpoint.Example request to POST /payment_methods
:
curl -X POST \
--url 'https://stage-api.wepay.com/payment_methods' \
-H 'Accept: application/json'\
-H 'App-Id: {YOUR-APP-ID}'\
-H 'App-Token: {YOUR-APP-TOKEN}'\
-H 'Api-Version: '3.2'\
-H 'Content-Type: application/json'\
-H 'Unique-Key: {UNIQUE-KEY}
--data-raw {
"type": "google_pay",
"google_pay": {
"payment_method_data": "{googlePayToken_value}",
"card_holder": {
"holder_name": "John Snow",
"email": "example@wepay.com",
"address": {
"country": "US",
"postal_code": "94025"
}
}
}
}
Below is a sample response payload where a WePay payment method ID will be returned (be sure to keep this handy - you'll need to use this to create and capture a payment later), as well as fill in other information.
Example response fromPOST /payment_methods
:{
"id": "00000000-6363-0000-0000-00521ec2df84",
"resource": "payment_methods",
"path": "/payment_methods/00000000-6363-0000-0000-00521ec2df84",
"owner": {
"id": "27415",
"resource": "applications",
"path": null
},
"create_time": 1629930873,
"type": "google_pay",
"google_pay": {
"card_holder": {
"holder_name": "Tony Stark",
"email": "example@wepay.com",
"address": {
"line1": null,
"line2": null,
"city": null,
"region": null,
"postal_code": "94025",
"country": "US"
},
"phone": {
"country_code": null,
"phone_number": null,
"type": null
}
},
"expiration_month": 4,
"expiration_year": 2030,
"display_name": "MasterCard xxxxxx4769"
},
"custom_data": null,
"api_version": "3.0"
}
Create A Wepay Payment
Step 3: Use the WePay Payment Method ID to create a Payment
Use the WePay payment method ID returned above to make aPOST /payment_methods
request. You'll use the id
value from the POST /payment_methods
response as the value for payment_method.payment_method_id
in the POST /payments
request. See our Capture Authorized Payments guide to learn about how to execute manual, deferred, and partial captures of payments.
Example request to POST /payments
:
curl -X POST \
--url 'https://stage-api.wepay.com/payments' \
-H 'Accept: application/json'\
-H 'App-Id: {YOUR-APP-ID}'\
-H 'App-Token: {YOUR-APP-TOKEN}'\
-H 'Api-Version: 3.0'\
-H 'Content-Type: application/json'\
-H 'Unique-Key: {UNIQUE-KEY}
--data-raw '{
"amount": AMOUNT_AS_INTEGER,
"currency": "USD",
"account_id": "{merchant's-account-id}",
"payment_method": {
"payment_method_id": "{INSERT_PAYMENT_METHOD-ID}",
"type": "payment_method_id"
}
}
Example response from
POST /payments
:{
"amount" : 1000,
"amount_refunded" : 0,
"amount_disputed" : 0,
"auto_capture" : true,
"capture_at" : null,
"create_time" : 1510080179,
"currency" : "USD",
"custom_data" : null,
"failure_reason" : null,
"fee_amount" : 0,
"id" : "00000000-0000-0000-0000-0000767bf5cd",
"order" : null,
"owner" : {
"id" : "{merchant's-account-id}",
"path" : "/accounts/{merchant's-account-id}",
"resource" : "accounts"
},
"path" : "/payments/00000000-0000-0000-0000-0000767bf5cd",
"payment_method" : {
"id" : "00000000-6363-0000-0000-000008b93a6e",
"path" : "/payment_methods/00000000-6363-0000-0000-000008b93a6e",
"resource" : "payment_methods"
},
"pending_reasons" : [
{
"details" : [],
"reason_code" : "PROCESSING",
"reason_message" : "Payment is being processed."
}
],
"resource" : "payments",
"status" : "pending",
"authorization_code" : "0224241",
"txnr_app_fee" : null,
"txnr_merchant" : null,
"initiated_by" : "none",
"api_version": "3.0"
}
Create a Test Payment
Follow these steps to create test payments with Google Pay:
- Initialize the Google Pay iFrame provided in this guide.
- For testing only, subscribe to the Google Test Card Suite in order to utilize test cards.
- Generate a Google Pay token from the iFrame.
- Call
POST/ payment_methods
with API version3.0.rc.2.1
or3.2
and convert the Google Pay token into a payment method. (Note: a Google Pay token needs to be converted into a payment method and cannot be directly ingested in aPOST/ payments
call) - Utilize the generated
payment_methods_id
in thePOST/ payments
call to make a successful authorization call (setauto_capture
totrue
to capture the auth immediately or callPOST/ payments/id/capture
to capture the payment later).
Note
POST/ payment_methods
endpoint with API version 3.0.rc.2.1
or 3.2
can also be used to generate payment_method_token
and payment_methods_id
for CC/DB/ACH respectively.