Page History
...
Using the Google Pay widget allows customer to pay with regular cards stored to his Google account, as well as tokenized Google Pay cards. On devices without the installed Google Pay application, the customer will be asked to select a stored card from Google.
...
The totalPriceStatus parameter can take the following values:
- NOT_CURRENTLY_KNOWN — is used to check payment options;
- ESTIMATED — order amount can be changed later, depending on the response;
- FINAL — the order amount is final, will not change in the process.
Example of getGoogleTransactionInfo function:
| Code Block | ||
|---|---|---|
| ||
function getGoogleTransactionInfo() {
return {
currencyCode: $('#currency').val(), //order currency
totalPriceStatus: 'FINAL', //order amount status
totalPrice: $('#amount').val() //order amount
};
} |
After the payment is confirmed by the customer, the result will be returned to the processPayment function.
To make a payment, order data should be transferred to the widget (processPayment function).
List of the ProcessPayment function parameters
Parameter | Description |
merchant_id | The merchant identifier in IPS Assist |
amount | Payment amount, in original currency |
currency | Order currency |
ordernumber | Order number in the merchant payments system |
comment | Order comment |
Customer's e-mail | |
firstname | Customer's first name |
lastname | Customer's last name |
middlename | Customer's middle name |
The values may include field names of the completed payment form.
Example of the processPayment funktion:
| Code Block | ||
|---|---|---|
| ||
function processPayment(paymentData) {
var data = {
paymentData : paymentData,
merchant_id : $('#merchantId').val(), //merchant ID
amount : $('#amount').val(), //order amount
currency : $('#currency').val(), //currency
ordernumber : $('#ordernumber').val(), //order number
email : $('#email').val(), //customer’s email
firstname : $('#firstname').val(), //Customer's first name
middlename : $('#middlename').val(),//Customer's middle name
lastname : $('#lastname').val() //Customer's last name
comment : $('#comment').val() //комментарий к заказу
}; |
After payment using Google Pay is completed, the server returns the order number and status in response. To process the response, you must add the appropriate code to this processPayment function:
| Code Block | ||
|---|---|---|
| ||
$.post("/pay/tokenpay_widget_gp.cfm", JSON.stringify(data)).then(function (result) {
//here should be processing the response from the payment service
// this is an response example {"order":{"ordernumber":"2019.03.11-664","orderstate":"Approved"}}
}); |
If for some reason the order payment was unsuccessful, then the service will return error messages (with appropriated values of the firstcode and secondcode parameters).
The script uses the Google Pay API, which is used:
- on all mobile devices, regardless of operating system;
- in browsers Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge, Opera or UCWeb UC Browser.
| Warning |
|---|
Google Pay does not have the ability to store a special test card, so when testing it will display a real card. However, in the test environment of Google this card will be replaced by a test one and test card data will be returned to the script. In this way you can use a stored real card without debiting from it. |
Script example
Below you can see an example of a widget script that can be placed on the payment page of an online store.
| Code Block | ||
|---|---|---|
| ||
<script type="text/javascript">
const baseRequest = {
apiVersion: 2,
apiVersionMinor: 0
};
const allowedCardNetworks = ["MASTERCARD", "VISA"];
const allowedCardAuthMethods = ["PAN_ONLY", "CRYPTOGRAM_3DS"];
const tokenizationSpecification = {
type: 'PAYMENT_GATEWAY',
parameters: {
'gateway': 'assist',
'gatewayMerchantId': '02510116604241796260'
}
}
const baseCardPaymentMethod = {
type: 'CARD',
parameters: {
allowedAuthMethods: allowedCardAuthMethods,
allowedCardNetworks: allowedCardNetworks,
billingAddressRequired: true,
billingAddressParameters: {"format": "MIN"}
}
}
const cardPaymentMethod = Object.assign(
{},
baseCardPaymentMethod,
{
tokenizationSpecification: tokenizationSpecification
}
);
let paymentsClient = null;
function getGoogleIsReadyToPayRequest() {
return Object.assign(
{},
baseRequest,
{
allowedPaymentMethods: [baseCardPaymentMethod]
}
);
}
/**
* Configure support for the Google Pay API
*
* @see {@link https://developers.google.com/pay/api/web/reference/object#PaymentDataRequest|PaymentDataRequest}
* @returns {object} PaymentDataRequest fields
*/
function getGooglePaymentDataRequest() {
const paymentDataRequest = Object.assign({}, baseRequest);
paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod];
paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
paymentDataRequest.merchantInfo = {
// @todo a merchant ID is available for a production environment after approval by Google
// See {@link https://developers.google.com/pay/api/web/guides/test-and-deploy/integration-checklist|Integration checklist}
merchantId: '16590966430175452581',
merchantOrigin: 'www.assist.ru',
merchantName: 'ASSIST Merchant'
};
return paymentDataRequest;
}
/**
* Return an active PaymentsClient or initialize
*
* @see {@link https://developers.google.com/pay/api/web/reference/client#PaymentsClient|PaymentsClient constructor}
* @returns {google.payments.api.PaymentsClient} Google Pay API client
*/
function getGooglePaymentsClient() {
if ( paymentsClient === null ) {
paymentsClient = new google.payments.api.PaymentsClient({environment: 'TEST'});
}
return paymentsClient;
}
/**
* Initialize Google PaymentsClient after Google-hosted JavaScript has loaded
*
* Display a Google Pay payment button after confirmation of the viewer's
* ability to pay.
*/
function onGooglePayLoaded() {
const paymentsClient = getGooglePaymentsClient();
paymentsClient.isReadyToPay(getGoogleIsReadyToPayRequest())
.then(function(response) {
if (response.result) {
addGooglePayButton();
// @todo prefetch payment data to improve performance after confirming site functionality
prefetchGooglePaymentData();
}
})
.catch(function(err) {
// show error in developer console for debugging
console.error(err);
});
}
/**
* Add a Google Pay purchase button alongside an existing checkout button
*
* @see {@link https://developers.google.com/pay/api/web/reference/object#ButtonOptions|Button options}
* @see {@link https://developers.google.com/pay/api/web/guides/brand-guidelines|Google Pay brand guidelines}
*/
function addGooglePayButton() {
const paymentsClient = getGooglePaymentsClient();
const button =
paymentsClient.createButton({onClick: onGooglePaymentButtonClicked, buttonColor:'black', buttonType:'long'});
document.getElementById('container').appendChild(button);
document.getElementById('container').style.display = 'block';
}
/**
* Provide Google Pay API with a payment amount, currency, and amount status
*
* @see {@link https://developers.google.com/pay/api/web/reference/object#TransactionInfo|TransactionInfo}
* @returns {object} transaction info, suitable for use as transactionInfo property of PaymentDataRequest
*/
function getGoogleTransactionInfo() {
return {
currencyCode: $('#currency').val(),
totalPriceStatus: 'FINAL',
// set to cart total
totalPrice: $('#amount').val()
};
}
/**
* g payment data to improve performance
*
* @see {@link https://developers.google.com/pay/api/web/reference/client#prefetchPaymentData|prefetchPaymentData()}
*/
function prefetchGooglePaymentData() {
const paymentDataRequest = getGooglePaymentDataRequest();
// transactionInfo must be set but does not affect cache
paymentDataRequest.transactionInfo = {
totalPriceStatus: 'NOT_CURRENTLY_KNOWN',
currencyCode: $('#currency').val()
};
const paymentsClient = getGooglePaymentsClient();
paymentsClient.prefetchPaymentData(paymentDataRequest);
}
/**
* Show Google Pay payment sheet when Google Pay payment button is clicked
*/
function onGooglePaymentButtonClicked() {
const paymentDataRequest = getGooglePaymentDataRequest();
paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
const paymentsClient = getGooglePaymentsClient();
paymentsClient.loadPaymentData(paymentDataRequest)
.then(function(paymentData) {
// handle the response
processPayment(paymentData);
})
.catch(function(err) {
// show error in developer console for debugging
console.error(err);
});
}
/**
* Process payment data returned by the Google Pay API
*
* @param {object} paymentData response from Google Pay API after user approves payment
* @see {@link https://developers.google.com/pay/api/web/reference/object#PaymentData|PaymentData object reference}
*/
function processPayment(paymentData) {
var data = {
paymentData : paymentData,
merchant_id : $('#merchantId').val(),
amount : $('#amount').val(),
currency : $('#currency').val(),
ordernumber : $('#ordernumber').val(),
email : $('#email').val(),
firstname : $('#firstname').val(),
middlename : $('#middlename').val(),
lastname : $('#lastname').val(),
comment : $('#comment').val()
};
// For debug
console.log(data);
$.post("/pay/tokenpay_widget_gp.cfm", JSON.stringify(data)).then(function (result) {
// For debug
console.log(result);
// Example result:
// {"order":{"ordernumber":"2019.03.11-664","orderstate":"Approved"}}
});
}
</script>
<script async src="https://pay.google.com/gp/p/js/pay.js" onload="onGooglePayLoaded()"></script> |