チュートリアル

このチュートリアルでは、ウェブ アプリケーションを Google Pay API と統合して支払いカードを受け入れる方法について説明します。

ステップ 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"

デベロッパー ドキュメント
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"

デベロッパー ドキュメント
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"

デベロッパー ドキュメント
Cybersource 
  "gateway": "cybersource"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
danube.pay 
  "gateway": "danubepay"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Datacap Systems, Inc. 
  "gateway": "datacap systems inc."
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Datatrans 
  "gateway": "datatrans"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
DECTA 
  "gateway":"decta"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメントはありません
Deutsche Bank AG 
  "gateway":
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメントはありません
Deutsche Bank – Merchant Solutions 
  "gateway":
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
DG Financial Technology, Inc. 
  "gateway": "veritrans"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Digital Finance 
  "gateway": "digitalfinance"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
dLocal 
  "gateway": "dlocal"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
DNA Payments 
  "gateway": "dnapayments"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Dojo 
  "gateway": "dojo"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Dotpay 
  "gateway": "dotpay"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
e-SiTef - Software Express 
  "gateway": "softwareexpress"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
easycard 
  "gateway": "easycard"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
EasyPay 
  "gateway": "easypay"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
EBANX 
  "gateway": "ebanx"
  "gatewayMerchantId": "YOUR_PUBLIC_INTEGRATION_KEY"

デベロッパー ドキュメント
eCard 
  "gateway": "ecard"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
ECOMMPAY 
  "gateway": "ecommpay"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Ecopaynet 
  "gateway": "ecopaynet"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
ECPay 
  "gateway": "ecpay"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメントはありません
eGHL 
  "gateway": "eghl"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Elavon (Converge) 
  "gateway": "convergepay"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Emerchantpay 
  "gateway": "emerchantpay"
  "gatewayMerchantID": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
emspay 
  "gateway": "emsonline"
  "gatewayMerchantID": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Encoded 
  "gateway": "encoded"
  "gatewayMerchantID": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
EpicPay 
  "gateway": "epicpay"
  "gatewayMerchantID": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Espago 
  "gateway": "espago"
  "gatewayMerchantID": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
EveryPay 
  "gateway": "everypay"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
EVONET 
  "gateway": "cardinfolink"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Evopay 
  "gateway": "evopay"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Evo Payment Gateway 
  "gateway": "evopaymentgateway"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメントはありません
exactly.com 
  "gateway": "exactly"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Exact Payments 
  "gateway": "exactpay"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Fat Zebra 
  "gateway": "fatzebra"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント

Fenige 
  "gateway": "fenige"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Fibonatix 
  "gateway": "fibonatixparagon"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Financial Line 
  "gateway": "finline"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Finanso UA 
  "gateway": "finansoua"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
FINEXUS 
  "gateway": "finexus"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Finix 
  "gateway": "finix"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
First American by Deluxe 
  "gateway": "firstpay"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
First Data（Payeezy） 
  "gateway": "firstdata"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
FIS Biller Solutions 
  "gateway": "fisglobalbsp"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Fluid Pay 
  "gateway": "fluidpay"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
FM Finance LTD 
  "gateway": "fmfinanceltd"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
ForteBank 
  "gateway": "fortebank"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Freedom Finance Bank 
  "gateway": "axayscom"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
FreedomPay 
  "gateway": "freedompay"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
FreedomPay.Money 
  "gateway": "payboxmoney"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Freepay 
  "gateway": "freepay"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Frontstream 
  "gateway": "frontstreampayments"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Fung Payments 
  "gateway": "fungpayments"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
GBPayments 
  "gateway": "gbpayments"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
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 ペイメントゲートウェイ 
  "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"

デベロッパー ドキュメント
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"

デベロッパー ドキュメント
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"

デベロッパー ドキュメント
Newebpay（旧 STPath、Pay2Go） 
  "gateway": "newebpay"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Newtech 
  "gateway": "newtechmobile"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

Nexi 
  "gateway": "nexi"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
NMI 
  "gateway": "gatewayservices"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
noon payments 
  "gateway": "noonpayments"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Noqoody Pay 
  "gateway": "noqoodypay"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Novalnet 
  "gateway": "novalnet"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
