# Google Pay Hosted Checkout
## Overview
Google Pay Hosted Checkout is our simple integration that enables online Google Pay processing through the Sola gateway. This document details the steps necessary to integrate Google Pay Hosted Checkout with your site.
**Contents**
* Server-Side Integration
* Server Endpoint Creation
* API Integration
* Client-Side Integration
* Adding Reference to iFields
* Adding iFrame and JavaScript objects for the Google Pay button
* Enabling Google Pay
## Implementing Google Pay Hosted Checkout
### Server-Side Integration
#### Server Endpoint Creation
A server endpoint is needed in order to accept the Google Payload from Hosted Checkout.
**Step 1:** Create an endpoint and method for API Integration on your server side that takes the [Google Payload](https://docs.solapayments.com/mobile-wallets/google-pay-hosted-checkout/response-objects) and makes a call to Sola.
#### API Integration
**Below are the steps to integrate Google Pay with the Sola API:**
Once the consumer confirms the payment, Google Pay API generates a token in the form of a JSON string.
Integration Steps:
1. Encode that token with Base64 encoding.
2. Set `xCardNum` field to the encoded token above.
3. Set `xDigitalWalletType` to `GooglePay`.
4. Set the remaining required fields:
1. `xAmount` to `transactionInfo.totalPrice` - this is the consumer-approved amount from the Google Pay payment sheet.
2. `xCommand` - Set to one of the values that start with `cc:` like `cc:sale`, `cc:auth`, etc.
3. `xBillFirstName`
4. `xBillLastName`
5. `xBillStreet` if available
6. `xBillCity` if available
7. `xBillState` if available
8. `xBillZip`
For more details, please contact your Sola Representative.
### Client-Side Integration
#### Adding Reference to iFields
{% hint style="info" %}
Find the latest version of iFields [here](https://cdn.cardknox.com/ifields/versions.htm).
{% endhint %}
**Step 1:** Add the iFields .js file after the \ tag on your payment page:
```javascript
```
#### Adding iFrame and JavaScript Objects for Google Pay button
**Step 1:** Add the following iFrame JS snippet inside the *\* where the Google Pay button is desired.
* Make sure you have an attribute `data-ifields-id="igp"` as part of *\
```
**Step 2:** Create JavaScript object that holds all of the properties/methods required to process Google Pay.
```javascript
window.gpRequest = {
merchantInfo: {
merchantName: "Example Merchant"
},
buttonOptions: {
buttonSizeMode: GPButtonSizeMode.fill
},
billingParams: {
//phoneNumberRequired: true,
emailRequired: true,
billingAddressRequired: true,
billingAddressFormat: GPBillingAddressFormat.full
}}
```
{% hint style="info" %}
Full a full sample code, refer to the iFields [document.](https://docs.solapayments.com/products/ifields)
{% endhint %}
**Step 3:** Implement desired callbacks.
For the list of available callbacks, please refer to [Google Pay Object](https://docs.solapayments.com/mobile-wallets/request-objects#GooglePayRequest).
* The two main functions below need to be implemented (the rest are optional):
* **onGetTransactionInfo:** calculates the total amount based on the charge amount, fees, taxes, shipping costs, etc.
* **onProcessPayment** - a callback that will be called after the consumer pays and Google returns a token with all other requested consumer information like billing address, shipping address, etc. This is where you need to make an ajax call to your server with the Google Payload. The sample for making an ajax call please see below.
*Sample Code for making Ajax Call:*
```javascript
initGP: function authorizeGPay(googlePayload) {
return new Promise(function (resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open("POST", https://yourserver.com/your-endpoint);
xhr.onload = function () {
if (this.status >= 200 && this.status < 300) {
resolve(xhr.response);
} else {
reject({
status: this.status,
statusText: xhr.statusText
});
}
};
xhr.onerror = function () {
reject({
status: this.status,
statusText: xhr.statusText
});
};
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify(googlePayload));
});
}
```
{% hint style="info" %}
For full sample code, please refer to [Google Pay Sample Code](https://docs.solapayments.com/mobile-wallets/google-pay-hosted-checkout/sample-code).
{% endhint %}
**Step 4:** Create JavaScript function that will initialize iFields.
```javascript
function initGP() {
return {
merchantInfo: gpRequest.merchantInfo,
buttonOptions: gpRequest.buttonOptions,
onGetTransactionInfo: "gpRequest.onGetTransactionInfo",
environment: gpRequest.environment,
billingParameters: gpRequest.billingParams,
shippingParameters: {
emailRequired: gpRequest.shippingParams.emailRequired,
onGetShippingCosts: "gpRequest.shippingParams.onGetShippingCosts",
onGetShippingOptions: "gpRequest.shippingParams.onGetShippingOptions"
},
onBeforeProcessPayment: "gpRequest.onBeforeProcessPayment",
onProcessPayment: "gpRequest.onProcessPayment",
onPaymentCanceled: "gpRequest.onPaymentCanceled",
onGPButtonLoaded: "gpButtonLoaded"
};
}
```
Make sure that the iFrame attribute`data-ifields-oninit` has the name of this function.
The initGP() function above returns [Google Pay Object.](https://docs.solapayments.com/mobile-wallets/request-objects#GooglePayRequest)
#### Enable Google Pay
**window\.ckGooglePay** **object** - controls initialization of Google Pay button.
| **Method** | **Call Required** | **Description** |
| ----------------- | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| `enableGooglePay` | Yes | Initializes and enables Google Pay Button.
Takes EnableGooglePayParams object
|
| `updateAmount` | Conditional | Updates amount on Google Sheet. |
You can provide either All, One or None of the parameters for `enableGooglePay` call.
* `amountField` specified - in this case, the Google Pay total amount will be automatically updated whenever the amount has changed.
* `amountField` *is not* specified - in this case, it’s up to you to provide the correct amount for Google Pay. One of the ways to do it is to call `window.ckGooglePay.updateAmount` manually.
* `iframeField` specified - this value will be used to communicate, with Google Pay button.\
This option is especially helpful for Angular clients using shadow DOM.
* `iframeField` *is not* specified - its value will be calculated based on `data-ifields-id` attribute.\
In this case, it must be set to “igp“: `data-ifields-id="igp"`.
#### **EnableGooglePayParams Object**
| **Name** | **Type** | **Required** | **Description** |
| ------------- | -------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------- |
| `amountField` | String\|Object | No | Field containing amount.
Could be either the name of the field (String) or the
field itself (Object)
|
| `iframeField` | String\|Object | No | Field containing iFrame with Google Pay button.
Could be either the name of the field (String) or the
field itself (Object)
|
#### **Enable Google Pay example**
`ckGooglePay.enableGooglePay({amountField: 'amount'});`
## Questions?
Check out the Google Pay FAQ page [here](https://docs.solapayments.com/mobile-wallets/google-pay-hosted-checkout/google-pay-faq).
For additional questions, contact