이 가이드의 단계에 따라 웹 애플리케이션을 Google Pay API와 통합하고 결제 카드를 사용할 수 있도록 구성합니다.
- 1단계: Google Pay API 버전 정의
- 2단계: 결제 토큰화 방법 선택
- 3단계: 결제 카드 네트워크 정의
- 4단계: 사용할 수 있는 결제 수단 설명
- 5단계: 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" |
Alfa-Bank |
"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" |
APPEX |
"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" |
Bank 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" |
Billing Systems |
"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_GATEWAY_MERCHANT_ID" |
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" |
Chase Merchant Services |
"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" |
Freedom Finance Bank |
"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" |
InPlat |
"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" |
MOBI.Money |
"gateway": "mobimoney" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Modulbank |
"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" |
Money.Mail.Ru |
"gateway": "moneymailru" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
MPay |
"gateway": "managepay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Multicarta |
"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" |
Onelya |
"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" |
Platon |
"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" |
PSB Bank |
"gateway": "psbank" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
PSCB |
"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" |
Russian Standard Bank |
"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" |
Sberbank |
"gateway": "sberbank" "gatewayMerchantId": "YOUR_ORGANIZATION_NAME" |
SEB Baltic |
"gateway": "sebbaltic" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
Sense Bank |
"gateway": "sensebank" "gatewayMerchantId": "YOUR_ORGANIZATION_NAME" |
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" |
Tinkoff |
"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" |
2canibox |
"gateway": "twocan" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
UAPAY |
"gateway": "uapay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" |
UBRR |
"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(WL Online Checkout) |
"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(YooKassa) |
"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로 카드 결제 수단의 판매자를 구현하는 가장 일반적인 방식입니다. 결제 시스템 공급자가 지원되지 않는 경우에는 직접 통합을 통해 Google Pay를 허용하면 됩니다. 자세한 내용은 직접 토큰화 문서를 참조하세요.
3단계: 지원되는 결제 카드 네트워크 정의
사이트에서 사용할 수 있는 카드 네트워크를 정의합니다. 다음 코드 샘플을 참조하세요.
const allowedCardNetworks = ["AMEX", "DISCOVER", "INTERAC", "JCB", "MASTERCARD", "VISA"];
Google Pay API는 Google에 등록된 카드(PAN_ONLY
) 또는 3D Secure 암호로 인증된 Android 기기의 기기 토큰(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
유형의 결제 수단을 지원합니다. Google Pay의 결제 수단으로 PAYPAL
유형을 추가하는 방법에 대한 자세한 내용은 PayPal 개발자 문서를 참조하세요.
5단계: Google Pay API 자바스크립트 라이브러리 로드
Google Pay API 자바스크립트 라이브러리를 로드하려면 다음 단계를 완료하세요.
- 페이지에 Google의 호스팅된 자바스크립트를 포함합니다. 다음 코드 샘플을 참조하세요.
<script async src="https://pay.google.com/gp/p/js/pay.js" onload="console.log('TODO: add onload function')"> </script>
- Google Pay API 자바스크립트 라이브러리가 로드된 후
PaymentsClient
객체를 초기화합니다. 초기 개발에서는 결제 응답의 구조를 참조하는 데 적합한 더미 결제 수단을 반환하는TEST
환경을 사용합니다. 이 환경에서는 선택한 결제 수단을 사용한 거래는 지원하지 않습니다. 다음 코드 샘플을 참조하세요.const paymentsClient = new google.payments.api.PaymentsClient({environment: 'TEST'});
청구 가능한 결제 수단을 반환하는
PRODUCTION
환경의 요구사항에 대한 자세한 내용은 통합 체크리스트를 참조하세요.
6단계: Google Pay API로 결제할 준비가 되었는지 확인
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 및 대행업체 사이트에서 지원하는 결제 수단을 사용하여 결제하도록 유도하세요. 사용 가능한 버튼 유형, 색상, 디스플레이 요구사항에 대한 자세한 내용은 브랜드 가이드라인을 참조하세요.
다음 결제 버튼 코드 샘플을 참조하세요.
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
객체를 만들려면 다음 단계를 완료하세요.
- Google Pay API에 대한 사이트의 지원을 설명하는 자바스크립트 객체를 빌드합니다. 지원되는 속성의 전체 목록은
PaymentDataRequest
를 참조하세요. 다음 코드 샘플을 참조하세요.const paymentDataRequest = Object.assign({}, baseRequest);
- 응답에서 예상되는 추가 데이터 구성과 같이 앱이 지원하는 결제 수단을 추가합니다. 다음 코드 샘플을 참조하세요.
paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod];
- 쇼핑객이 승인할 총 가격과 통화를 정의합니다. 다음 코드 샘플을 참조하세요.
paymentDataRequest.transactionInfo = { totalPriceStatus: 'FINAL', totalPrice: '123.45', currencyCode: 'USD', countryCode: 'US' };
- 사용자에게 표시되는 판매자 이름을 제공하고,
TEST
에서TEST
merchantId
값을 사용합니다.TEST
merchantId
값을 대체해야 하는 경우에 대한 자세한 내용 및 정보는MerchantInfo
를 참조하세요. 사용자에게 표시되는 판매자 이름에 대한 다음 코드 샘플을 참조하세요.paymentDataRequest.merchantInfo = { merchantName: 'Example Merchant' merchantId: '12345678901234567890' };
9단계: 사용자 동작용 이벤트 핸들러 등록
사용자 동작에 대한 이벤트 핸들러를 등록하려면 다음 단계를 완료하세요.
- 구매 버튼에 대한 클릭 이벤트 핸들러를 등록합니다. 이벤트 핸들러는 Google Pay 결제 버튼과 상호작용한 직후에
loadPaymentData()
를 호출합니다. - Google 사용자가 선택한 결제 방법 및 연락처 데이터(선택사항)에 대한 정보를 수신할 수 있는 권한을 사이트에 부여한 후 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단계(선택사항): 사용자와 상호작용하기 전에 결제 데이터 프리페치
실행 시간을 단축하려면 loadPaymentData()
를 호출하기 전에 Google Pay API에서 웹사이트의 결제 구성을 프리페치합니다. 아래 예시를 참조하세요.
paymentsClient.prefetchPaymentData(paymentDataRequest);
11단계(선택사항): 결제 승인 설정
결제 승인은 결제 프로세스를 시작하고 결제 승인 상태를 확인하는 데 사용됩니다. 결제 승인을 설정하려면 다음 단계를 수행하세요.
PaymentOptions
에onPaymentAuthorized()
콜백을 등록합니다.PAYMENT_AUTHORIZATION
콜백 인텐트를 사용하여loadPaymentData()
함수를 호출합니다.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 콜백 처리
지급인이 결제를 클릭하는 등의 사용자 동작을 통해 결제를 승인하면 Google에서 PaymentData
객체를 사용하여 onPaymentAuthorized()
콜백을 호출합니다.
콜백은 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단계(배송 사용 설정에 대한 선택사항): 유동 가격 업데이트 설정
유동 가격 업데이트를 사용하면 판매자는 선택한 배송지 주소를 기반으로 배송 옵션 및 거래 정보를 동적으로 업데이트할 수 있습니다. 또한 선택한 배송 옵션에 따라 거래 정보를 동적으로 업데이트할 수 있습니다.
유동 가격 업데이트를 설정하려면 다음 단계를 수행하세요.
onPaymentAuthorized
및onPaymentDataChanged
콜백을 모두PaymentOptions
에 등록합니다.- 콜백 인텐트를 사용하여
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단계(프로모션 코드인 경우): 프로모션 코드 설정하기
프로모션 코드를 사용하면 판매자가 제공된 프로모션 코드를 기준으로 배송 옵션 및 거래 정보를 동적으로 업데이트할 수 있습니다.
프로모션 코드를 설정하려면 다음 단계를 따르세요.
PaymentOptions
의onPaymentDataChanged
콜백을 등록합니다.- 콜백 인텐트를 사용하여
loadPaymentData()
함수를 호출합니다. 자세한 내용은 해당 예시를 참조하세요. onPaymentDataChanged callback function
을 구현합니다.
쿠폰 콜백 등록
다음 코드 샘플은 프로모션 코드를 사용하려면 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); } } }
완성된 모양
이 섹션의 예시 코드 블록은 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>