NTT DATA 
  "gateway": "nttdatahk"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Nuvei 
  "gateway": "nuvei"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Oceanpayment 
  "gateway": "oceanpayment"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Omise 
  "gateway": "omise"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
One Inc 
  "gateway": "oneinc"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Onelya 
  "gateway": "onelya"
  "gatewayMerchantId": "YOUR_GATWAY_MERCHANT_ID"

デベロッパー ドキュメント
Onerway 
  "gateway": "ronghan"
  "gatewayMerchantId": "YOUR_GATWAY_MERCHANT_ID"

デベロッパー ドキュメント
OneVision Limited 
  "gateway": "onevision"
  "gatewayMerchantId": "YOUR_GATWAY_MERCHANT_ID"

デベロッパー ドキュメント
OnPay 
  "gateway": "onpayio"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Opayo by Elavon 
  "gateway": "opayoelavon"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Oschadbank 
  "gateway": "oschadbank"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
pagarme 
  "gateway": "pagarme"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
PagBank 
  "gateway": "pagbank"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
PagBrasil 
  "gateway": "pagbrasil"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
PagSeguro 
  "gateway": "pagsegurointernational"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
PAY2M 
  "gateway": "pay2m"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Payarc 
  "gateway": "payarc"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Pay.com 
  "gateway": "paycom"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
PAYCOMET 
  "gateway": "paycomet"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Paydock 
  "gateway": "paydock"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
PayEase 
  "gateway": "payeasenet"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
PayEngine 
  "gateway": "payengine"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
PayFabric 
  "gateway": "payfabric"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
PayFacto 
  "gateway": "payfacto"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
ペイジェント 
  "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"

デベロッパー ドキュメント
Pelecard 
  "gateway": "pelecard"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Pikassa 
  "gateway": "pikassa"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
PingPong 
  "gateway": "pingpongx"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Pin Payments 
  "gateway": "pinpayments"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Planet 
  "gateway": "cccpayment"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
PlanetPay 
  "gateway": "itcardpaymentservice"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Plategka.com 
  "gateway": "plategkacom"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Platon 
  "gateway": "platon"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Pomelo 
  "gateway": "pomelopay"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Portmone 
  "gateway": "portmonecom"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Primer 
  "gateway": "primer"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Procard 
"gateway": "procard"
"gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
ProcessOut 
  "gateway": "processout"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Przelewy24 
  "gateway": "przelewy24"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
PSB Bank 
  "gateway": "psbank"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
PSCB 
  "gateway": "pscbru"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
PXP Financial 
  "gateway": "pxpfinancial"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Qenta Payment CEE 
  "gateway": "qenta"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
QIWI 
  "gateway": "qiwi"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Qualpay 
  "gateway": "qualpay"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
QuickPay 
  "gateway": "quickpay"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Qvalent 
  "gateway": "qvalent"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Radial 
  "gateway": "radial"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Rapyd 
  "gateway": "rapyd"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
RBK.money 
  "gateway": "rbkmoney"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Rebail Capital 
  "gateway": "rebailcapital"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Rebilly 
  "gateway": "Rebilly"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Recurly 
  "gateway": "recurly"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Reddot 
  "gateway": "reddotpayment"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Rede 
  "gateway": "rede"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Redsys 
  "gateway": "redsys"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Reepay 
  "gateway": "reepay"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
RocketGate 
  "gateway": "rocketgate"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Russian Standard Bank 
  "gateway": "rsb"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Ryft 
  "gateway": "ryft"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Saferpay 
  "gateway": "worldlinesaferpay"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Safexpay 
  "gateway": "safexpay"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Sberbank 
  "gateway": "sberbank"
  "gatewayMerchantId": "YOUR_ORGANIZATION_NAME"

デベロッパー ドキュメント
SEB Baltic 
  "gateway": "sebbaltic"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Sense Bank 
  "gateway": "sensebank"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
SensePass 
  "gateway": "sensepass"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Shift4 
  "gateway": "shift4payments"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Shiji Group 
  "gateway": "shijipaymentsolutions"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
SH Start High 
  "gateway": "shstartpay"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
simbasoft 
  "gateway": "simbasoft"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント

Sipay 
  "gateway": "sipay"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
