튜토리얼

이 가이드의 단계에 따라 웹 애플리케이션을 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단계(프로모션 코드에 대한 선택사항): 프로모션 코드 설정하기
총정리
참고: 실시간 Google Pay 데모를 참조하세요.

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 값을 찾습니다.

게이트웨이	매개변수 및 문서
ABA PayWay	"gateway": "ababank" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 개발자 문서
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`" 개발자 문서
BT Pay	"gateway": "btpay" "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`" 개발자 문서
CCAvenue UAE	"gateway": "ccavenueuae" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 개발자 문서
CCV	"gateway": "ccv" "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`" 개발자 문서
CloudWalk	"gateway": "cloudwalk" "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`" 개발자 문서
CYBERBIZ	"gateway": "cyberbizpay" "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`" 개발자 문서
Evervault	"gateway": "evervault" "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`" 개발자 문서
geidea	"gateway": "geidea" "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`" 개발자 문서
GoDaddy Payments	"gateway": "godaddypayments" "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`" 개발자 문서
IPSI	"gateway": "ipsi" "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`" 개발자 문서
Lapsa Payments	"gateway": "lapsapayments" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 개발자 문서
LHV Pank	"gateway": "lhvpank" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 개발자 문서
Liberty	"gateway": "liberty" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 개발자 문서
Life Pay	"gateway": "lifepay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 개발자 문서
Limepay	"gateway": "limepay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 개발자 문서
Linkly	"gateway": "linkly" "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`" 개발자 문서
MakeCommerce (Maksekeskus)	"gateway": "maksekeskus" "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`" 개발자 문서
monek	"gateway": "monek" "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`" 개발자 문서
mstartipg	"gateway": "mstartipg" "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`" 개발자 문서
Network International	"gateway": "networkintl" "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`" 개발자 문서
Nexi Easy	"gateway": "easy" "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`" 개발자 문서
Nexi Relay	"gateway": "nexirelay" "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`" 개발자 문서
OrkestaPay	"gateway": "orkestapay" "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`" 개발자 문서
PayEngine	"gateway": "payengine" "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	"gateway": "paytechsolutions" "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`" 개발자 문서
Payzone Ireland	"gateway": "payzoneireland" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 개발자 문서
PBT Gateway Services Ltd	"gateway": "pbtgateway" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 개발자 문서
Pelecard	"gateway": "pelecard" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 개발자 문서
Pensopay	"gateway": "pensopay" "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`" 개발자 문서
Preczn	"gateway": "preczn" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_ID`" 개발자 문서
PrimePay	"gateway": "primepay" "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`" 개발자 문서
SEBES Technology	"gateway": "sebes" "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`" 개발자 문서
SredaPay	"gateway": "sredapay" "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`" 개발자 문서
Surfboard Payments	"gateway": "surfboard" "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`" 개발자 문서
Zalopay	"gateway": "zalopay" "gatewayMerchantId": "`YOUR_GATEWAY_MERCHANT_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`" 개발자 문서

