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.

Google PayWePay iFramePartner ServerWePay ServerPayer authorizes paymentEncrypted payload on successReturn response resultsPOST /paymentsGoogle PayWePay iFramePartner ServerWePay Server

Embed The Google Pay iFrame

Step 1: Generate a Google Pay token via our iFrame

Note that this CodePen is intended to:

  1. Showcase the configurable options available on our Google Pay iFrame
  2. 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:

Copy
Copied
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 a POST /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
Be sure to use the Pre-Release version 3.0.rc.2.1 in the Version header parameter for your requests to this endpoint.

Example request to POST /payment_methods:

Copy
Copied
  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.0.rc.2.1'\
  -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 from POST /payment_methods:
Copy
Copied
{
  "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 a POST /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:

Copy
Copied
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"
	}
}
Read through the Risk Certification guide to identify standard required payment-level rBits and Risk Headers. A payment may be flagged for manual risk review in which it is subject to 1-2 business days hold. The inclusion of payment-level rBits reduces the frequency and duration of manually reviewed payments and allows our Risk team to accurately action a payment.Example response from POST /payments:
Copy
Copied
{
	"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:

  1. Initialize the Google Pay iFrame provided in this guide.
  2. For testing only, subscribe to the Google Test Card Suite in order to utilize test cards.
  3. Generate a Google Pay token from the iFrame.
  4. Call POST/ payment_methods with API version 3.0.rc.2.1 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 a POST/ payments call)
  5. Utilize the generated payment_methods_id in the POST/ payments call to make a successful authorization call (set auto_capture to true to capture the auth immediately or call POST/ payments/id/capture to capture the payment later).
Note
The Google Pay iFrame and the POST/ payment_methods endpoint with API version 3.0.rc.2.1 can also be used to generate payment_method_token and payment_methods_id for CC/DB/ACH respectively.