SB ペイメントサービス 
  "gateway": "sbps"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Solid 
  "gateway": "solid"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
ソニーペイメントサービス 
  "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": "tranzilla"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Tranzzo 
  "gateway": "tranzzo"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Tribe Payments 
  "gateway": "tribepayments"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Truevo 
  "gateway": "truevo"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
TrustPay 
  "gateway": "trustpay"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Trust Payments 
  "gateway": "trustpayments"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Tuna 
  "gateway": "tuna"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
2can&ibox 
  "gateway": "twocan"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
UAPAY 
  "gateway": "uapay"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
UBRR 
  "gateway": "ubrrpay"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Ukrcard 
  "gateway": "ukrcardpay"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
UkrGasBank Pay 
  "gateway": "ukrgasbankpay"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Unibank OJSC 
  "gateway": "unibankcheckout"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
unitedfinancialcorporation 
  "gateway": "unitedfinancialcorporation"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Uniteller 
  "gateway": "uniteller"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Unitpay 
  "gateway": "unitpay"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Unlimint 
  "gateway": "unlimint"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Unzer 
  "gateway": "unzer"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Unzer Austria 
  "gateway": "unzeraustria"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
UPC 
  "gateway": "upc"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Upgate 
  "gateway": "upgate"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
USAePay 
  "gateway": "usaepay"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
UseePay 
  "gateway": "useepay"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Valitor 
  "gateway": "valitor"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Vantiv 
  "gateway": "vantiv"
  "vantiv:merchantPayPageId": "YOUR_PAY_PAGE_ID"
  "vantiv:merchantOrderId": "YOUR_ORDER_ID"
  "vantiv:merchantTransactionId": "YOUR_TRANSACTION_ID"
  "vantiv:merchantReportGroup": "*web"

デベロッパー ドキュメント
Verestro 
  "gateway": "verestro"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Very Good Security 
  "gateway": "verygoodsecurity"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Vindicia 
  "gateway": "vindicia"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Viva Wallet 
  "gateway": "vivawallet"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
VTEX 
  "gateway": "vtex"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Walletdoc 
  "gateway": "walletdoc"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Walletto 
  "gateway": "walletto"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
WayForPay 
  "gateway": "wayforpay"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
WEAT 
  "gateway": "weatpay"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
WhenThen 
  "gateway": "whenthen"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Windcave 
  "gateway": "windcave"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Wirebank 
  "gateway": "wirebank"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Wirecard 
  "gateway": "wirecard"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
WOOPPAY 
  "gateway": "wooppay"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
WooshPay 
  "gateway": "swooshtransfer"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Worldline（GlobalCollect） 
  "gateway": "globalcollect"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Worldline - Ingenico（WL Online Checkout） 
  "gateway": "worldlineingenicoogone"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Worldline Nordics (Worldline Online Checkout) 
  "gateway": "worldlineonlinecheckout"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Worldline Sips 
  "gateway": "wlsips"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Worldnet 
  "gateway": "worldnet"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Worldpay 
  "gateway": "worldpay"
  "gatewayMerchantId": "YOUR_WORLDPAY_MERCHANT_ID"

デベロッパー ドキュメント
Wpay 
  "gateway": "wpayaus"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
WSPay 
  "gateway": "wspay"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
XPATE 
  "gateway": "xpate"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
xpay 
  "gateway": "xpaycomua"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
YIĞIM Payment System 
  "gateway": "yigim"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメントはありません
ЮKassa（YooKassa） 
  "gateway": "yoomoney"
  "gatewayMerchantId": "YOUR_SHOP_ID"

デベロッパー ドキュメント
Z-credit 
  "gateway": "zcredit"
  "gatewayMerchantId": "YOUR_SHOP_ID"

デベロッパー ドキュメント
ZEN.com 
  "gateway": "zen"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Zest 
  "gateway": "zestpayment"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント
Zuora 
  "gateway": "zuora"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

デベロッパー ドキュメント

PAYMENT_GATEWAY は、販売者が Google Pay API のカード支払い方法を統合する際に最もよく使用されるトークン化タイプです。ご利用の決済機関がサポートされていない場合は、直接統合によって Google Pay を利用できる場合があります。詳細については、直接トークン化のドキュメントをご覧ください。

