# Google Pay

{% hint style="danger" %}
**Not all gateways support Google Pay**. Google Pay is supported on Acquired3DS, Adyen, Airwallex, Authorize.netV2, Braintree, cardstream, Celerispay, CheckoutV2, Easy Pay Direct, Fluid Pay, Fondy, Gala Technology, Merchant Warrior, NMI, NomuPay, Pay.com , Payarc, PaysafeV2, Priority, Revolve3, Solid, SquareV2, StripeV2, Surgeify, Swipen, TotalApps, Truevo, VantivV2, Whitelabel Payments, WorldlineV2, Worldpay.
{% endhint %}

{% hint style="warning" %}
Google Pay is generally one-time use.  Rebills and 1-click upsells are supported on AdyenV2, Airwallex, eMerchantPay, NMI, Stripe, CheckoutV2, and Trust Payments.

Confirm with your gateway and test thoroughly before starting live traffic.
{% endhint %}

***

### Step 1: Login and navigate to the funnel on which to add Google Pay <a href="#googlepay-checkoutchamp-step1-loginandnavigatetothefunnelonwhichtoaddgooglepay" id="googlepay-checkoutchamp-step1-loginandnavigatetothefunnelonwhichtoaddgooglepay"></a>

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FlXAUhy0Vmts5kUBnni3O%2Fimage.png?alt=media&#x26;token=4c667913-60a4-4f30-ad9f-281988190b6b" alt=""><figcaption></figcaption></figure>

***

### Step 2: Click the gear button on the top left to open the funnel settings <a href="#googlepay-checkoutchamp-step2-clickthegearbuttononthetoplefttoopenthefunnelsettings" id="googlepay-checkoutchamp-step2-clickthegearbuttononthetoplefttoopenthefunnelsettings"></a>

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FiSIUbieHfhFwB1CpXhTM%2Fimage.png?alt=media&#x26;token=3bc8ebf9-bebe-4593-b99f-9126a4823787" alt="" width="373"><figcaption></figcaption></figure>

***

### Step 3: Open the Payments section <a href="#googlepay-checkoutchamp-step3-openthepaymentssection" id="googlepay-checkoutchamp-step3-openthepaymentssection"></a>

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FciK6LBzCRHfsiZRnpzwt%2Fimage.png?alt=media&#x26;token=77d5be80-c9f2-470a-8ddf-caba5ef7884a" alt="" width="359"><figcaption></figcaption></figure>

***

### Step 4: Add the Google Pay credentials <a href="#googlepay-checkoutchamp-step4-addthegooglepaycredentials" id="googlepay-checkoutchamp-step4-addthegooglepaycredentials"></a>

Select the **Gateway** that you want your Google Pay transactions to run to. Ensure the gateway is in the supported list at the top of this document.

Please review the tooltips in the app for a detailed explanation of each credential.

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2Fdxkm5iHgpXp0uMnPDk4S%2Fimage.png?alt=media&#x26;token=0f4de4d2-cb60-47f4-870f-a6f5e621c293" alt="" width="375"><figcaption></figcaption></figure>

**Gateway Value** can be found here <https://developers.google.com/pay/api/web/reference/request-objects#gateway>

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FImU8wMbSucYWOVvKah62%2Fimage.png?alt=media&#x26;token=ef33451b-92c9-4993-b50a-497d0f8cd512" alt="" width="563"><figcaption><p><strong>searching for NMI on Google's gateway list</strong></p></figcaption></figure>

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FG9nY42QPL3L9dZgqOsgO%2Fimage.png?alt=media&#x26;token=7dc0eb12-4b93-4c3d-96a9-ad2c71f8cfbb" alt="" width="563"><figcaption><p><strong>searching for Stripe on Google's gateway list</strong></p></figcaption></figure>

**Gateway Merchant ID** is the Merchant Id provided by your gateway (you may need to reach out to the gateway or merchant provider for this value). It is the same value found on your VAR sheet and should be the same value as entered here on your gateway configuration:

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FqtdO7ZHA2izHiCIRF12Z%2Fimage.png?alt=media&#x26;token=ae1e9652-ca4f-43ba-9dc3-6265cc2f2a28" alt="" width="375"><figcaption></figcaption></figure>

