Page History
...
- Покупатель выбирает товары на сайте интернет-магазина.
- Интернет-магазин передает данные заказа в виджет.
- Покупатель нажимает кнопку оплаты Apple Pay.
- На устройстве с подключенным Apple Pay появляется всплывающее окно с выбором привязанной карты.
- Покупатель выбирает карту и подтверждает оплату на устройстве с помощью пароля, TouchID или FaceID.
- Apple Pay формирует зашифрованный пакет с токеном.
- Виджет получает пакет с токеном от Apple Pay.
- Виджет передает зашифрованный пакет с токеном и данными платежа АПК Ассист.
- АПК Ассист расшифровывает пакет с токеном и данными платежа.
- АПК Ассист проводит оплату токеном через процессинг расчётного банка.
- АПК Ассист возвращает результаты проведения оплаты интернет-магазину.
- Интернет-магазин отображает результат оплаты для покупателя.
Список действий для организации оплат с
...
помощью виджета
Для организации оплат с помощь виджета на странице интернет-магазина необходимо выполнить следующие подготовительные шаги:
...
Использование виджета Google Pay позволяет осуществлять оплату как обычными картами, привязанными к аккаунту Google, так и токенизированными картами Google Pay. При этом на устройствах без установленного приложения Google Pay покупателю будет предложено выбрать сохраненную карту из Google.
...
- Покупатель выбирает товары на сайте интернет-магазина.
- Интернет-магазин передает данные заказа в виджет.
- Покупатель нажимает кнопку оплаты Google Pay.
- Открывается специальный диалог браузера, в котором можно выбрать одну из карт, привязанных ранее.
- Покупатель выбирает карту и подтверждает оплату на устройстве.
- Приложение Google Pay формирует зашифрованный пакет с токеном.
- Виджет получает пакет с токеном от Google Pay.
- Виджет передает зашифрованный пакет с токеном и данными платежа АПК Ассист.
- АПК Ассист расшифровывает пакет с токеном и данными платежа.
- АПК Ассист проводит оплату токеном через процессинг расчётного банка.
- АПК Ассист возвращает результаты проведения оплаты интернет-магазину.
- Интернет-магазин отображает результат оплаты для покупателя.
Список действий для организации оплат с помощь виджета
Для организации оплат с помощь виджета на странице интернет-магазина необходимо выполнить следующие подготовительные шаги:
...
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> |