ステップ 3: サポートされている支払いカード ネットワークを定義する

サイトで使用可能にするカード ネットワークを定義します。次のコードサンプルを参照してください。

const allowedCardNetworks = ["AMEX", "DISCOVER", "INTERAC", "JCB", "MASTERCARD", "VISA"];

Google Pay API は、Google に保存されたカード情報（PAN_ONLY）、または 3D セキュア クリプトグラムで認証された Android デバイス トークン（CRYPTOGRAM_3DS）を返します。次のコードサンプルをご覧ください。

const allowedCardAuthMethods = ["PAN_ONLY", "CRYPTOGRAM_3DS"];

詳しくは、オブジェクト リファレンス ドキュメントの CardParameters をご覧ください。また、サポートされているカード ネットワークと Android デバイス トークンのサポートについては、ゲートウェイまたは決済代行業者に確認してください。

ステップ 4: 許可された支払い方法を記述する

許可されたお支払い方法を記述するには、次の手順を行います。

  1. サポートされている認証方法とサポートされているカード ネットワークを組み合わせて、サイトでの CARD のお支払い方法のサポートについて記述します。次のコードサンプルを参照してください。
    const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedAuthMethods: allowedCardAuthMethods,
    allowedCardNetworks: allowedCardNetworks
  }
};
  2. ベースカード支払い方法オブジェクトを拡張し、アプリケーションに返す必要がある情報を記述します。トークン化された支払いデータの説明を含めます。次のコードサンプルを参照してください。
    const cardPaymentMethod = Object.assign(
  {tokenizationSpecification: tokenizationSpecification},
  baseCardPaymentMethod
);

    3. サポートされている parameters について詳しくは、CardParameters をご覧ください。

    Google Pay では、PAYPAL によるお支払い方法に加えて、CARD によるお支払い方法もサポートされています。お支払い方法として PAYPAL を Google Pay に追加する方法について詳しくは、PayPal のデベロッパー向けドキュメントをご覧ください。

ステップ 5: Google Pay API JavaScript ライブラリを読み込む

Google Pay API JavaScript ライブラリを読み込むには、次の手順を行います。

  1. Google によってホストされている JavaScript をページに追加します。次のコードサンプルを参照してください。
    <script
  async
  src="https://pay.google.com/gp/p/js/pay.js"
  onload="console.log('TODO: add onload function')">
</script>
  2. Google Pay API JavaScript ライブラリが読み込まれた後、PaymentsClient オブジェクトを初期化します。初期開発では TEST 環境を使用します。そうすると、支払いレスポンスの構造を参照するのに適したダミーのお支払い方法が返されます。この環境では、選択されたお支払い方法で取引を行うことはできません。次のコードサンプルを参照してください。 
    const paymentsClient =
    new google.payments.api.PaymentsClient({environment: 'TEST'});

    請求可能なお支払い方法を返す PRODUCTION 環境の要件については、統合チェックリストをご覧ください。

ステップ 6: Google Pay API での支払いが可能かどうかを確認する

Google Pay API での支払いが可能かどうかを確認するには、次の手順を行います。

  1. 許可された支払い方法をベース リクエスト オブジェクトに追加します。次のコードサンプルを参照してください。 
    const isReadyToPayRequest = Object.assign({}, baseRequest);
isReadyToPayRequest.allowedPaymentMethods = [baseCardPaymentMethod];
  2. 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 API とサイトでサポートされているお支払い方法で購入手続きを行えるように、Google Pay 支払いボタンをページに追加します。使用可能なボタンの種類、色、表示要件については、ブランド ガイドラインをご覧ください。

