Из этого руководства вы узнаете, как интегрировать веб-приложение с Google Pay API и настроить поддержку платежных карт.
- Шаг 1. Укажите версию Google Pay API
- Шаг 2. Выберите способ токенизации
- Шаг 3. Задайте поддерживаемые платежные системы
- Шаг 4. Укажите поддерживаемые способы оплаты
- Шаг 5. Загрузите библиотеку JavaScript для Google Pay API
- Шаг 6. Определите готовность к оплате с помощью Google Pay API
- Шаг 7. Добавьте кнопку оплаты через Google Pay
- Шаг 8. Создайте объект PaymentDataRequest
- Шаг 9. Настройте обработчик жестов пользователей
- Шаг 10. Предзагрузите платежные данные до взаимодействия с пользователем (необязательно)
- Шаг 11. Настройте авторизацию платежей (необязательно)
- Шаг 12. Включите динамическое обновление цен (если настроена доставка)
- Шаг 13. Настройте промокоды (если они используются)
Шаг 1. Укажите версию Google Pay API
Укажите версию Google Pay API, используемую на вашем сайте. Основной и дополнительный номера версии указываются в ответе и влияют на то, какой набор полей будет проверяться во всех объектах.
В приведенном ниже фрагменте кода декларируются используемые версии API:
const baseRequest = { apiVersion: 2, apiVersionMinor: 0 };
Шаг 2. Запросите токен для поставщика платежных услуг
Google шифрует информацию о выбранной карте покупателя, чтобы обеспечить безопасную обработку данных поставщиком платежных услуг.
const tokenizationSpecification = { type: 'PAYMENT_GATEWAY', parameters: { 'gateway': 'example', 'gatewayMerchantId': 'exampleGatewayMerchantId' } };
Замените значения example и exampleGatewayMerchantId значениями, подходящими для вашего поставщика платежных услуг. В таблице ниже приведены значения gateway
и gatewayMerchantId
для конкретных поставщиков.
Шлюз | Значения параметров и ссылки на документацию |
---|---|
accept.blue |
"gateway": "acceptblue" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
ACI |
"gateway": "aciworldwide" "gatewayMerchantId": "YOUR_ENTITY_ID" |
ACpay |
"gateway": "acpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Acquired.com |
"gateway": "acquired" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Adyen |
"gateway": "adyen" "gatewayMerchantId": "YOUR_MERCHANT_ACCOUNT_NAME" |
Airba Pay |
"gateway": "airbapay" "gatewayMerchantId": "YOUR_MERCHANT_ACCOUNT_NAME" |
Airvend |
"gateway": "airvend" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Airwallex |
"gateway": "airwallex" "gatewayMerchantId": "YOUR_MERCHANT_ACCOUNT_NAME" |
Akurateco |
"gateway": "akuratecolab" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Альфа-Банк |
"gateway": "alfabank" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Algoritma |
"gateway": "algoritma" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Allinpay |
"gateway": "allinpayintl" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
AllPayments |
"gateway": "allpayments" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
alticepay |
"gateway": "alticepay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Anedot |
"gateway": "anedot" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
ApcoPay |
"gateway": "apcopay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
АППЕКС |
"gateway": "epos" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
AsiaBill |
"gateway": "asiabill" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" Документация для разработчиков отсутствует |
Assist |
"gateway": "assist" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Assist Belarus |
"gateway": "belassist" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Assist Kazakhstan |
"gateway": "assistkz" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Aurus |
"gateway": "auruspay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Axerve |
"gateway": "gestpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Банк 131 |
"gateway": "bank131" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Bank Vostok |
"gateway": "bankvostok" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Barclaycard |
"gateway": "barclayssmartpayadvance" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Barion |
"gateway": "barion" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
BCC.KZ |
"gateway": "bccpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
bePaid |
"gateway": "ecomcharge" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Bereke Bank |
"gateway": "berekepay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Платежные системы |
"gateway": "billingsystems" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Bizzon |
"gateway": "bizzon" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Blocks |
"gateway": "blocks" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Bluefin |
"gateway": "bluefin" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Blue Media |
"gateway": "bluemedia" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
BlueSnap |
"gateway": "bluesnap" "gatewayMerchantId": "YOUR_shopToken" |
BPC |
"gateway": "bpcpay" "gatewayMerchantId": "YOUR_shopToken" |
BR-DGE |
"gateway": "comcarde" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Braintree |
"gateway": "braintree" "braintree:apiVersion": "v1" "braintree:sdkVersion": "braintree.client.VERSION" "braintree:merchantId": "YOUR_BRAINTREE_MERCHANT_ID" "braintree:clientKey": "YOUR_BRAINTREE_TOKENIZATION_KEY" |
Braspag |
"gateway": "cielo" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
BridgerPay |
"gateway": "bridgerpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Buya |
"gateway": "buya" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
CardCom |
"gateway": "cardcom" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
CardConnect |
"gateway": "cardconnect" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Cardknox |
"gateway": "cardknox" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Cardstream |
"gateway": "crst" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Cashflows |
"gateway": "cashflowsgateway" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Cathay United Bank |
"gateway": "cathaybk" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Cecabank |
"gateway": "cecabank" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Celerispay |
"gateway": "celerispay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
CentralPay |
"gateway": "centralpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Chargehive |
"gateway": "chargehive" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
CharityEngine |
"gateway": "charityengine" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Merchant Services (Chase) |
"gateway": "chase" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Checkout.com |
"gateway": "checkoutltd" "gatewayMerchantId": "YOUR_PUBLIC_KEY" |
CityPay |
"gateway": "citypay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Cloud9 Payment Gateway (C9PG) |
"gateway": "c9pg" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
CloudPayments |
"gateway": "cloudpayments" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Computop |
"gateway": "computop" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
ConcordPay |
"gateway": "concordpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Connectum |
"gateway": "connectum" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
ConnexPay |
"gateway": "connexpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Corefy |
"gateway": "paycoreio" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Corvus Pay |
"gateway": "corvuspay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Credorax |
"gateway": "credorax" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
CrossPay |
"gateway": "crosspay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
CSG Forte |
"gateway": "csgforte" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
CTBC Bank |
"gateway": "ctbcbank" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
CURO Payments |
"gateway": "curopayments" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
CyberSource |
"gateway": "cybersource" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
danube.pay |
"gateway": "danubepay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Datacap Systems, Inc. |
"gateway": "datacap systems inc." "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Datatrans |
"gateway": "datatrans" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
DECTA |
"gateway": "decta" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" Документация для разработчиков отсутствует |
Deutsche Bank AG |
"gateway": "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" окументация для разработчиков отсутствует |
Deutsche Bank – Merchant Solutions |
"gateway": "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
DG Financial Technology, Inc. |
"gateway": "veritrans" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Digital Finance |
"gateway": "digitalfinance" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
dLocal |
"gateway": "dlocal" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
DNA Payments |
"gateway": "dnapayments" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Dojo |
"gateway": "dojo" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Dotpay |
"gateway": "dotpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
e-SiTef – Software Express |
"gateway": "softwareexpress" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
easycard |
"gateway": "easycard" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
EasyPay |
"gateway": "easypay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
EBANX |
"gateway": "ebanx" "gatewayMerchantId": "YOUR_PUBLIC_INTEGRATION_KEY" |
eCard |
"gateway": "ecard" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
ECOMMPAY |
"gateway": "ecommpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Ecopaynet |
"gateway": "ecopaynet" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
ECPay |
"gateway": "ecpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" Документация для разработчиков отсутствует |
eGHL |
"gateway": "eghl" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Elavon (Converge) |
"gateway": "convergepay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Emerchantpay |
"gateway": "emerchantpay" "gatewayMerchantID": "YOUR_GATEWAY_MERCHANT_ID" |
emspay |
"gateway": "emsonline" "gatewayMerchantID": "YOUR_GATEWAY_MERCHANT_ID" |
Encoded |
"gateway": "encoded" "gatewayMerchantID": "YOUR_GATEWAY_MERCHANT_ID" |
EpicPay |
"gateway": "epicpay" "gatewayMerchantID": "YOUR_GATEWAY_MERCHANT_ID" |
Espago |
"gateway": "espago" "gatewayMerchantID": "YOUR_GATEWAY_MERCHANT_ID" |
EveryPay |
"gateway": "everypay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
EVONET |
"gateway": "cardinfolink" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
EvoPay |
"gateway": "evopay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Evo Payment Gateway |
"gateway": "evopaymentgateway" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" Документация для разработчиков отсутствует |
exactly.com |
"gateway": "exactly" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Exact Payments |
"gateway": "exactpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Fat Zebra |
"gateway": "fatzebra" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Fenige |
"gateway": "fenige" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Fibonatix |
"gateway": "fibonatixparagon" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Financial Line |
"gateway": "finline" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Finanso UA |
"gateway": "finansoua" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
FINEXUS |
"gateway": "finexus" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Finix |
"gateway": "finix" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
First American by Deluxe |
"gateway": "firstpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
First Data (Payeezy) |
"gateway": "firstdata" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
FIS Biller Solutions |
"gateway": "fisglobalbsp" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Fluid Pay |
"gateway": "fluidpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
FM Finance LTD |
"gateway": "fmfinanceltd" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
ForteBank |
"gateway": "fortebank" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Банк "Фридом Финанс" |
"gateway": "axayscom" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
FreedomPay |
"gateway": "freedompay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
FreedomPay.Money |
"gateway": "payboxmoney" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Freepay |
"gateway": "freepay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Frontstream |
"gateway": "frontstreampayments" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Fung Payments |
"gateway": "fungpayments" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
GBPayments |
"gateway": "gbpayments" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
GETTRX |
"gateway": "globalelectronictechnology" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Global One Pay |
"gateway": "globalonepay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" Документация для разработчиков отсутствует |
Global Payments |
"gateway": "globalpayments" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
GMO Payment Gateway |
"gateway": "gmopg" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Good Idea Technologies |
"gateway": "git" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
GoPay |
"gateway": "gopay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
GP Webpay |
"gateway": "gpwebpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" Документация для разработчиков отсутствует |
Gr4vy |
"gateway": "gr4vy" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Gravity Payments |
"gateway": "gravitypayments" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Halyk Bank |
"gateway": "halykbank" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Helcim |
"gateway": "helcim" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
HIPS |
"gateway": "hips" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
HiTrust |
"gateway": "hitrustpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Hyp |
"gateway": "hyp" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
icard |
"gateway": "icardwallet" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
iKhokha |
"gateway": "ikhokha" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
imoje |
"gateway": "imoje" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Impaya |
"gateway": "impayarus" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
ИнПлат |
"gateway": "inplat" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
InstaMed |
"gateway": "instamed" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
IntellectMoney |
"gateway": "intellectmoney" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Interactive Transaction Solutions |
"gateway": "interactivets" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Interswitch Payment Gateway |
"gateway": "interswitch" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Intervale |
"gateway": "intervale" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
ioka fintech |
"gateway": "ioka" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
iPay88 |
"gateway": "ipay88" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
iQmetrix |
"gateway": "iqmetrixpaymentservicesgateway" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
IXOPAY |
"gateway": "ixopay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
JetPay |
"gateway": "jetpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
JudoPay |
"gateway": "judopay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" Документация для разработчиков отсутствует |
Kassa |
"gateway": "kassacom" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
kassa24pay |
"gateway": "kassa24pay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Kineox |
"gateway": "kineox" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Klix by Citadele |
"gateway": "klix" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
LHV Pank |
"gateway": "lhvpank" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Life Pay |
"gateway": "lifepay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Limepay |
"gateway": "limepay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
LiqPay |
"gateway": "liqpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Littlepay |
"gateway": "littlepay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
LogPay |
"gateway": "logpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Loyale |
"gateway": "loyale" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
lynck |
"gateway": "lynck" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Lyra |
"gateway": "lyra" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Magnetiq Bank |
"gateway": "magnetiq" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
maib |
"gateway": "maibecomm" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Mandarin |
"gateway": "mandarin" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Market Pay |
"gateway": "marketpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Mastercard Payment Gateway Services |
"gateway": "mpgs" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
MerchantE |
"gateway": "merchante" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Merchant Warrior |
"gateway": "merchantwarrior" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Minsait Payments Systems |
"gateway": "minsaitpaymentsgateway" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
MITEC |
"gateway": "mitecmx" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
MIXPLAT |
"gateway": "mixplat" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
МОБИ.Деньги |
"gateway": "mobimoney" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
МодульБанк |
"gateway": "modulbank" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Molpay |
"gateway": "molpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" Документация для разработчиков отсутствует |
Mondido |
"gateway": "mondido" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Monei |
"gateway": "monei" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Moneris |
"gateway": "moneris" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Moneta |
"gateway": "moneta" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" Документация для разработчиков отсутствует |
Monext |
"gateway": "monext" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Деньги@Mail.Ru |
"gateway": "moneymailru" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
MPay |
"gateway": "managepay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Мультикарта |
"gateway": "mulitcarta" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
MultiSafepay |
"gateway": "multisafepay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Mundipagg |
"gateway": "mundipagg" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
MyCheck |
"gateway": "mycheck" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
MyChoice2Pay |
"gateway": "mychoice2pay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
MyFatoorah |
"gateway": "myfatoorah" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
MyPay |
"gateway": "mypay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" Документация для разработчиков отсутствует |
myPOS |
"gateway": "mypos" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
N&TS Group |
"gateway": "netsgroup" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
NCCC |
"gateway": "nccc" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Neon Pay |
"gateway": "neonpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Netopia |
"gateway": "netopia" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Netvalve |
"gateway": "netvalve" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
NewebPay (ранее STPath, Pay2Go) |
"gateway": "newebpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Newtech |
"gateway": "newtechmobile" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Nexi |
"gateway": "nexi" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
NMI |
"gateway": "gatewayservices" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
noon payments |
"gateway": "noonpayments" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Noqoody Pay |
"gateway": "noqoodypay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Novalnet |
"gateway": "novalnet" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
NTT DATA |
"gateway": "nttdatahk" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Nuvei |
"gateway": "nuvei" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Oceanpayment |
"gateway": "oceanpayment" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Omise |
"gateway": "omise" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
One Inc |
"gateway": "oneinc" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Онэлия |
"gateway": "onelya" "gatewayMerchantId": "YOUR_GATWAY_MERCHANT_ID" |
Onerway |
"gateway": "ronghan" "gatewayMerchantId": "YOUR_GATWAY_MERCHANT_ID" |
OneVision Limited |
"gateway": "onevision" "gatewayMerchantId": "YOUR_GATWAY_MERCHANT_ID" |
OnPay |
"gateway": "onpayio" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Opayo by Elavon |
"gateway": "opayoelavon" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Oschadbank |
"gateway": "oschadbank" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
pagarme |
"gateway": "pagarme" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
PagBank |
"gateway": "pagbank" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
PagBrasil |
"gateway": "pagbrasil" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
PagSeguro |
"gateway": "pagsegurointernational" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
PAY2M |
"gateway": "pay2m" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Payarc |
"gateway": "payarc" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Pay.com |
"gateway": "paycom" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
PAYCOMET |
"gateway": "paycomet" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Paydock |
"gateway": "paydock" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
PayEase |
"gateway": "payeasenet" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
PayFabric |
"gateway": "payfabric" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
PayFacto |
"gateway": "payfacto" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
paygent |
"gateway": "paygent" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Payhub |
"gateway": "payhub" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
PayLane |
"gateway": "paylane" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Payler |
"gateway": "payler" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
PayLink® |
"gateway": "paylink" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Payload |
"gateway": "payload" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Paymark |
"gateway": "paymark" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
PayMaster |
"gateway": "paymaster" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Payment Fusion |
"gateway": "paymentfusion" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Paymentvision |
"gateway": "paymentvision" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Paymentwall |
"gateway": "paymentwall" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Paymo |
"gateway": "paymo" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Paymob |
"gateway": "gpaymob" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Paymtech |
"gateway": "paymtech" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
PayNearMe |
"gateway": "paynearme" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Payneteasy |
"gateway": "payneteasy" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Pay.nl |
"gateway": "paynl" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Paynopain |
"gateway": "paynopain" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
PayOne |
"gateway": "payone" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
PayOnline |
"gateway": "payonline" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Payoo |
"gateway": "payoo" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
PayPlus |
"gateway": "payplus" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Payrails |
"gateway": "payrails" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Payrexx |
"gateway": "payrexx" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
PayRiff |
"gateway": "payriff" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Payrix |
"gateway": "payrix" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Paysafe |
"gateway": "paysafe" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Payscout |
"gateway": "payscout" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Paysend Business |
"gateway": "paysend" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Paysoft |
"gateway": "paysoft" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Pay360 |
"gateway": "pay360" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
PayTech Ukraine |
"gateway": "paytech" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Paythru |
"gateway": "paythru" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Payture |
"gateway": "payture" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
PayU |
"gateway": "payu" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
PayU LATAM |
"gateway": "payulatam" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
PAYUNi |
"gateway": "payuni" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
PayU Romania |
"gateway": "payuro" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
PayU Russia |
"gateway": "payuru" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
PayWay |
"gateway": "payway" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Paywiser |
"gateway": "paywiser" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Pelecard |
"gateway": "pelecard" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Pikassa |
"gateway": "pikassa" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
PingPong |
"gateway": "pingpongx" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Pin Payments |
"gateway": "pinpayments" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Planet |
"gateway": "cccpayment" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
PlanetPay |
"gateway": "itcardpaymentservice" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Plategka.com |
"gateway": "plategkacom" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Платон |
"gateway": "platon" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Pomelo |
"gateway": "pomelopay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Portmone |
"gateway": "portmonecom" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Primer |
"gateway": "primer" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Procard |
"gateway": "procard" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
ProcessOut |
"gateway": "processout" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Przelewy24 |
"gateway": "przelewy24" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Промсвязьбанк |
"gateway": "psbank" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
ПСКБ |
"gateway": "pscbru" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
PXP Financial |
"gateway": "pxpfinancial" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Qenta Payment CEE |
"gateway": "qenta" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
QIWI |
"gateway": "qiwi" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Qualpay |
"gateway": "qualpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
QuickPay |
"gateway": "quickpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Qvalent |
"gateway": "qvalent" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Radial |
"gateway": "radial" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Rapyd |
"gateway": "rapyd" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
RBK.money |
"gateway": "rbkmoney" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Rebail Capital |
"gateway": "rebailcapital" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Rebilly |
"gateway": "Rebilly" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Recurly |
"gateway": "recurly" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Reddot |
"gateway": "reddotpayment" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Rede |
"gateway": "rede" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Redsys |
"gateway": "redsys" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Reepay |
"gateway": "reepay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
RocketGate |
"gateway": "rocketgate" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Банк Русский Стандарт |
"gateway": "rsb" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Ryft |
"gateway": "ryft" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Saferpay |
"gateway": "worldlinesaferpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Safexpay |
"gateway": "safexpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Сбербанк |
"gateway": "sberbank" "gatewayMerchantId": "YOUR_ORGANIZATION_NAME" |
SEB Baltic |
"gateway": "sebbaltic" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Sense Bank |
"gateway": "sensebank" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
SensePass |
"gateway": "sensepass" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Shift4 |
"gateway": "shift4payments" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Shiji Group |
"gateway": "shijipaymentsolutions" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
SH Start High |
"gateway": "shstartpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
simbasoft |
"gateway": "simbasoft" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Sipay |
"gateway": "sipay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
SoftBank Payment Service |
"gateway": "sbps" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Solid |
"gateway": "solid" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Sony Payment Services |
"gateway": "sonypaymentservices" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Splitit |
"gateway": "splitit" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Spreedly |
"gateway": "spreedly" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Square |
"gateway": "square" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Stancer |
"gateway": "stancer" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Stripe |
"gateway": "stripe" "stripe:version": "2018-10-31" "stripe:publishableKey": "YOUR_PUBLIC_STRIPE_KEY" |
Suntech |
"gateway": "esafe" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Svea Bank |
"gateway": "svea" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Swedbank Baltic |
"gateway": "swedbankbaltic" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Swedbank Pay |
"gateway": "payexswedbankpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
TabaPay |
"gateway": "tabapay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
TapPay (Cherri Tech) |
"gateway": "tappay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
TapPayments |
"gateway": "tappayments" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
tarlanpayments |
"gateway": "tarlanpayments" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
TAS Link |
"gateway": "taslink" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Tatra banka (CardPay) |
"gateway": "tatrabanka" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" Документация для разработчиков отсутствует |
TEKO |
"gateway": "teko" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
theMAP |
"gateway": "themap" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Till Payments |
"gateway": "tillpayments" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Тинькофф |
"gateway": "tinkoff" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
TPay |
"gateway": "tpaycom" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
TPay.com |
"gateway": "tpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Transact Campus |
"gateway": "transactcampus" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Transaction Services Network |
"gateway": "tns" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Transpayrent |
"gateway": "transpayrent" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Tranzila |
"gateway": "tranzila" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Tranzzo |
"gateway": "tranzzo" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Tribe Payments |
"gateway": "tribepayments" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Truevo |
"gateway": "truevo" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
TrustPay |
"gateway": "trustpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Trust Payments |
"gateway": "trustpayments" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Tuna |
"gateway": "tuna" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
2can&ibox |
"gateway": "twocan" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
UAPAY |
"gateway": "uapay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
УБРиР |
"gateway": "ubrrpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Ukrcard |
"gateway": "ukrcardpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
UkrGasBank Pay |
"gateway": "ukrgasbankpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Unibank OJSC |
"gateway": "unibankcheckout" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
unitedfinancialcorporation |
"gateway": "unitedfinancialcorporation" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Uniteller |
"gateway": "uniteller" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Unitpay |
"gateway": "unitpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Unlimint |
"gateway": "unlimint" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Unzer |
"gateway": "unzer" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Unzer Austria |
"gateway": "unzeraustria" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
UPC |
"gateway": "upc" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Upgate |
"gateway": "upgate" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
USAePay |
"gateway": "usaepay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
UseePay |
"gateway": "useepay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Valitor |
"gateway": "valitor" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Vantiv |
"gateway": "vantiv" "vantiv:merchantPayPageId": "YOUR_PAY_PAGE_ID" "vantiv:merchantOrderId": "YOUR_ORDER_ID" "vantiv:merchantTransactionId": "YOUR_TRANSACTION_ID" "vantiv:merchantReportGroup": "*web" |
Verestro |
"gateway": "verestro" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Very Good Security |
"gateway": "verygoodsecurity" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Vindicia |
"gateway": "vindicia" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Viva Wallet |
"gateway": "vivawallet" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
VTEX |
"gateway": "vtex" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Walletdoc |
"gateway": "walletdoc" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Walletto |
"gateway": "walletto" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
WayForPay |
"gateway": "wayforpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
WEAT |
"gateway": "weatpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
WhenThen |
"gateway": "whenthen" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Windcave |
"gateway": "windcave" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Wirebank |
"gateway": "wirebank" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Wirecard |
"gateway": "wirecard" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
WOOPPAY |
"gateway": "wooppay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
WooshPay |
"gateway": "swooshtransfer" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Worldline (GlobalCollect) |
"gateway": "globalcollect" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Worldline – Ingenico (онлайн-оплата Worldline) |
"gateway": "worldlineingenicoogone" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Worldline Nordics (Worldline Online Checkout) |
"gateway": "worldlineonlinecheckout" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Worldline Sips |
"gateway": "wlsips" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Worldnet |
"gateway": "worldnet" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Worldpay |
"gateway": "worldpay" "gatewayMerchantId": "YOUR_WORLDPAY_MERCHANT_ID" |
Wpay |
"gateway": "wpayaus" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
WSPay |
"gateway": "wspay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
XPATE |
"gateway": "xpate" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
xpay |
"gateway": "xpaycomua" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
YIĞIM Payment System |
"gateway": "yigim" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" Документация для разработчиков отсутствует |
ЮKassa |
"gateway": "yoomoney" "gatewayMerchantId": "YOUR_SHOP_ID" |
Z-credit |
"gateway": "zcredit" "gatewayMerchantId": "YOUR_SHOP_ID" |
ZEN.com |
"gateway": "zen" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Zest |
"gateway": "zestpayment" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Zuora |
"gateway": "zuora" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Тип токенизации PAYMENT_GATEWAY
– наиболее распространенный способ внедрения Google Pay API для оплаты картой. Если ваш поставщик платежных услуг не поддерживается, попробуйте выполнить прямую интеграцию. Более подробную информацию можно найти в документации по прямой токенизации.
Шаг 3. Задайте поддерживаемые платежные системы
Выберите поддерживаемые вашим сайтом платежные системы. Пример кода:
const allowedCardNetworks = ["AMEX", "DISCOVER", "INTERAC", "JCB", "MASTERCARD", "VISA"];
Google Pay API может показать результаты поиска карт в аккаунте Google (PAN_ONLY
) и/или токенов на устройстве Android, которое прошло аутентификацию с помощью криптограммы 3-D Secure (CRYPTOGRAM_3DS
). Пример кода:
const allowedCardAuthMethods = ["PAN_ONLY", "CRYPTOGRAM_3DS"];
Дополнительную информацию можно найти в разделе CardParameters
в документации по объектам. Список поддерживаемых платежных систем и токенов для устройств Android можно получить через шлюз или с помощью обработчика платежей.
Шаг 4. Укажите поддерживаемые способы оплаты
Выполните следующие действия:
- Чтобы задать для приложения поддерживаемый способ оплаты
CARD
, укажите поддерживаемые методы аутентификации и платежные системы. Пример кода:const baseCardPaymentMethod = { type: 'CARD', parameters: { allowedAuthMethods: allowedCardAuthMethods, allowedCardNetworks: allowedCardNetworks } };
- Расширьте объект базового способа оплаты картой, чтобы указать, какая информация должна возвращаться в приложение. Укажите токенизированные платежные данные. Пример кода:
const cardPaymentMethod = Object.assign( {tokenizationSpecification: tokenizationSpecification}, baseCardPaymentMethod );
Подробную информацию о поддерживаемых параметрах parameters
можно найти в описании CardParameters
.
В Google Pay также поддерживаются способы оплаты CARD
и PAYPAL
. Подробнее о том, как добавить тип PAYPAL
в качестве способа оплаты в Google Pay, написано в документации для разработчиков PayPal.
Шаг 5. Загрузите библиотеку JavaScript для Google Pay API
Выполните следующие действия:
- Добавьте на свой сайт код JavaScript, размещенный на серверах Google. Пример кода:
<script async src="https://pay.google.com/gp/p/js/pay.js" onload="console.log('TODO: add onload function')"> </script>
- После загрузки библиотеки JavaScript для Google Pay API инициализируйте объект
PaymentsClient
. На начальных этапах разработки будет использоваться средаTEST
, имитирующая структуру реакции на платеж и использующая пробные способы оплаты, с помощью которых будет невозможно совершить реальную транзакцию. Пример кода:const paymentsClient = new google.payments.api.PaymentsClient({environment: 'TEST'});
Подробная информация о требованиях для среды
PRODUCTION
, использующей действительные способы оплаты, приведена в разделе Контрольный список интеграции.
Шаг 6. Определите готовность к оплате с помощью Google Pay API
Выполните следующие действия:
- Добавьте разрешенные способы оплаты в базовый объект запроса. Пример кода:
const isReadyToPayRequest = Object.assign({}, baseRequest); isReadyToPayRequest.allowedPaymentMethods = [baseCardPaymentMethod];
- Используйте параметр
isReadyToPay()
, чтобы узнать, поддерживается ли Google Pay API устройством или браузером для указанных способов оплаты. Пример кода:paymentsClient.isReadyToPay(isReadyToPayRequest) .then(function(response) { if (response.result) { // add a Google Pay payment button } }) .catch(function(err) { // show error in developer console for debugging console.error(err); });
Шаг 7. Добавьте кнопку оплаты через Google Pay
Добавьте кнопку оплаты через Google Pay на свой сайт, чтобы покупатели могли выбрать способ оплаты, поддерживаемый Google Pay API и вашим сайтом. Более подробную информацию о доступных типах кнопок, цветах и требованиях к отображению на экранах можно найти в разделе Правила фирменного оформления Google.
Пример кода для кнопки оплаты:
const button = paymentsClient.createButton({onClick: () => console.log('TODO: click handler'), allowedPaymentMethods: []}); // make sure to provide an allowed payment method document.getElementById('container').appendChild(button);
Шаг 8. Создайте объект PaymentDataRequest
Чтобы создать объект PaymentDataRequest
, выполните следующие действия:
- Создайте объект JavaScript с информацией о поддержке вашим сайтом Google Pay API. Полный список поддерживаемых свойств можно найти в разделе
PaymentDataRequest
. Пример кода:const paymentDataRequest = Object.assign({}, baseRequest);
- Добавьте способы оплаты, поддерживаемые вашим приложением, с указанием конфигураций дополнительных данных, ожидаемых в ответе. Пример кода:
paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod];
- Укажите общую цену и валюту для авторизации платежа покупателем. Пример кода:
paymentDataRequest.transactionInfo = { totalPriceStatus: 'FINAL', totalPrice: '123.45', currencyCode: 'USD', countryCode: 'US' };
- Укажите название продавца, которое будут видеть пользователи, и укажите значение
TEST
merchantId
в средеTEST
. Подробные сведения и инструкции по замене значенияTEST
merchantId
приведены в разделеMerchantInfo
. Пример кода названия продавца для пользователей:paymentDataRequest.merchantInfo = { merchantName: 'Example Merchant' merchantId: '12345678901234567890' };
Шаг 9. Настройте обработчик жестов пользователей
Выполните следующие действия:
- Настройте обработчик жестов для кнопки оплаты. Обработчик жестов мгновенно вызывает
loadPaymentData()
после нажатия кнопки оплаты через Google Pay. - Проверьте ответ Google Pay API, после того как пользователь предоставил вашему сайту доступ к информации о выбранном способе оплаты и контактным данным.
- Извлеките токен из ответа
paymentData
. Если вы выполняете интеграцию шлюза, передайте этот токен шлюзу без изменений.paymentsClient.loadPaymentData(paymentDataRequest).then(function(paymentData){ // if using gateway tokenization, pass this token without modification paymentToken = paymentData.paymentMethodData.tokenizationData.token; }).catch(function(err){ // show error in developer console for debugging console.error(err); });
Шаг 10. Предзагрузите платежные данные до взаимодействия с пользователем (необязательно)
Чтобы сократить время оформления платежа, загрузите на сайт платежные данные из Google Pay API, прежде чем будет вызван метод loadPaymentData()
. Вот пример:
paymentsClient.prefetchPaymentData(paymentDataRequest);
Шаг 11. Настройте авторизацию платежей (необязательно)
Авторизация платежа нужна для запуска процесса оплаты и подтверждения ее статуса. Вот как происходит настройка авторизации платежей:
- В объекте
PaymentOptions
зарегистрируйте обратный вызовonPaymentAuthorized()
. - Вызовите метод
loadPaymentData()
с намерением обратного вызоваPAYMENT_AUTHORIZATION
. - Реализуйте обработчик
onPaymentAuthorized()
.
Регистрация обратного вызова onPaymentAuthorized
Ниже приведен пример того, как регистрируется обратный вызов onPaymentAuthorized
.
{ environment: "TEST", merchantInfo: { merchantName: "Example Merchant", merchantId: "12345678901234567890" }, paymentDataCallbacks: { onPaymentAuthorized: onPaymentAuthorized } }
Загрузка платежных данных с намерениями обратного вызова
В приведенном ниже фрагменте кода показано, как инициализировать страницу оплаты с авторизацией платежа:
const paymentDataRequest = Object.assign({}, baseRequest); paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod]; paymentDataRequest.transactionInfo = getGoogleTransactionInfo(); paymentDataRequest.merchantInfo = { merchantName: 'Example Merchant' merchantId: '12345678901234567890', }; paymentDataRequest.callbackIntents = ["PAYMENT_AUTHORIZATION"];
Обработка обратного вызова onPaymentAuthorized
Функция onPaymentAuthorized()
вызывается объектом PaymentData
после того, как пользователь одобрит оплату, например нажмет кнопку Оплатить.
Обратный вызов возвращает значение Promise<PaymentAuthorizationResult>
. Объект PaymentAuthorizationResult
содержит информацию о статусе транзакции: SUCCESS
или ERROR
. Если транзакция выполнена успешно, страница оплаты закрывается. Если же при совершении операции произошла ошибка, на странице оплаты появляются сведения об этой ошибке. В таком случае пользователь может изменить платежные данные и попробовать совершить оплату снова. Пример кода:
function onPaymentAuthorized(paymentData) { return new Promise(function(resolve, reject){ // handle the response processPayment(paymentData) .then(function() { resolve({transactionState: 'SUCCESS'}); }) .catch(function() { resolve({ transactionState: 'ERROR', error: { intent: 'PAYMENT_AUTHORIZATION', message: 'Insufficient funds', reason: 'PAYMENT_DATA_INVALID' } }); }); }); }
Шаг 12. Включите динамическое обновление цен (если настроена доставка)
Функция динамического обновления цен позволяет продавцам автоматически обновлять сведения о способах доставки и транзакциях на основе выбранного адреса доставки. Кроме того, информация о транзакциях может обновляться в зависимости от выбранного варианта доставки.
Вот как происходит настройка динамического обновления цен:
- В объекте
PaymentOptions
зарегистрируйте обработчики обратного вызоваonPaymentAuthorized
иonPaymentDataChanged
. - Вызовите функцию
loadPaymentData()
с намерениями обратного вызова. Подробные сведения можно посмотреть в этом примере. - Реализуйте обработчики
onPaymentAuthorized
иonPaymentDataChanged
.
Регистрация обратного вызова PaymentData
Для динамического обновления цен требуется зарегистрировать функцию обратного вызова в объекте PaymentsClient
paymentOptions
.
{ environment: "TEST", merchantInfo: { merchantName: "Example Merchant", merchantId: "12345678901234567890" }, paymentDataCallbacks: { onPaymentAuthorized: onPaymentAuthorized, onPaymentDataChanged: onPaymentDataChanged } }
Загрузка платежных данных с намерениями обратного вызова
В приведенном ниже фрагменте кода показано, как инициализировать страницу оплаты с обязательным адресом доставки и способами доставки:
const paymentDataRequest = Object.assign({}, baseRequest); paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod]; paymentDataRequest.transactionInfo = getGoogleTransactionInfo(); paymentDataRequest.merchantInfo = { merchantId: '12345678901234567890', merchantName: 'Example Merchant' }; paymentDataRequest.callbackIntents = ["SHIPPING_ADDRESS", "SHIPPING_OPTION", "PAYMENT_AUTHORIZATION"]; paymentDataRequest.shippingAddressRequired = true; paymentDataRequest.shippingAddressParameters = getGoogleShippingAddressParameters(); paymentDataRequest.shippingOptionRequired = true;
Обработка обратного вызова onPaymentDataChanged
Обработчик onPaymentDataChanged
вызывается с параметром IntermediatePaymentData
, который включает выбранный адрес и способ доставки.
Обратный вызов возвращает Promise<PaymentDataRequestUpdate>
. Объект PaymentDataRequestUpdate
содержит обновленную информацию о транзакции, способах доставки и ошибках в платежных данных. Эти данные отражаются на странице оплаты.
Обрабатывайте все исключения, например, когда указан недопустимый адрес или способ доставки, прямо на странице оплаты. Настройте объект PaymentDataError
, чтобы сообщать пользователю о причине ошибки. Включите в сообщение соответствующее намерение. Пример:
function onPaymentDataChanged(intermediatePaymentData) { return new Promise(function(resolve, reject) { let shippingAddress = intermediatePaymentData.shippingAddress; let shippingOptionData = intermediatePaymentData.shippingOptionData; let paymentDataRequestUpdate = {}; if (intermediatePaymentData.callbackTrigger == "INITIALIZE" || intermediatePaymentData.callbackTrigger == "SHIPPING_ADDRESS") { if(shippingAddress.administrativeArea == "NJ") { paymentDataRequestUpdate.error = getGoogleUnserviceableAddressError(); } else { paymentDataRequestUpdate.newShippingOptionParameters = getGoogleDefaultShippingOptions(); let selectedShippingOptionId = paymentDataRequestUpdate.newShippingOptionParameters.defaultSelectedOptionId; paymentDataRequestUpdate.newTransactionInfo = calculateNewTransactionInfo(selectedShippingOptionId); } } else if (intermediatePaymentData.callbackTrigger == "SHIPPING_OPTION") { paymentDataRequestUpdate.newTransactionInfo = calculateNewTransactionInfo(shippingOptionData.id); } resolve(paymentDataRequestUpdate); }); }
Шаг 13. Настройте промокоды (если они используются)
Эта функция позволяет продавцам автоматически обновлять сведения о способах доставки и транзакциях на основе указанного промокода.
Вот как происходит настройка промокодов:
- Зарегистрируйте обратные вызовы
onPaymentDataChanged
вPaymentOptions
. - Вызовите функцию
loadPaymentData()
с намерениями обратного вызова. Подробные сведения можно посмотреть в этом примере. - Реализуйте
onPaymentDataChanged callback function
.
Регистрация обратного вызова Offer
В приведенном ниже фрагменте кода показано, как зарегистрировать функции обратного вызова для промокодов в объекте PaymentsClient
paymentOptions
.
{ environment: "TEST", merchantInfo: { merchantName: "Example Merchant", merchantId: "12345678901234567890" }, paymentDataCallbacks: { onPaymentDataChanged: onPaymentDataChanged } }
Загрузка платежных данных с намерениями обратного вызова
В приведенном ниже фрагменте кода показано, как инициализировать страницу оплаты с намерением обратного вызова OFFER:
const paymentDataRequest = Object.assign({}, baseRequest); paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod]; paymentDataRequest.transactionInfo = getGoogleTransactionInfo(); paymentDataRequest.merchantInfo = { merchantId: '12345678901234567890', merchantName: 'Example Merchant' }; paymentDataRequest.callbackIntents = ["OFFER"];
Обработка обратного вызова onPaymentDataChanged
Обработчик onPaymentDataChanged
вызывается с параметром IntermediatePaymentData
, который включает выбранный адрес и способ доставки.
Функция обратного вызова должна возвращать объект Promise<PaymentDataRequestUpdate>
. Объект PaymentDataRequestUpdate
содержит обновленную информацию о транзакции, способах доставки, специальном предложении и ошибках в платежных данных. Эти данные отражаются на странице оплаты.
Обрабатывайте все исключения, например, когда указан недействительный промокод, прямо на странице оплаты. Настройте объект PaymentDataError
, чтобы сообщать пользователю о причине ошибки. Включите в сообщение соответствующее намерение. Пример кода со ссылкой на объект (validPromoCodes), содержащий значения промокодов:
function onPaymentDataChanged(intermediatePaymentData) { return new Promise(function(resolve, reject) { let redemptionCodes = []; let shippingOptionData = intermediatePaymentData.shippingOptionData; let paymentDataRequestUpdate = {}; paymentDataRequestUpdate.newTransactionInfo = getGoogleTransactionInfo(); // ensure that promo codes set is unique if(typeof intermediatePaymentData.offerData != 'undefined') { // convert to set then back to array redemptionCodes = Array.from( new Set(intermediatePaymentData.offerData.redemptionCodes) ); } // OPTIONAL: ensure that the newest promo code is the only one applied // redemptionCodes = new Array(redemptionCodes[redemptionCodes.length -1]); // validate promo codes and add descriptions to payment sheet if (intermediatePaymentData.callbackTrigger === 'OFFER') { paymentDataRequestUpdate.newOfferInfo = {}; paymentDataRequestUpdate.newOfferInfo.offers = []; for (redemptionCode of redemptionCodes) { if (validPromoCodes[redemptionCode]) { paymentDataRequestUpdate = validPromoCodes[redemptionCode].function( validPromoCodes[redemptionCode], paymentDataRequestUpdate ); } else { paymentDataRequestUpdate.error = getGoogleOfferInvalidError(redemptionCode); } } }
Объедините части кода
Примеры кода, представленные в этом разделе, охватывают все процессы интеграции с использованием библиотеки JavaScript для Google Pay API, включая авторизацию платежей, динамическое обновление цен и промокоды.
Руководство
<div id="container"></div>
<script>/** * Define the version of the Google Pay API referenced when creating your * configuration * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#PaymentDataRequest|apiVersion in PaymentDataRequest} */ const baseRequest = { apiVersion: 2, apiVersionMinor: 0 }; /** * Card networks supported by your site and your gateway * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters} * @todo confirm card networks supported by your site and gateway */ const allowedCardNetworks = ["AMEX", "DISCOVER", "INTERAC", "JCB", "MASTERCARD", "VISA"]; /** * Card authentication methods supported by your site and your gateway * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters} * @todo confirm your processor supports Android device tokens for your * supported card networks */ const allowedCardAuthMethods = ["PAN_ONLY", "CRYPTOGRAM_3DS"]; /** * Identify your gateway and your site's gateway merchant identifier * * The Google Pay API response will return an encrypted payment method capable * of being charged by a supported gateway after payer authorization * * @todo check with your gateway on the parameters to pass * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#gateway|PaymentMethodTokenizationSpecification} */ const tokenizationSpecification = { type: 'PAYMENT_GATEWAY', parameters: { 'gateway': 'example', 'gatewayMerchantId': 'exampleGatewayMerchantId' } }; /** * Describe your site's support for the CARD payment method and its required * fields * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters} */ const baseCardPaymentMethod = { type: 'CARD', parameters: { allowedAuthMethods: allowedCardAuthMethods, allowedCardNetworks: allowedCardNetworks } }; /** * Describe your site's support for the CARD payment method including optional * fields * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters} */ const cardPaymentMethod = Object.assign( {}, baseCardPaymentMethod, { tokenizationSpecification: tokenizationSpecification } ); /** * An initialized google.payments.api.PaymentsClient object or null if not yet set * * @see {@link getGooglePaymentsClient} */ let paymentsClient = null; /** * Configure your site's support for payment methods supported by the Google Pay * API. * * Each member of allowedPaymentMethods should contain only the required fields, * allowing reuse of this base request when determining a viewer's ability * to pay and later requesting a supported payment method * * @returns {object} Google Pay API version, payment methods supported by the site */ 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/request-objects#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: '12345678901234567890', merchantName: 'Example 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/request-objects#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, allowedPaymentMethods: [baseCardPaymentMethod] }); document.getElementById('container').appendChild(button); } /** * Provide Google Pay API with a payment amount, currency, and amount status * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#TransactionInfo|TransactionInfo} * @returns {object} transaction info, suitable for use as transactionInfo property of PaymentDataRequest */ function getGoogleTransactionInfo() { return { countryCode: 'US', currencyCode: 'USD', totalPriceStatus: 'FINAL', // set to cart total totalPrice: '1.00' }; } /** * Prefetch 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: 'USD' }; 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/response-objects#PaymentData|PaymentData object reference} */ function processPayment(paymentData) { // show returned data in developer console for debugging console.log(paymentData); // @todo pass payment token to your gateway to process payment paymentToken = paymentData.paymentMethodData.tokenizationData.token; }
</script><script async src="https://pay.google.com/gp/p/js/pay.js" onload="onGooglePayLoaded()"></script>
Авторизация платежей
<div id="container"></div>
<script>/** * Define the version of the Google Pay API referenced when creating your * configuration * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#PaymentDataRequest|apiVersion in PaymentDataRequest} */ const baseRequest = { apiVersion: 2, apiVersionMinor: 0 }; /** * Card networks supported by your site and your gateway * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters} * @todo confirm card networks supported by your site and gateway */ const allowedCardNetworks = ["AMEX", "DISCOVER", "INTERAC", "JCB", "MASTERCARD", "VISA"]; /** * Card authentication methods supported by your site and your gateway * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters} * @todo confirm your processor supports Android device tokens for your * supported card networks */ const allowedCardAuthMethods = ["PAN_ONLY", "CRYPTOGRAM_3DS"]; /** * Identify your gateway and your site's gateway merchant identifier * * The Google Pay API response will return an encrypted payment method capable * of being charged by a supported gateway after payer authorization * * @todo check with your gateway on the parameters to pass * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#gateway|PaymentMethodTokenizationSpecification} */ const tokenizationSpecification = { type: 'PAYMENT_GATEWAY', parameters: { 'gateway': 'example', 'gatewayMerchantId': 'exampleGatewayMerchantId' } }; /** * Describe your site's support for the CARD payment method and its required * fields * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters} */ const baseCardPaymentMethod = { type: 'CARD', parameters: { allowedAuthMethods: allowedCardAuthMethods, allowedCardNetworks: allowedCardNetworks } }; /** * Describe your site's support for the CARD payment method including optional * fields * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters} */ const cardPaymentMethod = Object.assign( {}, baseCardPaymentMethod, { tokenizationSpecification: tokenizationSpecification } ); /** * An initialized google.payments.api.PaymentsClient object or null if not yet set * * @see {@link getGooglePaymentsClient} */ let paymentsClient = null; /** * Configure your site's support for payment methods supported by the Google Pay * API. * * Each member of allowedPaymentMethods should contain only the required fields, * allowing reuse of this base request when determining a viewer's ability * to pay and later requesting a supported payment method * * @returns {object} Google Pay API version, payment methods supported by the site */ 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/request-objects#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: '12345678901234567890', merchantName: 'Example Merchant' }; paymentDataRequest.callbackIntents = ["PAYMENT_AUTHORIZATION"]; 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', paymentDataCallbacks: { onPaymentAuthorized: onPaymentAuthorized } }); } return paymentsClient; } /** * Handles authorize payments callback intents. * * @param {object} paymentData response from Google Pay API after a payer approves payment through user gesture. * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#PaymentData object reference} * * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#PaymentAuthorizationResult} * @returns Promise<{object}> Promise of PaymentAuthorizationResult object to acknowledge the payment authorization status. */ function onPaymentAuthorized(paymentData) { return new Promise(function(resolve, reject){ // handle the response processPayment(paymentData) .then(function() { resolve({transactionState: 'SUCCESS'}); }) .catch(function() { resolve({ transactionState: 'ERROR', error: { intent: 'PAYMENT_AUTHORIZATION', message: 'Insufficient funds', reason: 'PAYMENT_DATA_INVALID' } }); }); }); } /** * 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(); } }) .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/request-objects#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, allowedPaymentMethods: [baseCardPaymentMethod] }); document.getElementById('container').appendChild(button); } /** * Provide Google Pay API with a payment amount, currency, and amount status * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#TransactionInfo|TransactionInfo} * @returns {object} transaction info, suitable for use as transactionInfo property of PaymentDataRequest */ function getGoogleTransactionInfo() { return { displayItems: [ { label: "Subtotal", type: "SUBTOTAL", price: "11.00", }, { label: "Tax", type: "TAX", price: "1.00", } ], countryCode: 'US', currencyCode: "USD", totalPriceStatus: "FINAL", totalPrice: "12.00", totalPriceLabel: "Total" }; } /** * 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); } /** * 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/response-objects#PaymentData|PaymentData object reference} */ function processPayment(paymentData) { return new Promise(function(resolve, reject) { setTimeout(function() { // @todo pass payment token to your gateway to process payment paymentToken = paymentData.paymentMethodData.tokenizationData.token; resolve({}); }, 3000); }); }
</script><script async src="https://pay.google.com/gp/p/js/pay.js" onload="onGooglePayLoaded()"></script>
Динамическое обновление цен
<div id="container"></div>
<script>/** * Define the version of the Google Pay API referenced when creating your * configuration * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#PaymentDataRequest|apiVersion in PaymentDataRequest} */ const baseRequest = { apiVersion: 2, apiVersionMinor: 0 }; /** * Card networks supported by your site and your gateway * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters} * @todo confirm card networks supported by your site and gateway */ const allowedCardNetworks = ["AMEX", "DISCOVER", "JCB", "MASTERCARD", "VISA"]; /** * Card authentication methods supported by your site and your gateway * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters} * @todo confirm your processor supports Android device tokens for your * supported card networks */ const allowedCardAuthMethods = ["PAN_ONLY", "CRYPTOGRAM_3DS"]; /** * Identify your gateway and your site's gateway merchant identifier * * The Google Pay API response will return an encrypted payment method capable * of being charged by a supported gateway after payer authorization * * @todo check with your gateway on the parameters to pass * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#gateway|PaymentMethodTokenizationSpecification} */ const tokenizationSpecification = { type: 'PAYMENT_GATEWAY', parameters: { 'gateway': 'example', 'gatewayMerchantId': 'exampleGatewayMerchantId' } }; /** * Describe your site's support for the CARD payment method and its required * fields * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters} */ const baseCardPaymentMethod = { type: 'CARD', parameters: { allowedAuthMethods: allowedCardAuthMethods, allowedCardNetworks: allowedCardNetworks } }; /** * Describe your site's support for the CARD payment method including optional * fields * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters} */ const cardPaymentMethod = Object.assign( {}, baseCardPaymentMethod, { tokenizationSpecification: tokenizationSpecification } ); /** * An initialized google.payments.api.PaymentsClient object or null if not yet set * * @see {@link getGooglePaymentsClient} */ let paymentsClient = null; /** * Configure your site's support for payment methods supported by the Google Pay * API. * * Each member of allowedPaymentMethods should contain only the required fields, * allowing reuse of this base request when determining a viewer's ability * to pay and later requesting a supported payment method * * @returns {object} Google Pay API version, payment methods supported by the site */ 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/request-objects#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: '12345678901234567890', merchantName: 'Example Merchant' }; paymentDataRequest.callbackIntents = ["SHIPPING_ADDRESS", "SHIPPING_OPTION", "PAYMENT_AUTHORIZATION"]; paymentDataRequest.shippingAddressRequired = true; paymentDataRequest.shippingAddressParameters = getGoogleShippingAddressParameters(); paymentDataRequest.shippingOptionRequired = true; 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", merchantInfo: { merchantName: "Example Merchant", merchantId: "01234567890123456789" }, paymentDataCallbacks: { onPaymentAuthorized: onPaymentAuthorized, onPaymentDataChanged: onPaymentDataChanged } }); } return paymentsClient; } function onPaymentAuthorized(paymentData) { return new Promise(function(resolve, reject){ // handle the response processPayment(paymentData) .then(function() { resolve({transactionState: 'SUCCESS'}); }) .catch(function() { resolve({ transactionState: 'ERROR', error: { intent: 'PAYMENT_AUTHORIZATION', message: 'Insufficient funds', reason: 'PAYMENT_DATA_INVALID' } }); }); }); } /** * Handles dynamic buy flow shipping address and shipping options callback intents. * * @param {object} itermediatePaymentData response from Google Pay API a shipping address or shipping option is selected in the payment sheet. * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#IntermediatePaymentData|IntermediatePaymentData object reference} * * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#PaymentDataRequestUpdate|PaymentDataRequestUpdate} * @returns Promise<{object}> Promise of PaymentDataRequestUpdate object to update the payment sheet. */ function onPaymentDataChanged(intermediatePaymentData) { return new Promise(function(resolve, reject) { let shippingAddress = intermediatePaymentData.shippingAddress; let shippingOptionData = intermediatePaymentData.shippingOptionData; let paymentDataRequestUpdate = {}; if (intermediatePaymentData.callbackTrigger == "INITIALIZE" || intermediatePaymentData.callbackTrigger == "SHIPPING_ADDRESS") { if(shippingAddress.administrativeArea == "NJ") { paymentDataRequestUpdate.error = getGoogleUnserviceableAddressError(); } else { paymentDataRequestUpdate.newShippingOptionParameters = getGoogleDefaultShippingOptions(); let selectedShippingOptionId = paymentDataRequestUpdate.newShippingOptionParameters.defaultSelectedOptionId; paymentDataRequestUpdate.newTransactionInfo = calculateNewTransactionInfo(selectedShippingOptionId); } } else if (intermediatePaymentData.callbackTrigger == "SHIPPING_OPTION") { paymentDataRequestUpdate.newTransactionInfo = calculateNewTransactionInfo(shippingOptionData.id); } resolve(paymentDataRequestUpdate); }); } /** * Helper function to create a new TransactionInfo object. * @param string shippingOptionId respresenting the selected shipping option in the payment sheet. * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#TransactionInfo|TransactionInfo} * @returns {object} transaction info, suitable for use as transactionInfo property of PaymentDataRequest */ function calculateNewTransactionInfo(shippingOptionId) { let newTransactionInfo = getGoogleTransactionInfo(); let shippingCost = getShippingCosts()[shippingOptionId]; newTransactionInfo.displayItems.push({ type: "LINE_ITEM", label: "Shipping cost", price: shippingCost, status: "FINAL" }); let totalPrice = 0.00; newTransactionInfo.displayItems.forEach(displayItem => totalPrice += parseFloat(displayItem.price)); newTransactionInfo.totalPrice = totalPrice.toString(); return newTransactionInfo; } /** * 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/request-objects#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, allowedPaymentMethods: [baseCardPaymentMethod] }); document.getElementById('container').appendChild(button); } /** * Provide Google Pay API with a payment amount, currency, and amount status * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#TransactionInfo|TransactionInfo} * @returns {object} transaction info, suitable for use as transactionInfo property of PaymentDataRequest */ function getGoogleTransactionInfo() { return { displayItems: [ { label: "Subtotal", type: "SUBTOTAL", price: "11.00", }, { label: "Tax", type: "TAX", price: "1.00", } ], countryCode: 'US', currencyCode: "USD", totalPriceStatus: "FINAL", totalPrice: "12.00", totalPriceLabel: "Total" }; } /** * Provide a key value store for shippping options. */ function getShippingCosts() { return { "shipping-001": "0.00", "shipping-002": "1.99", "shipping-003": "10.00" } } /** * Provide Google Pay API with shipping address parameters when using dynamic buy flow. * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#ShippingAddressParameters|ShippingAddressParameters} * @returns {object} shipping address details, suitable for use as shippingAddressParameters property of PaymentDataRequest */ function getGoogleShippingAddressParameters() { return { allowedCountryCodes: ['US'], phoneNumberRequired: true }; } /** * Provide Google Pay API with shipping options and a default selected shipping option. * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#ShippingOptionParameters|ShippingOptionParameters} * @returns {object} shipping option parameters, suitable for use as shippingOptionParameters property of PaymentDataRequest */ function getGoogleDefaultShippingOptions() { return { defaultSelectedOptionId: "shipping-001", shippingOptions: [ { "id": "shipping-001", "label": "Free: Standard shipping", "description": "Free Shipping delivered in 5 business days." }, { "id": "shipping-002", "label": "$1.99: Standard shipping", "description": "Standard shipping delivered in 3 business days." }, { "id": "shipping-003", "label": "$10: Express shipping", "description": "Express shipping delivered in 1 business day." }, ] }; } /** * Provide Google Pay API with a payment data error. * * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#PaymentDataError|PaymentDataError} * @returns {object} payment data error, suitable for use as error property of PaymentDataRequestUpdate */ function getGoogleUnserviceableAddressError() { return { reason: "SHIPPING_ADDRESS_UNSERVICEABLE", message: "Cannot ship to the selected address", intent: "SHIPPING_ADDRESS" }; } /** * Prefetch 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: 'USD' }; 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); } /** * 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/response-objects#PaymentData|PaymentData object reference} */ function processPayment(paymentData) { return new Promise(function(resolve, reject) { setTimeout(function() { // show returned data in developer console for debugging console.log(paymentData); // @todo pass payment token to your gateway to process payment paymentToken = paymentData.paymentMethodData.tokenizationData.token; resolve({}); }, 3000); }); }
</script><script async src="https://pay.google.com/gp/p/js/pay.js" onload="onGooglePayLoaded()"></script>
Специальные предложения
<div id="container"></div>
<script>/** * Please note: The Promo Code callback is extremely flexible. This example * implementation is only one of many ways to interface with it. * * In production, your promo codes and payment logic should be securely * processed on your server, not client-side as in this example. Use AJAX to * pass this information to the payment sheet. */ /** * Define the version of the Google Pay API referenced when creating your * configuration * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#PaymentDataRequest|apiVersion in PaymentDataRequest} */ const baseRequest = { apiVersion: 2, apiVersionMinor: 0 }; /** * Define valid promo code strings * * This object paradigm is not necessary to implement Promo Codes, but provides * an example of how to implement promo code behavior in a modular way. * * In production, your promo codes should be securely processed on your server, * not client-side as in this example. * * code: the way the promo code itself is displayed in the payment sheet * description: the description provided to the user on the payment sheet * function: the function used to calculate the price change * value: the value passed into the above function. This value should be * negative for a discount. */ const validPromoCodes = { SOMEPROMOCODE: { code: 'SOMEPROMOCODE', description: '20% off all products!', function: percentageDiscount, value: -20 // value should be negative for a discount }, ANOTHERPROMOCODE: { code: 'ANOTHERPROMOCODE', description: '$5 dollars off!', function: staticDiscount, value: -5.00 // value should be negative for a discount } } /** * Card networks supported by your site and your gateway * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters} * @todo confirm card networks supported by your site and gateway */ const allowedCardNetworks = ['AMEX', 'DISCOVER', 'JCB', 'MASTERCARD', 'VISA']; /** * Card authentication methods supported by your site and your gateway * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters} * @todo confirm your processor supports Android device tokens for your * supported card networks */ const allowedCardAuthMethods = ['PAN_ONLY', 'CRYPTOGRAM_3DS']; /** * Identify your gateway and your site's gateway merchant identifier * * The Google Pay API response will return an encrypted payment method capable * of being charged by a supported gateway after payer authorization * * @todo check with your gateway on the parameters to pass * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#gateway|PaymentMethodTokenizationSpecification} */ const tokenizationSpecification = { type: 'PAYMENT_GATEWAY', parameters: { gateway: 'example', gatewayMerchantId: 'exampleGatewayMerchantId' } }; /** * Describe your site's support for the CARD payment method and its required * fields * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters} */ const baseCardPaymentMethod = { type: 'CARD', parameters: { allowedAuthMethods: allowedCardAuthMethods, allowedCardNetworks: allowedCardNetworks } }; /** * Describe your site's support for the CARD payment method including optional * fields * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters} */ const cardPaymentMethod = Object.assign( {}, baseCardPaymentMethod, { tokenizationSpecification: tokenizationSpecification } ); /** * An initialized google.payments.api.PaymentsClient object or null if not yet set * * @see {@link getGooglePaymentsClient} */ let paymentsClient = null; /** * Configure your site's support for payment methods supported by the Google Pay * API. * * Each member of allowedPaymentMethods should contain only the required fields, * allowing reuse of this base request when determining a viewer's ability * to pay and later requesting a supported payment method * * @returns {object} Google Pay API version, payment methods supported by the site */ 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/request-objects#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: '12345678901234567890', merchantName: 'Example Merchant' }; paymentDataRequest.callbackIntents = ['OFFER']; paymentDataRequest.shippingAddressRequired = false; paymentDataRequest.shippingAddressParameters = getGoogleShippingAddressParameters(); 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', merchantInfo: { merchantName: 'Example Merchant', merchantId: '01234567890123456789' }, paymentDataCallbacks: { onPaymentDataChanged: onPaymentDataChanged } }); } return paymentsClient; } /** * These functions handle adding valid promo codes to the payment sheet * as well as adjusting the display items to match. * * To add a new promo code, create a new function per this template * and define it as valid in the onPaymentDataChanged function. * * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#PaymentDataRequestUpdate|PaymentDataRequestUpdate} * @param {string} redemptionCode string representing the promo code to apply * @param {string} description string representing the description to show * @param {int} discountPercentage int representing the percentage to discount. * Please note the discount value should be negative. Ex: -20 = 20% discount. * @param {object} PaymentDataRequestUpdate object representing * the current state of the payment data request. * @returns {object} PaymentDataRequestUpdate object to update the * payment sheet with new transaction info and offer data. */ function percentageDiscount(promoParameters, paymentDataRequestUpdate) { // set variables let originalTransactionInfo = getGoogleTransactionInfo(); /* because this promo code calculates a % of original prices, * we need to get the original transaction info */ let newTransactionInfo = paymentDataRequestUpdate.newTransactionInfo; let discount = 0; // update promo code and description paymentDataRequestUpdate.newOfferInfo.offers.push({ redemptionCode: promoParameters['code'], description: promoParameters['description'] }); // calculate discount (from original transaction items only) originalTransactionInfo.displayItems.forEach(function(displayItem) { discount += parseFloat(displayItem.price) * promoParameters['value'] * 0.01; }); // add displayItem with new discount newTransactionInfo.displayItems.push({ label: promoParameters['code'], price: discount.toFixed(2), type: 'LINE_ITEM' }); return paymentDataRequestUpdate; } function staticDiscount(promoParameters, paymentDataRequestUpdate) { // set variables let newTransactionInfo = paymentDataRequestUpdate.newTransactionInfo; // update promo code and description paymentDataRequestUpdate.newOfferInfo.offers.push({ redemptionCode: promoParameters['code'], description: promoParameters['description'] }); // add displayItem with new discount newTransactionInfo.displayItems.push({ label: promoParameters['code'], price: promoParameters['value'].toFixed(2), type: 'LINE_ITEM' }); return paymentDataRequestUpdate; } /** * Handles offer callback intents. * * @param {object} itermediatePaymentData response from Google Pay API when a promo code is entered in the google pay payment sheet. * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#IntermediatePaymentData|IntermediatePaymentData object reference} * * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#PaymentDataRequestUpdate|PaymentDataRequestUpdate} * @returns Promise<{object}> Promise of PaymentDataRequestUpdate object to update the payment sheet with new transaction info and offer data. */ function onPaymentDataChanged(intermediatePaymentData) { return new Promise(function(resolve, reject) { let redemptionCodes = new Set(); let shippingOptionData = intermediatePaymentData.shippingOptionData; let paymentDataRequestUpdate = {}; paymentDataRequestUpdate.newTransactionInfo = getGoogleTransactionInfo(); // ensure that promo codes set is unique if(typeof intermediatePaymentData.offerData != 'undefined') { redemptionCodes = new Set(intermediatePaymentData.offerData.redemptionCodes); } // validate promo codes and add descriptions to payment sheet if (intermediatePaymentData.callbackTrigger === 'OFFER') { paymentDataRequestUpdate.newOfferInfo = {}; paymentDataRequestUpdate.newOfferInfo.offers = []; for (redemptionCode of redemptionCodes) { if (validPromoCodes[redemptionCode]) { paymentDataRequestUpdate = validPromoCodes[redemptionCode].function( validPromoCodes[redemptionCode], paymentDataRequestUpdate ); } else { paymentDataRequestUpdate.error = getGoogleOfferInvalidError(redemptionCode); } } } /** * Update item costs and total. * * In production, this final calculation should always be calculated * server-side to ensure it matches the price that the merchant sends to the * processor. */ paymentDataRequestUpdate.newTransactionInfo = calculateNewTransactionInfo( paymentDataRequestUpdate.newTransactionInfo ) resolve(paymentDataRequestUpdate); }); } /** * Helper function to update the TransactionInfo object. * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#TransactionInfo|TransactionInfo} * @param {object} transactionInfo respresenting the selected shipping option in the payment sheet. * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#TransactionInfo|TransactionInfo} * @returns {object} transaction info, suitable for use as transactionInfo property of PaymentDataRequest */ function calculateNewTransactionInfo(newTransactionInfo) { // calculate the new totalPrice from display items let totalPrice = 0.00; newTransactionInfo.displayItems.forEach( function(displayItem) { totalPrice += parseFloat(displayItem.price); } ); // Note: newTransactionInfo.totalPrice must be a string newTransactionInfo.totalPrice = totalPrice.toFixed(2); return newTransactionInfo; } /** * 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/request-objects#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, allowedPaymentMethods: [baseCardPaymentMethod] }); document.getElementById('container').appendChild(button); } /** * Provide Google Pay API with a payment amount, currency, and amount status * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#TransactionInfo|TransactionInfo} * @returns {object} transaction info, suitable for use as transactionInfo property of PaymentDataRequest */ function getGoogleTransactionInfo() { return { displayItems: [ { label: 'Subtotal', type: 'SUBTOTAL', price: '11.00', status: 'FINAL' }, { label: 'Tax', type: 'TAX', price: '1.00' } ], currencyCode: 'USD', totalPriceStatus: 'FINAL', totalPrice: '12.00', totalPriceLabel: 'Total' }; } /** * Provide Google Pay API with shipping address parameters. * * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#ShippingAddressParameters|ShippingAddressParameters} * @returns {object} shipping address details, suitable for use as shippingAddressParameters property of PaymentDataRequest */ function getGoogleShippingAddressParameters() { return { allowedCountryCodes: ['US', 'UK', 'FR', 'CA', 'MX', 'GA'], phoneNumberRequired: false }; } /** * Provide Google Pay API with an invalid offer error. * * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#PaymentDataError|PaymentDataError} * @returns {object} payment data error, suitable for use as error property of PaymentDataRequestUpdate */ function getGoogleOfferInvalidError(redemptionCode) { return { reason: 'OFFER_INVALID', message: redemptionCode + ' is not a valid promo code.', intent: 'OFFER' }; } /** * Prefetch 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: 'USD' }; 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 * In a production environment, this function should always be implemented * server-side. * * @param {object} paymentData response from Google Pay API after user approves payment * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#PaymentData|PaymentData object reference} */ function processPayment(paymentData) { // show returned data in developer console for debugging console.log(paymentData); // @todo pass payment token to your gateway to process payment paymentToken = paymentData.paymentMethodData.tokenizationData.token; }
</script><script async src="https://pay.google.com/gp/p/js/pay.js" onload="onGooglePayLoaded()"></script>