Google Pay iFrame

 

Pre-Requisites
  • Access to WePay's permissioned Google Pay feature
  • Legal Entity ID (other than your app's)
  • Account ID (other than your app's)

WePay supports 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 WePay, 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 WePay's Google Pay iFrame.

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

Embedd The Google Pay iFrame

Note that this CodePen is intended to:

  1. Showcase the conigurable options available on the WePay Google Pay iFrame
  2. Make the fields in a Google Pay response available

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.

Outside of the app ID, Google Pay configs can be found starting on line 189.

Define the card networks accepted by WePay through the allowedCardNetworks parameter in the google_pay_configs object.

Copy
Copied
const allowedCardNetworks = ["AMEX", "DISCOVER", "INTERAC", "JCB", "MASTERCARD", "VISA"];

Use The Google Pay Token

Once your application is able to create Google Pay tokens, you will need to send a POST /payment_methods request to WePay, using the Google Pay token returned by WePay's 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.

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.

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

Use the WePay payment method ID returned above in the POST /payment_methods type parameter to "payment_method_id" when executing Google payments.

See our Capture Authorized Payments guide to learn about how to execute manual, deferred, and partial captures of payments.

Copy
Copied
curl -X POST \
  --url 'https://stage-api.wepay.com/payments' \
  -H 'Accept: application/json'\
  -H 'App-Id: {YOUT-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_METHODS-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 WePay's Risk team to accurately action a payment.