支払いボタンのコードサンプルは次のとおりです。

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 オブジェクトを作成するには、次の手順を行います。

  1. サイトでの Google Pay API のサポートを記述する JavaScript オブジェクトを作成します。サポートされているプロパティの一覧については、PaymentDataRequest をご覧ください。次のコードサンプルを参照してください。
    const paymentDataRequest = Object.assign({}, baseRequest);
  2. レスポンスで期待される追加データの構成など、アプリでサポートされているお支払い方法を追加します。次のコードサンプルを参照してください。
    paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod];
  3. 買い物客に提示する合計金額と通貨を定義します。次のコードサンプルをご覧ください。 
    paymentDataRequest.transactionInfo = {
  totalPriceStatus: 'FINAL',
  totalPrice: '123.45',
  currencyCode: 'USD',
  countryCode: 'US'
};
  4. ユーザーに表示される販売者名を入力し、TEST で TEST merchantId 値を使用します。TEST merchantId 値を置き換える場合の詳細については、MerchantInfo をご覧ください。 ユーザーに表示される販売者名のコードサンプルは、次のとおりです。 
    paymentDataRequest.merchantInfo = {
  merchantName: 'Example Merchant'
  merchantId: '12345678901234567890'
};

ステップ 9: ユーザー ジェスチャーのイベント ハンドラを登録する

ユーザー ジェスチャーのイベント ハンドラを登録するには、次の手順を行います。

  1. 購入ボタンのクリック イベント ハンドラを登録します。Google Pay 支払いボタンがクリックされた直後に、イベント ハンドラが loadPaymentData() を呼び出します。
  2. Google ユーザーから、ユーザーが選択した支払い方法と連絡先に関する情報を取得することについて許可が得られたら、Google Pay API からのレスポンスを処理します。
  3. paymentData レスポンスから支払いトークンを抽出します。ゲートウェイ統合を実装する場合は、このトークンをそのままゲートウェイに渡します。 
    paymentsClient.loadPaymentData(paymentDataRequest).then(function(paymentData){
  // if using gateway tokenization, pass this token without modification
  paymentToken = paymentData.paymentMethodData.tokenizationData.token;
}).catch(function(err){
  // show error in developer console for debugging
  console.error(err);
});

ステップ 10（省略可）: ユーザーが操作を行う前に支払いデータをプリフェッチする

実行時間を短縮するには、loadPaymentData() を呼び出す前に Google Pay API からウェブサイトの支払い構成をプリフェッチします。次の例をご覧ください。

paymentsClient.prefetchPaymentData(paymentDataRequest);

ステップ 11（省略可）: 支払い承認を設定する

支払い承認は、支払いプロセスを開始し、支払いの承認ステータスを確認するために使用されます。支払い承認を設定する手順は次のとおりです。

  1. PaymentOptions で onPaymentAuthorized() コールバックを登録します。
  2. PAYMENT_AUTHORIZATION コールバック インテントを指定して loadPaymentData() 関数を呼び出します。
  3. onPaymentAuthorized() を実装します。

onPaymentAuthorized コールバックを登録する

次のコードサンプルは、onPaymentAuthorized コールバックを登録する方法を示しています。

{
  environment: "TEST",
  merchantInfo: {
    merchantName: "Example Merchant",
    merchantId: "12345678901234567890"
  },
  paymentDataCallbacks: {
    onPaymentAuthorized: onPaymentAuthorized
  }
}

コールバック インテントで支払いデータを読み込む

次のコード例は、支払い承認つきで支払いシートを初期化する方法を示しています。

const paymentDataRequest = Object.assign({}, baseRequest);
paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod];
paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
paymentDataRequest.merchantInfo = {
  merchantName: 'Example Merchant'
  merchantId: '12345678901234567890',
};

paymentDataRequest.callbackIntents = ["PAYMENT_AUTHORIZATION"];

onPaymentAuthorized コールバックを処理する

支払人がユーザー ジェスチャーを使用して支払いを承認すると（[お支払い] をクリックした場合など）、onPaymentAuthorized() コールバックが Google によって呼び出され、PaymentData オブジェクトが渡されます。

このコールバックは Promise<PaymentAuthorizationResult> の値を返します。PaymentAuthorizationResult オブジェクトには、SUCCESS または ERROR の取引状態ステータスが含まれます。処理が成功すると、支払いシートは正常に閉じられます。エラーが発生した場合は、支払い処理の後に返されたエラーの詳細が支払いシートに表示されます。ユーザーは、支払いシートの支払いデータを変更し、支払いを再度承認できます。次のコードサンプルを参照してください。

