Client

Google Pay™

Google Pay allows customers to securely complete payments using credit or debit cards linked to their Google account. Evervault has built-in support for Google Pay. Our Google Pay component will intercept the Google Pay token and provide you with direct access to the encrypted payment method, which can then be sent to any payment processor using Relay.

Getting Started

All users of Google Pay must agree to the Google Pay Terms and Conditions.

Create a Merchant

Before you can use Google Pay, you will need to create a merchant record to use for the transaction. You can create a Merchant from inside the payments section in the Evervault Dashboard or via the Merchants API.

Install the SDK

Our JavaScript SDK is distributed from our CDN, and can be installed by placing this script tag in the head of your HTML file. The SDK must be loaded directly from our CDN and cannot be bundled with your application or self hosted.

1<script src="https://js.evervault.com/v2"></script>

Once the SDK is installed, initialize it using your Team ID and App ID. You can find these in the Evervault Dashboard.

1const evervault = new Evervault("<TEAM_ID>", "<APP_ID>");

You can also install Evervault via the @evervault/js package on npm. This package is a light wrapper which handles loading the SDK from our CDN and also provides TypeScript definitions.

1import { loadEvervault } from "@evervault/js";
2
3const evervault = loadEvervault("<TEAM_ID>", "<APP_ID>");

Frequently Asked Questions

Create a transaction

Next, you will need to create a transaction to describe the payment you want to process. You will need to provide the amount, currency, country, and merchant details for the transaction.

1const transaction = evervault.transactions.create({
2  amount: 1000,
3  currency: "USD",
4  country: "US",
5  merchantId: "merchant_8f3dc605aa5d",
6  lineItems: [
7    {
8      label: "Example Item",
9      amount: 1000,
10    },
11  ],
12});

Mount a Google Pay component

Now that you have created a transaction, you can create and mount the Google Pay component to display the Google Pay button to your users. The Google Pay component takes the transaction you created as a first argument and an options object with a process function that will be called with the encrypted payment method when the user completes the payment.

1const google = evervault.ui.googlePay(transaction, {
2  process: async (paymentMethod) => {
3    console.log(paymentMethod.card?.number);
4    // ev:Tk9D:hY5KJanIPOHBoI8S:AsnnjRl0FDe2zEddBAQG/eI2vN+b...:$
5  },
6});
7
8google.on("cancel", () => {
9  console.log("Google Pay canceled");
10});
11
12google.on("success", () => {
13  console.log("Google Pay success");
14});
15
16// Mount the Google Pay component to a container element
17google.mount("#google-pay");

Process the payment

The process function is an async function that is called when the user authorizes the payment. Typically you will want to forward the encrypted payment method to your backend in order to process the payment. You can use Relay to forward the encrypted payment method to any third party payment processor.

1const google = evervault.ui.googlePay(transaction, {
2  process: async (paymentMethod) => {
3    await fetch("your-api.com/payments", {
4      method: "POST",
5      headers: {
6        "Content-Type": "application/json",
7      },
8      body: JSON.stringify(paymentMethod),
9    });
10  },
11});

Google Pay can return either a networkToken or a card object. Typically this depends on whether the transaction was initiated and authenticated via biometrics on a mobile device, or via a web browser on a desktop device.

1{
2  "token": {
3    "number": "ev:Tk9D:hY5KJanIPOHBoI8S:AsnnjRl0FDe2zEddBAQG/eI2vN+b...:$",
4    "expiry": {
5      "month": "12",
6      "year": "31"
7    },
8    "tokenServiceProvider": "Google"
9  },
10  "cryptogram": "ev:Tk9D:vUVeybXqrA9Ds4rZ...=:$",
11  "eci": "5",
12  "card": {
13    "brand": "visa",
14    "lastFour": "1234",
15    "displayName": "visa 1234",
16    "funding": "debit",
17    "segment": "consumer",
18    "country": "ie",
19    "currency": "eur",
20    "issuer": "Revolut Bank Uab"
21  },
22}

Network tokens ofer inherent security due to their device-bound nature. However, responses containing only card details carry a higher risk and require additional authentication steps. We recommend leveraging our 3D Secure API to perform this necessary authentication for card-based responses.

Error handling

Errors while processing the payment

The process function also accepts a second argument which is an object of helper methods. This object includes a fail function that can be called with an error message to display an error to the user in the event of an error during payment processing.

1const google = evervault.ui.googlePay(transaction, {
2  process: async (paymentMethod, { fail }) => {
3    try {
4      // ...
5    } catch (error) {
6      fail({
7        message: "Cannot pay with payment credentials",
8      });
9    }
10  },
11});

Errors while rendering the component

In the rare event that the Google Pay component fails to render, you can handle the error by listening to the error event.

1const google = evervault.ui.googlePay(transaction, { ... })
2
3google.on("error", (error) => {
4  console.error("Google Pay error", error);
5});

Use Google Pay with your PSP

You can use Evervault's Google Pay integration with any PSP. This means you:

Don't use your PSP's Google Pay integration.
Preferably use network tokens with your PSP's APIs.

When Google Pay returns a network token, use it for all payments, retries, etc. with your PSP. There's no additional configuration (e.g., certificates) with your PSP or Google needed. Most PSPs have network token APIs and parameters for passing network token data. Like other 3rd party API calls, use Relay to decrypt network token data and send it to your PSP.

Customization

Google Pay allows you to customize the appearance of the payment button with various predefined styles. These can be passed as additional options when initializing the Google Pay component. You can see all of the available options in the JS SDK documentation.

1const google = evervault.ui.googlePay(transaction, {
2  color: "white",
3  type: "checkout",
4  locale: "fr",
5  padding: "10px",
6  borderRadius: 5,
7  size: {
8    width: "200px",
9    height: "40px",
10  },
11  process: async (paymentMethod) => {
12    // ...
13  },
14});

Configuration

Google Pay allows you to specify the authorization methods and card networks that are supported by your merchant. This can be done by passing the allowedAuthMethods and allowedCardNetworks options when initializing the Google Pay component. You can see the available options in the JS SDK.

1const google = evervault.ui.googlePay(transaction, {
2  allowedAuthMethods: ["PAN_ONLY"],
3  allowedCardNetworks: ["VISA", "MASTERCARD"],
4  process: async (paymentMethod) => {
5    // ...
6  },
7});

3D Secure

Google Pay supports encrypted and non-encrypted payment methods. Encrypted payment methods are preferred as they provide enhanced security and reduced fraud. Non-encrypted payment methods are also supported, and when used can subsequently be submitted for authentication via our 3D Secure API. See our 3D Secure Guide for more information. You can directly pass the encrypted card number string from the returned payment method to our 3DS API to perform an authentication.

Content Security Policy (CSP)

If you are using a Content Security Policy (CSP), you will need to add the following directives to allow the Evervault SDK to function correctly.

1script-src https://js.evervault.com;
2connect-src https://keys.evervault.com https://api.evervault.com;
3frame-src https://ui-components.evervault.com;

What's next

3D Secure
Learn how 3D Secure works and how it can be used to enhance your payment security.
Apple Pay
Learn how to integrate Apple Pay with Evervault.

Google Pay™

Frequently Asked Questions

Why does the SDK need to be loaded from the CDN?

How do I get my Team ID and App ID?

Can I load the SDK asynchronously?

On this page