팁: example은 테스트 환경에서 유효한 게이트웨이 이름입니다. API를 사용해 보려면 위의 코드 샘플을 그대로 사용해도 됩니다. example 게이트웨이를 사용할 경우 사이트에서 거래할 수 있는 카드 데이터를 받지 못할 뿐 사용자 플로우는 동일합니다.

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 환경을 사용합니다. 이 환경에서는 선택한 결제 수단을 사용한 거래는 지원하지 않습니다. 다음 코드 샘플을 참조하세요.
참고: paymentsClient는 한 번만 초기화하는 것이 좋습니다. CreateButton, IsReadyToPay, PrefetchPaymentData, LoadPaymentData 등 기타 모든 API를 호출할 때 동일한 인스턴스를 사용합니다.
```
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];
```
쇼핑객이 승인할 총 가격과 통화를 정의합니다. 다음 코드 샘플을 참조하세요.
중요: 유럽 경제 지역(EEA) 또는 강력한 고객 인증(SCA)이 적용되는 기타 국가에서 거래를 처리하는 판매자는 SCA 요구사항을 충족하기 위해 countryCode, totalPrice, merchantName 매개변수를 포함해야 합니다.
```
paymentDataRequest.transactionInfo = {
  totalPriceStatus: 'FINAL',
  totalPrice: '123.45',
  currencyCode: 'USD',
  countryCode: 'US'
};
```
사용자에게 표시되는 판매자 이름을 제공하고, TEST에서 TEST merchantId 값을 사용합니다. TEST merchantId 값을 대체해야 하는 경우에 대한 자세한 내용 및 정보는 MerchantInfo를 참조하세요. 사용자에게 표시되는 판매자 이름에 대한 다음 코드 샘플을 참조하세요.
```
paymentDataRequest.merchantInfo = {
  merchantName: 'Example Merchant'
  merchantId: '12345678901234567890'
};
```
참고: TEST merchantId 값은 숫자입니다. 특정 merchantId 값은 숫자 또는 영숫자일 수 있습니다. 특정 merchantId를 얻는 방법에 대한 자세한 내용은 MerchantInfo를 참조하세요.

9단계: 사용자 동작용 이벤트 핸들러 등록

사용자 동작에 대한 이벤트 핸들러를 등록하려면 다음 단계를 완료하세요.

구매 버튼에 대한 클릭 이벤트 핸들러를 등록합니다. 이벤트 핸들러는 Google Pay 결제 버튼과 상호작용한 직후에 loadPaymentData()를 호출합니다.
Google 사용자가 선택한 결제 방법 및 연락처 데이터(선택사항)에 대한 정보를 수신할 수 있는 권한을 사이트에 부여한 후 Google Pay API의 응답을 처리합니다.
paymentData 응답에서 결제 토큰을 추출합니다. 게이트웨이 통합을 구현하는 경우 이 토큰을 수정하지 않고 게이트웨이에 전달합니다.
참고: TEST 환경에서 결제 응답에는 확인 페이지에 표시하기에 적합한 선택한 결제 수단에 대한 요약 데이터가 포함됩니다. 결제 응답에는 거래를 지원하는 결제 수단이 포함되어 있지 않습니다.
```
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);
  });
}

프로모션 코드를 사용하면 판매자가 제공된 프로모션 코드를 기준으로 배송 옵션 및 거래 정보를 동적으로 업데이트할 수 있습니다.

프로모션 코드를 설정하려면 다음 단계를 따르세요.

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>

튜토리얼

1단계: Google Pay API 버전 정의

2단계: 결제 시스템 공급자의 결제 토큰 요청

3단계: 지원되는 결제 카드 네트워크 정의

4단계: 사용할 수 있는 결제 수단 설명

5단계: Google Pay API 자바스크립트 라이브러리 로드

6단계: Google Pay API로 결제할 준비가 되었는지 확인

7단계: Google Pay 결제 버튼 추가

8단계: PaymentDataRequest 객체 만들기

9단계: 사용자 동작용 이벤트 핸들러 등록

10단계(선택사항): 사용자와 상호작용하기 전에 결제 데이터 프리페치

11단계(선택사항): 결제 승인 설정

onPaymentAuthorized 콜백 등록

콜백 인텐트로 결제 데이터 로드

onPaymentAuthorized 콜백 처리

12단계(배송 사용 설정에 대한 선택사항): 유동 가격 업데이트 설정

PaymentData 콜백 등록

콜백 인텐트로 결제 데이터 로드

onPaymentDataChanged 콜백 처리

13단계(프로모션 코드인 경우): 프로모션 코드 설정하기

쿠폰 콜백 등록

콜백 인텐트로 결제 데이터 로드

onPaymentDataChanged 콜백 처리

완성된 모양

튜토리얼

결제 승인

유동 가격 업데이트

쿠폰