function onPaymentAuthorized(paymentData) {
  return new Promise(function(resolve, reject){
    // handle the response
    processPayment(paymentData)
    .then(function() {
      resolve({transactionState: 'SUCCESS'});
    })
    .catch(function() {
      resolve({
        transactionState: 'ERROR',
        error: {
          intent: 'PAYMENT_AUTHORIZATION',
          message: 'Insufficient funds',
          reason: 'PAYMENT_DATA_INVALID'
        }
      });
    });
  });
}

ステップ 12（配送が有効な場合向け、省略可）: 動的料金設定の更新を設定する

動的料金設定の更新では、選択した配送先住所に基づいて配送オプションや取引情報を動的に更新できます。また、選択した配送オプションに基づいて取引情報を動的に更新することもできます。

動的料金設定の更新を設定するには、次の手順を行います。

  1. PaymentOptions で onPaymentAuthorized と onPaymentDataChanged の両方のコールバックを登録します。
  2. コールバック インテントを指定して loadPaymentData() 関数を呼び出します。詳しくは、対応するサンプルをご覧ください。
  3. onPaymentAuthorized と onPaymentDataChanged を実装します。

PaymentData コールバックを登録する

次のコードサンプルは、動的料金設定の更新を実装するには PaymentsClient の paymentOptions オブジェクトにコールバック関数を登録する必要があることを示しています。

{
  environment: "TEST",
  merchantInfo: {
    merchantName: "Example Merchant",
    merchantId: "12345678901234567890"
  },
  paymentDataCallbacks: {
    onPaymentAuthorized: onPaymentAuthorized,
    onPaymentDataChanged: onPaymentDataChanged
  }
}

コールバック インテントで支払いデータを読み込む

次のコードサンプルは、支払いシートの初期化に際して、配送先住所と配送オプションの構成が必要であることを示しています。

const paymentDataRequest = Object.assign({}, baseRequest);
paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod];
paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
paymentDataRequest.merchantInfo = {
  merchantId: '12345678901234567890',
  merchantName: 'Example Merchant'
};

paymentDataRequest.callbackIntents = ["SHIPPING_ADDRESS",  "SHIPPING_OPTION", "PAYMENT_AUTHORIZATION"];

paymentDataRequest.shippingAddressRequired = true;
paymentDataRequest.shippingAddressParameters = getGoogleShippingAddressParameters();
paymentDataRequest.shippingOptionRequired = true;

onPaymentDataChanged コールバックを処理する

onPaymentDataChanged コールバックの呼び出し時には IntermediatePaymentData オブジェクトが渡されます。このオブジェクトには、支払いシートで選択された配送先住所と配送オプションが含まれます。

このコールバックは Promise<PaymentDataRequestUpdate> を返します。PaymentDataRequestUpdate オブジェクトには、新しい取引情報、配送オプション、支払いデータエラーが含まれます。このデータを使用して支払シートが更新されます。

配送先住所や配送方法が無効な場合など、例外が発生した場合は支払いシートで直接処理してください。PaymentDataError オブジェクトを設定し、エラーの理由とユーザーに表示されるエラー メッセージを指定します。メッセージには関連するインテントを含めてください。オブジェクトとメッセージの設定方法の詳細については、次のコード例をご覧ください。

function onPaymentDataChanged(intermediatePaymentData) {
  return new Promise(function(resolve, reject) {

    let shippingAddress = intermediatePaymentData.shippingAddress;
    let shippingOptionData = intermediatePaymentData.shippingOptionData;
    let paymentDataRequestUpdate = {};

    if (intermediatePaymentData.callbackTrigger == "INITIALIZE" || intermediatePaymentData.callbackTrigger == "SHIPPING_ADDRESS") {
      if(shippingAddress.administrativeArea == "NJ")  {
        paymentDataRequestUpdate.error = getGoogleUnserviceableAddressError();
      }
      else {
        paymentDataRequestUpdate.newShippingOptionParameters = getGoogleDefaultShippingOptions();
        let selectedShippingOptionId = paymentDataRequestUpdate.newShippingOptionParameters.defaultSelectedOptionId;
        paymentDataRequestUpdate.newTransactionInfo = calculateNewTransactionInfo(selectedShippingOptionId);
      }
    }
    else if (intermediatePaymentData.callbackTrigger == "SHIPPING_OPTION") {
      paymentDataRequestUpdate.newTransactionInfo = calculateNewTransactionInfo(shippingOptionData.id);
    }

    resolve(paymentDataRequestUpdate);
  });
}

