Google Pay iFrame

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:

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:

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

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.

{
  "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

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"
	}
}

{
	"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 or 3.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 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).