{% hint style="info" %}
Stripe requires entry of a Publishable Key instead of Gateway Merchant Id. This is a long value that starts with pk\_ and is appended with your account ID.

Enter pk\_live\_51Rgr0y2MbFpnA82ZcmBIkpi2X88EdzB5qnjL356OdXq0rzvd904DAVWAqqnsDQf0uuxM5ueAHJjQE0i8TLDJvPwG00uDN7asIU/\[the accountId from your StripeV2 gateway in Checkout Champ - without the brackets]

It should look something like this when fully entered

pk\_live\_51Rgr0y2MbFpnA82ZcmBIkpi2X88EdzB5qnjL356OdXq0rzvd904DAVWAqqnsDQf0uuxM5ueAHJjQE0i8TLDJvPwG00uDN7asIU/acct\_12345678
{% endhint %}

{% hint style="info" %}
Google documents are wrong on Fluid Pay.  Gateway must be "gatewayprocessing" (without quotes) and gatewayMerchantId must be the public api key from your Fluid Pay portal.
{% endhint %}

**Merchant ID** is retrieved from your business console <https://pay.google.com/business/console/>

Place your page in **Test Mode** to enable testing with Google. Do be sure to uncheck when testing is complete. Click [here ](#googlepay-checkoutchamp-testmodetestmode)for more details on testing.

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2F9fyzjshL2kSrl9JYMU5C%2Fimage.png?alt=media&#x26;token=7ae4137c-b5ed-47ec-be78-3c74b0e9389f" alt="" width="234"><figcaption></figcaption></figure>

***

### Step 5: Save and Continue <a href="#googlepay-checkoutchamp-step5-saveandcontinue" id="googlepay-checkoutchamp-step5-saveandcontinue"></a>

***

### Step 6: Edit Checkout page and add Google Pay button <a href="#googlepay-checkoutchamp-step6-editcheckoutpageandaddgooglepaybutton" id="googlepay-checkoutchamp-step6-editcheckoutpageandaddgooglepaybutton"></a>

You can choose a white or black Google Pay button. Do not add both to the page. The difference is color only.

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FbJcj3FpYTgfCVZvMyK14%2Fimage.png?alt=media&#x26;token=2b6299ff-aaa4-46e9-bbc7-59e6882efdad" alt="" width="183"><figcaption></figcaption></figure>

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2F8k9rNkRBY8Pl9ZwllmdI%2Fimage.png?alt=media&#x26;token=b0e434fd-eaf0-4046-9604-cf3806d1b39d" alt="" width="563"><figcaption></figcaption></figure>

#### Step 6-1: Customize size of button by clicking on the button and dragging the highlighted corners or use Dimensions tab for advanced edits. <a href="#googlepay-checkoutchamp-step6-1-customizesizeofbuttonbyclickingonthebuttonanddraggingthehighlightedc" id="googlepay-checkoutchamp-step6-1-customizesizeofbuttonbyclickingonthebuttonanddraggingthehighlightedc"></a>

#### Step 6-2: Alternatively Google Pay can be launched from the standard page checkout button with use of a payment radio.  Drag a form radio button to the page.  Set Name=payment\_method, Value=GOOGLEPAY.  If the radio is selected on the live checkout page then Google Pay will launch when the page checkout button (or link) is pressed. <a href="#googlepay-checkoutchamp-step6-1-customizesizeofbuttonbyclickingonthebuttonanddraggingthehighlightedc" id="googlepay-checkoutchamp-step6-1-customizesizeofbuttonbyclickingonthebuttonanddraggingthehighlightedc"></a>

***

### Step 7: Save the page and exit the page builder. <a href="#googlepay-checkoutchamp-step7-savethepageandexitthepagebuilder" id="googlepay-checkoutchamp-step7-savethepageandexitthepagebuilder"></a>

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FQDCW0mw6wJatNEIrHH6m%2Fimage.png?alt=media&#x26;token=d493a3be-8860-44de-9987-9cf9eec212fa" alt="" width="317"><figcaption></figcaption></figure>

***

### Step 8: On the arrow leaving the checkout page, choose the Google Pay button for navigation. <a href="#googlepay-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosethegooglepaybuttonfornavigation" id="googlepay-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosethegooglepaybuttonfornavigation"></a>

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FOB1Q6C92uaCHlS99pOpb%2Fimage.png?alt=media&#x26;token=6c69ccbd-d3b6-4f3b-ac9d-53f913ca526c" alt="" width="563"><figcaption></figcaption></figure>

***

### Step 9: Upsell pages <a href="#googlepay-checkoutchamp-step9-upsellpages" id="googlepay-checkoutchamp-step9-upsellpages"></a>

{% hint style="info" %}
There are 3 options for upsell pages. Communicate with your gateway about the appropriate workflow.
{% endhint %}

Option 1:

**Your gateway supports a 1-click upsell on Google Pay using a payment token returned from the gateway at checkout**

Place one or more standard buttons on each upsell page. Follow standard instructions for those buttons to submit the upsell. Add class **cc-one-click-btn** to each button. There is no need to have a Google Pay button on each page. The buttons will submit using the original payment token.

Option 2:

**Your gateway does not support Option 1. You prefer to have a generic button on the upsell page instead of a Google button.**

Place one or more standard buttons on each upsell page. Follow standard instructions for those buttons to submit the upsell. The buttons will automatically support Google Pay or non-Google Pay based on the checkout. Google Pay will redirect the consumer to Google to complete the upsell. No additional work is needed.

Option 3:

**Your gateway does not support Option 1. You prefer to have a Google button on the upsell page.**

Place one or more standard buttons AND one or more Google Pay buttons on each upsell page. Choose all the buttons on the arrow(s) leaving the page. When the live page loads the standard buttons are removed if the checkout was with Google Pay. Pressing the Google Pay buttons will redirect the consumer to Google to complete the upsell. When the live page loads the Google Pay buttons are removed if the checkout was not Google Pay. The standard buttons will submit the upsell.

### Step 10: Publish the funnel. You’re done and ready to test! <a href="#googlepay-checkoutchamp-step10-publishthefunnel.youredoneandreadytotest" id="googlepay-checkoutchamp-step10-publishthefunnel.youredoneandreadytotest"></a>

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FEkv2fkCzk5WpVeAnMeui%2Fimage.png?alt=media&#x26;token=7c01c82e-0fa9-46df-b19d-015eaced645e" alt="" width="563"><figcaption></figcaption></figure>

***

### Test Mode <a href="#googlepay-checkoutchamp-testmodetestmode" id="googlepay-checkoutchamp-testmodetestmode"></a>

{% hint style="warning" %}
**This section is used for Google to approve your implementation. You must uncheck the Test Mode box and enter your live Merchant ID and Merchant Name once approved.**
{% endhint %}

{% hint style="info" %}
***In Test Mode a transaction will not go to the gateway for approval. The transaction will automatically approve.***
{% endhint %}

Full testing details can be found [here](https://developers.google.com/pay/api/android/guides/resources/test-card-suite)

You may need to enable test cards on your Google Pay account. See [here](https://groups.google.com/g/googlepay-test-mode-stub-data).

Follow these steps to test Google Pay on CheckoutChamp:

1. Set **Gateway, Gateway Value,** and **Gateway Merchant ID** using instructions in Step 4
2. Set **Merchant ID** to “12345678901234567890” (without the double quotes)
3. Set **Merchant Name** to “Merchant Name” (without the double quotes)
4. Select the **Test Mode** box

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FgGRCpj16SnOGmMjBaU09%2Fimage.png?alt=media&#x26;token=0f96ad93-815d-4502-bf13-d3b17dcc6f2a" alt="" width="563"><figcaption></figcaption></figure>

Additional Test Mode Notes:<br>

Inside of the Google Pay Business Console you will locate your "Merchant ID"

After you have joined the Google Group providing access to the test cards and test addresses provided by Google, Google Pay requires the Merchant to create an Integration inside of the Google Pay business console, inside of the "Google Pay API" section.

Select "Web Integration".

The integration configuration will request for a few inputs.

\
First it will request "Your Website", this will be your domain registered into Checkout Champ(whichever domain the Checkout Page is tied to).

Second, it will ask "Your Google Pay API integration type"- Select "Gateway"

Last request from Google is to supply screenshots of your buyflow/order flow.

"Item Selection"- will be your Product Selection page\
"Pre-purchase Screen"- will be your Checkout Page (Important: make sure Google Pay button is visible in your screenshot)

"Payment Method Screen"- will be a screenshot of the pop-up of the Google login the consumers will interact with"Google Pay API Payment Screen"- You will need to log into a Google account following selecting the "Google Pay" button on your page, this will show the Test Card Number and Test Address provided by Google, grab this as a screenshot. (Tip: Android won't allow you to take a screenshot of this screen, so take a picture of the screen using another device.)

"Post-Purchase Screen"- this will be a screenshot of a Thank you page, Google requires a Google Pay mark on the thank you page in order to approve integration. Feel free to upload this supplied image if you would like:

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FZfrBB4rTWiGFDr71VLvV%2Fimage.png?alt=media&#x26;token=ecf7b74b-7555-4632-b024-d4e5e8a62ece" alt=""><figcaption></figcaption></figure>

***

### Style <a href="#googlepay-checkoutchamp-testmodetestmode" id="googlepay-checkoutchamp-testmodetestmode"></a>

In the Visualizer settings under **Payments → Google Pay**, the **Button Type** setting updates the Google Pay button text according to the selected option. After selecting a button type, save and publish.

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2F8lLqk15lwfmFarg4s5RC%2Fimage.png?alt=media&#x26;token=82a50a50-26e0-41ba-8be7-de796d776b85" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="175">Button Type</th><th>Dark</th><th>Light</th></tr></thead><tbody><tr><td>book</td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/book-button-dark-pill-shape.png" alt="Dark Google Pay payment buttons"></td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/book-button-white-pill-shape.png" alt="Light Google Pay payment buttons"></td></tr><tr><td>buy</td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/buy-button-dark-pill-shape.png" alt="Dark Google Pay payment buttons"></td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/buy-button-white-pill-shape.png" alt="Light Google Pay payment buttons"></td></tr><tr><td>checkout</td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/checkout-button-dark-pill-shape.png" alt="Dark Google Pay payment buttons"></td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/checkout-button-white-pill-shape.png" alt="Light Google Pay payment buttons"></td></tr><tr><td>donate</td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/donate-button-dark-pill-shape.png" alt="Dark Google Pay payment buttons"></td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/donate-button-white-pill-shape.png" alt="Light Google Pay payment buttons"></td></tr><tr><td>order</td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/order-button-dark-pill-shape.png" alt="Dark Google Pay payment buttons"></td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/order-button-white-pill-shape.png" alt="Light Google Pay payment buttons"></td></tr><tr><td>pay</td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/pay-button-dark-pill-shape.png" alt="Dark Google Pay payment buttons"></td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/pay-button-white-pill-shape.png" alt="Light Google Pay payment buttons"></td></tr><tr><td>plain</td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/plain-button-dark-pill-shape.png" alt="Dark Google Pay payment buttons"></td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/plain-button-white-pill-shape.png" alt="Light Google Pay payment buttons"></td></tr><tr><td>subscribe</td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/subscribe-button-dark-pill-shape.png" alt="Dark Google Pay payment buttons"></td><td><img src="https://developers.google.com/static/pay/api/images/brand-guidelines/subscribe-button-white-pill-shape.png" alt="Light Google Pay payment buttons"></td></tr></tbody></table>

{% hint style="warning" %}
The Google Pay brand name must not be translated. Don't create buttons with your own localized text.
{% endhint %}

{% embed url="<https://developers.google.com/pay/api/web/guides/brand-guidelines#mark>" %}