ステップ 13（プロモーション コード向け、省略可）: プロモーション コードを設定する

プロモーション コードを使用すると、提供されたプロモーション コードに基づいて配送オプションや取引情報を動的に更新できます。

プロモーション コードを設定するには、次の手順に従います。

  1. PaymentOptions で onPaymentDataChanged コールバックを登録します。
  2. コールバック インテントを指定して loadPaymentData() 関数を呼び出します。詳しくは、対応するサンプルをご覧ください。
  3. onPaymentDataChanged callback function を実装します。

OFFER コールバックの登録

次のコードサンプルは、プロモーション コードを実装するには PaymentsClient の paymentOptions オブジェクトにコールバック関数を登録する必要があることを示しています。

{
  environment: "TEST",
  merchantInfo: {
    merchantName: "Example Merchant",
    merchantId: "12345678901234567890"
  },
  paymentDataCallbacks: {
    onPaymentDataChanged: onPaymentDataChanged
  }
}

コールバック インテントで支払いデータを読み込む

次のコードサンプルは、OFFER コールバック インテントを使用して支払いシートを初期化する方法を示しています。

const paymentDataRequest = Object.assign({}, baseRequest);
paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod];
paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
paymentDataRequest.merchantInfo = {
  merchantId: '12345678901234567890',
  merchantName: 'Example Merchant'
};

paymentDataRequest.callbackIntents = ["OFFER"];

onPaymentDataChanged コールバックを処理する

onPaymentDataChanged コールバックの呼び出し時には IntermediatePaymentData オブジェクトが渡されます。このオブジェクトには、支払いシートで選択された配送先住所と配送オプションが含まれます。

このコールバックは Promise<PaymentDataRequestUpdate> を返す必要があります。PaymentDataRequestUpdate オブジェクトには、新しい取引情報、配送オプション、特典データ、支払いデータエラーが含まれます。このデータを使用して支払シートが更新されます。

プロモーション コードが無効な場合など、例外が発生した場合は支払いシートで直接処理してください。PaymentDataError オブジェクトを設定し、エラーの理由とユーザーに表示されるエラー メッセージを指定します。メッセージには関連するインテントを含めてください。オブジェクトとメッセージの設定方法の詳細については、次のコードサンプルをご覧ください。このコードサンプルではプロモーション コード値を含むオブジェクト（validPromoCodes）を参照しています。

function onPaymentDataChanged(intermediatePaymentData) {
  return new Promise(function(resolve, reject) {

    let redemptionCodes = [];
    let shippingOptionData = intermediatePaymentData.shippingOptionData;
    let paymentDataRequestUpdate = {};
    paymentDataRequestUpdate.newTransactionInfo = getGoogleTransactionInfo();

    // ensure that promo codes set is unique
    if(typeof intermediatePaymentData.offerData != 'undefined') {
      // convert to set then back to array
      redemptionCodes = Array.from(
        new Set(intermediatePaymentData.offerData.redemptionCodes)
      );
    }

    // OPTIONAL: ensure that the newest promo code is the only one applied
    // redemptionCodes = new Array(redemptionCodes[redemptionCodes.length -1]);

    // validate promo codes and add descriptions to payment sheet
    if (intermediatePaymentData.callbackTrigger === 'OFFER') {
      paymentDataRequestUpdate.newOfferInfo = {};
      paymentDataRequestUpdate.newOfferInfo.offers = [];
      for (redemptionCode of redemptionCodes) {
        if (validPromoCodes[redemptionCode]) {
          paymentDataRequestUpdate = validPromoCodes[redemptionCode].function(
            validPromoCodes[redemptionCode],
            paymentDataRequestUpdate
          );
        } else {
          paymentDataRequestUpdate.error = getGoogleOfferInvalidError(redemptionCode);
        }
      }
    }

まとめ

このセクションのコードブロックの例は、Google Pay API JavaScript ライブラリのチュートリアル、支払い承認、動的料金設定の更新、プロモーション コードの完全な例を示しています。

チュートリアル

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