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.
...
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> |