このチュートリアルでは、ウェブ アプリケーションを Google Pay API と統合して支払いカードを受け入れる方法について説明します。
- ステップ 1: Google Pay API のバージョンを定義する
- ステップ 2: 支払いトークン化方法を選択する
- ステップ 3: サポートされている支払いカード ネットワークを定義する
- ステップ 4: 許可されたお支払い方法を記述する
- ステップ 5: Google Pay API JavaScript ライブラリを読み込む
- ステップ 6: Google Pay API での支払いが可能かどうかを確認する
- ステップ 7: Google Pay 支払いボタンを追加する
- ステップ 8: PaymentDataRequest オブジェクトを作成する
- ステップ 9: ユーザー ジェスチャーのイベント ハンドラを登録する
- ステップ 10(省略可): ユーザーが操作を行う前に支払いデータをプリフェッチする
- ステップ 11(省略可): 支払い承認を設定する
- ステップ 12(配送が有効な場合向け、省略可): 動的料金設定の更新を設定する
- ステップ 13(プロモーション コード向け、省略可): プロモーション コードを設定する
ステップ 1: Google Pay API のバージョンを定義する
サイトで使用する Google Pay API のバージョンを宣言します。メジャーとマイナーのバージョンが、渡された各オブジェクトのフィールドに必要であり、レスポンスに含まれます。
次のコードサンプルは、宣言された API バージョンを示しています。
const baseRequest = { apiVersion: 2, apiVersionMinor: 0 };
ステップ 2: 決済機関にお支払いトークンをリクエストする
Google では、決済機関による処理がセキュアに行われるように、支払人が選択したカードに関する情報を暗号化します。
const tokenizationSpecification = { type: 'PAYMENT_GATEWAY', parameters: { 'gateway': 'example', 'gatewayMerchantId': 'exampleGatewayMerchantId' } };
example と exampleGatewayMerchantId を決済機関の該当する値に置き換えます。次の表で、お客様の決済機関の gateway 値と gatewayMerchantId 値を探してください。
| ゲートウェイ | パラメータとドキュメント | 
|---|---|
| 9Pay | "gateway": "ninepay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| 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" | 
| AMO FINTECH LLC | "gateway": "amofintech" "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" | 
| azericardgpay | "gateway": "azericardgpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Bank 131 | "gateway": "bank131" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| BANK RBK | "gateway": "bankrbkkzpay" "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" | 
| Basis Theory | "gateway": "basistheory" "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" | 
| bisys.kz | "gateway": "bisysgpay" "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" | 
| Bluefin Europe | "gateway": "bluefineurope" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Blue Media | "gateway": "bluemedia" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| BlueSnap | "gateway": "bluesnap" "gatewayMerchantId": "YOUR_shopToken" | 
| BORICA | "gateway": "borica" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| BPC | "gateway": "bpcpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| BR-DGE | "gateway": "comcarde" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Braintree | "gateway": "braintree" "braintree:apiVersion": "v1" "braintree:sdkVersion": "braintree.client.VERSION" "braintree:merchantId": "YOUR_BRAINTREE_MERCHANT_ID" "braintree:clientKey": "YOUR_BRAINTREE_TOKENIZATION_KEY" | 
| Braspag | "gateway": "cielo" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| BridgerPay | "gateway": "bridgerpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| BT Pay | "gateway": "btpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Buya | "gateway": "buya" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| CardCom | "gateway": "cardcom" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| CardConnect | "gateway": "cardconnect" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Cardknox | "gateway": "cardknox" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| cardlink | "gateway": "cardlink" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Cardstream | "gateway": "crst" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Cashflows | "gateway": "cashflowsgateway" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Cathay United Bank | "gateway": "cathaybk" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| CCAvenue UAE | "gateway": "ccavenueuae" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| CCV | "gateway": "ccv" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Cecabank | "gateway": "cecabank" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Celerispay | "gateway": "celerispay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| CentralPay | "gateway": "centralpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Chargehive | "gateway": "chargehive" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| CharityEngine | "gateway": "charityengine" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Chase Merchant Services | "gateway": "chase" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Checkout.com | "gateway": "checkoutltd" "gatewayMerchantId": "YOUR_PUBLIC_KEY" | 
| CityPay | "gateway": "citypay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Cloud9 Payment Gateway(C9PG) | "gateway": "c9pg" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| CloudPayments | "gateway": "cloudpayments" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| CloudWalk | "gateway": "cloudwalk" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Coinflow | "gateway": "coinflow" "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" | 
| CoralPay | "gateway": "coralpay" "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" | 
| Cross Switch | "gateway": "crossswitch" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| CSG Forte | "gateway": "csgforte" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| CTBC Bank | "gateway": "ctbcbank" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| CURO Payments | "gateway": "curopayments" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| CYBERBIZ | "gateway": "cyberbizpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Cybersource | "gateway": "cybersource" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| danube.pay | "gateway": "danubepay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Datacap Systems, Inc. | "gateway": "datacap systems inc." "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Datatrans | "gateway": "datatrans" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| DECTA | "gateway":"decta" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" デベロッパー ドキュメントはありません | 
| Dejavoo | "gateway": "denovosystempay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| DEUNA | "gateway": "deuna" "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" | 
| Dintero | "gateway": "dintero" "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" | 
| Easypay EU | "gateway": "easypaypt" "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" デベロッパー ドキュメントはありません | 
| eftcorporation | "gateway": "eftcorporation" "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" | 
| epay | "gateway": "epay" "gatewayMerchantID": "YOUR_GATEWAY_MERCHANT_ID" | 
| EPAYJSC | "gateway": "epayjsc" "gatewayMerchantID": "YOUR_GATEWAY_MERCHANT_ID" | 
| EpicPay | "gateway": "epicpay" "gatewayMerchantID": "YOUR_GATEWAY_MERCHANT_ID" | 
| Espago | "gateway": "espago" "gatewayMerchantID": "YOUR_GATEWAY_MERCHANT_ID" | 
| Etisalat | "gateway": "etisalatpaymentgateway" "gatewayMerchantID": "YOUR_GATEWAY_MERCHANT_ID" デベロッパー ドキュメントはありません | 
| EveryPay S.A. | "gateway": "EveryPay S.A." "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Evervault | "gateway": "evervault" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| EVONET | "gateway": "cardinfolink" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| EVOPAY | "gateway": "EVOPAY" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Evo Payment Gateway | "gateway": "evopaymentgateway" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" デベロッパー ドキュメントはありません | 
| exactly.com | "gateway": "exactly" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Exact Payments | "gateway": "exactpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Fat Zebra | "gateway": "fatzebra" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Fenige | "gateway": "fenige" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Fexco payUnite | "gateway": "fexco" "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" | 
| fincode byGMO | "gateway": "fincode" "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" | 
| Flitt | "gateway": "flitt" "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" | 
| Fractal | "gateway": "fractal" "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" | 
| globalpaymentsinc | "gateway": "globalpaymentsinc" "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" | 
| hutko | "gateway": "hutko" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Hyp | "gateway": "hyp" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| icard | "gateway": "icardwallet" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| iCount | "gateway": "iCount" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| IDid Tecnologia Ltda | "gateway": "idid" "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" | 
| Inovio Payments | "gateway": "inoviopay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| InPlat | "gateway": "inplat" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| InstaMed | "gateway": "instamed" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| IntaSend Solutions Limited | "gateway": "intasend" "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" デベロッパー ドキュメントはありません | 
| KapitalBank | "gateway": "eCommerceKapitalBank" "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" | 
| Koin | "gateway": "koin" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Lapsa Payments | "gateway": "lapsapayments" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Liberty | "gateway": "liberty" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Life Pay | "gateway": "lifepay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Limepay | "gateway": "limepay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Linkly | "gateway": "linkly" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| LiqPay | "gateway": "liqpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Littlepay | "gateway": "littlepay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| LogPay | "gateway": "logpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Loyale | "gateway": "loyale" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| lynck | "gateway": "lynck" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Lyra | "gateway": "lyra" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Magnetiq Bank | "gateway": "magnetiq" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| maib | "gateway": "maibecomm" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| MakeCommerce (Maksekeskus) | "gateway": "maksekeskus" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Maksu GMBH | "gateway": "maksupayeu" "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" | 
| Midtrans | "gateway": "midtrans" "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" | 
| Mollie | "gateway": "mollie" "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" | 
| MoneyHash | "gateway": "moneyhash" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Money.Mail.Ru | "gateway": "moneymailru" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| monripayments | "gateway": "monripayments" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Moov | "gateway": "moov" "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" | 
| Neolink | "gateway": "neolinkprocessing" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Neon Pay | "gateway": "neonpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Netopia | "gateway": "netopia" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Netvalve | "gateway": "netvalve" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Network International | "gateway": "networkintl" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Newebpay(旧 STPath、Pay2Go) | "gateway": "newebpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Newtech | "gateway": "newtechmobile" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Nexi | "gateway": "nexi" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Nexi Easy | "gateway": "easy" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| NMI | "gateway": "gatewayservices" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| noon payments | "gateway": "noonpayments" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Noqoody Pay | "gateway": "noqoodypay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Novalnet | "gateway": "novalnet" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Nexi Relay | "gateway": "nexirelay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| NTT DATA | "gateway": "nttdatahk" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Nuvei | "gateway": "nuvei" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Oceanpayment | "gateway": "oceanpayment" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Omise | "gateway": "omise" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Omno | "gateway": "omno" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| One Inc | "gateway": "oneinc" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Onelya | "gateway": "onelya" "gatewayMerchantId": "YOUR_GATWAY_MERCHANT_ID" | 
| Onerway | "gateway": "ronghan" "gatewayMerchantId": "YOUR_GATWAY_MERCHANT_ID" | 
| OneVision Limited | "gateway": "onevision" "gatewayMerchantId": "YOUR_GATWAY_MERCHANT_ID" | 
| OnPay | "gateway": "onpayio" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Opayo by Elavon | "gateway": "opayoelavon" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| OrkestaPay | "gateway": "orkestapay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Oschadbank | "gateway": "oschadbank" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| pagarme | "gateway": "pagarme" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| PagBank | "gateway": "pagbank" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| PagBrasil | "gateway": "pagbrasil" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| PagSeguro | "gateway": "pagsegurointernational" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| PAY2M | "gateway": "pay2m" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Payarc | "gateway": "payarc" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Pay.com | "gateway": "paycom" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| PAYCOMET | "gateway": "paycomet" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Paydock | "gateway": "paydock" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| PayEase | "gateway": "payeasenet" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| PayEngine | "gateway": "payengine" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| PayFabric | "gateway": "payfabric" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| PayFacto | "gateway": "payfacto" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| PayFast | "gateway": "gopayfastuat" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| ペイジェント | "gateway": "paygent" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Payhub | "gateway": "payhub" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| PayKKa | "gateway": "paykkaeu" "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" | 
| Pay Theory | "gateway": "paytheory" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| PayPlus | "gateway": "payplus" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| PayPro Pvt Ltd | "gateway": "paypro" "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" | 
| Payten Payment Gateway | "gateway": "paytentr" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Paythru | "gateway": "paythru" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Payture | "gateway": "payture" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| PayU | "gateway": "payu" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| PayU LATAM | "gateway": "payulatam" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| PAYUNi | "gateway": "payuni" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| PayU Romania | "gateway": "payuro" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| PayU Russia | "gateway": "payuru" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Payway | "gateway": "payway" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Paywiser | "gateway": "paywiser" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Payzone Ireland | "gateway": "payzoneireland" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| PBT Gateway Services Ltd | "gateway": "pbtgateway" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Pelecard | "gateway": "pelecard" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Pensopay | "gateway": "pensopay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Pikassa | "gateway": "pikassa" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| PingPong | "gateway": "pingpongx" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Pin Payments | "gateway": "pinpayments" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Planet | "gateway": "cccpayment" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| PlanetPay | "gateway": "itcardpaymentservice" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Plategka.com | "gateway": "plategkacom" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Platon | "gateway": "platon" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Pomelo | "gateway": "pomelopay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Portmone | "gateway": "portmonecom" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Preczn | "gateway": "preczn" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| PrimePay | "gateway": "primepay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | Primer | "gateway": "primer" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | Procard | "gateway": "procard" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| ProcessOut | "gateway": "processout" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Przelewy24 | "gateway": "przelewy24" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| PSB Bank | "gateway": "psbank" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| PSCB | "gateway": "pscbru" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| PSiGate Inc. | "gateway": "psigate" "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" | 
| Raiffeisen Processing Centre | "gateway": "raiffeisenprocessingcentre" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Rapyd | "gateway": "rapyd" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| RBK.money | "gateway": "rbkmoney" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Rebail Capital | "gateway": "rebailcapital" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Rebilly | "gateway": "Rebilly" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Recurly | "gateway": "recurly" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Reddot | "gateway": "reddotpayment" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Rede | "gateway": "rede" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Redsys | "gateway": "redsys" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Reepay | "gateway": "reepay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| RocketGate | "gateway": "rocketgate" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Russian Standard Bank | "gateway": "rsb" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Ryft | "gateway": "ryft" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Saferpay | "gateway": "worldlinesaferpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Safexpay | "gateway": "safexpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Sberbank | "gateway": "sberbank" "gatewayMerchantId": "YOUR_ORGANIZATION_NAME" | 
| SEB Baltic | "gateway": "sebbaltic" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| SEBES Technology | "gateway": "sebes" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| SecurePay | "gateway": "securepay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Sense Bank | "gateway": "sensebank" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| SensePass | "gateway": "sensepass" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Servicios Digitales Popular S.A. | "gateway": "pagosazul" "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" | 
| shvarenapay | "gateway": "shvarenapay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| simbasoft | "gateway": "simbasoft" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Sipay | "gateway": "sipay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| SmartPay | "gateway": "smartpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| SB ペイメントサービス | "gateway": "sbps" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Softtouch POS and Payments | "gateway": "softtouch" "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" | 
| SSLCOMMERZ | "gateway": "sslcommerz" "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" | 
| SUMIT | "gateway": "sumit" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| 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" | 
| Time Project LLC | "gateway": "timeproject" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Tinkoff | "gateway": "tinkoff" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| TIPTOP PAY | "gateway": "tiptoppay" "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" | 
| Transact Pro | "gateway": "transactpro" "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" | 
| USIO, Inc. | "gateway": "usio" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Valitor | "gateway": "valitor" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| value.io | "gateway": "inspirecommerce" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Vanco | "gateway": "vanco" "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" | 
| Vayapay | "gateway": "vayapay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" デベロッパー ドキュメントはありません | 
| Verestro | "gateway": "verestro" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Very Good Security | "gateway": "verygoodsecurity" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Victoriabank | "gateway": "victoriabank" "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" | 
| Waffo | "gateway": "waffo" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Wallee | "gateway": "wallee" "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" | 
| xMoney | "gateway": "xmoneypay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| XPATE | "gateway": "xpate" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| xpay | "gateway": "xpaycomua" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| XPay by PostEx | "gateway": "xpaybypostex" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| YabandPay B.V. | "gateway": "yabandpay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| YIĞIM Payment System | "gateway": "yigim" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" デベロッパー ドキュメントはありません | 
| ЮKassa(YooKassa) | "gateway": "yoomoney" "gatewayMerchantId": "YOUR_SHOP_ID" | 
| Yuno | "gateway": "yuno" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Z-credit | "gateway": "zcredit" "gatewayMerchantId": "YOUR_SHOP_ID" | 
| Zalopay | "gateway": "zalopay" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| ZEN.com | "gateway": "zen" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Zest | "gateway": "zestpayment" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
| Zuora | "gateway": "zuora" "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID" | 
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: 許可された支払い方法を記述する
許可されたお支払い方法を記述するには、次の手順を行います。
- サポートされている認証方法とサポートされているカード ネットワークを組み合わせて、サイトでの CARDのお支払い方法のサポートについて記述します。次のコードサンプルを参照してください。const baseCardPaymentMethod = { type: 'CARD', parameters: { allowedAuthMethods: allowedCardAuthMethods, allowedCardNetworks: allowedCardNetworks } }; 
- ベースカード支払い方法オブジェクトを拡張し、アプリケーションに返す必要がある情報を記述します。トークン化された支払いデータの説明を含めます。次のコードサンプルを参照してください。const cardPaymentMethod = Object.assign( {tokenizationSpecification: tokenizationSpecification}, baseCardPaymentMethod ); 
サポートされている parameters について詳しくは、CardParameters をご覧ください。
Google Pay では、PAYPAL によるお支払い方法に加えて、CARD によるお支払い方法もサポートされています。お支払い方法として PAYPAL を Google Pay に追加する方法について詳しくは、PayPal のデベロッパー向けドキュメントをご覧ください。
ステップ 5: Google Pay API JavaScript ライブラリを読み込む
Google Pay API JavaScript ライブラリを読み込むには、次の手順を行います。
- Google によってホストされている JavaScript をページに追加します。次のコードサンプルを参照してください。<script async src="https://pay.google.com/gp/p/js/pay.js" onload="console.log('TODO: add onload function')"> </script>
- Google Pay API JavaScript ライブラリが読み込まれた後、PaymentsClientオブジェクトを初期化します。初期開発ではTEST環境を使用します。そうすると、支払いレスポンスの構造を参照するのに適したダミーのお支払い方法が返されます。この環境では、選択されたお支払い方法で取引を行うことはできません。次のコードサンプルを参照してください。const paymentsClient = new google.payments.api.PaymentsClient({environment: 'TEST'}); 請求可能なお支払い方法を返す PRODUCTION環境の要件については、統合チェックリストをご覧ください。
ステップ 6: Google Pay API での支払いが可能かどうかを確認する
Google Pay API での支払いが可能かどうかを確認するには、次の手順を行います。
- 許可された支払い方法をベース リクエスト オブジェクトに追加します。次のコードサンプルを参照してください。
const isReadyToPayRequest = Object.assign({}, baseRequest); isReadyToPayRequest.allowedPaymentMethods = [baseCardPaymentMethod]; 
- isReadyToPay()を呼び出して、現在のデバイスまたはブラウザで Google Pay API が指定のお支払い方法を処理できるかどうかを確認します。次のコードサンプルを参照してください。- paymentsClient.isReadyToPay(isReadyToPayRequest) .then(function(response) { if (response.result) { // add a Google Pay payment button } }) .catch(function(err) { // show error in developer console for debugging console.error(err); }); 
ステップ 7: Google Pay 支払いボタンを追加する
買い物客が Google Pay 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 オブジェクトを作成するには、次の手順を行います。
- サイトでの Google Pay API のサポートを記述する JavaScript オブジェクトを作成します。サポートされているプロパティの一覧については、PaymentDataRequestをご覧ください。次のコードサンプルを参照してください。const paymentDataRequest = Object.assign({}, baseRequest); 
- レスポンスで期待される追加データの構成など、アプリでサポートされているお支払い方法を追加します。次のコードサンプルを参照してください。paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod]; 
- 買い物客に提示する合計金額と通貨を定義します。次のコードサンプルをご覧ください。
paymentDataRequest.transactionInfo = { totalPriceStatus: 'FINAL', totalPrice: '123.45', currencyCode: 'USD', countryCode: 'US' }; 
- ユーザーに表示される販売者名を入力し、TESTでTESTmerchantId値を使用します。TESTmerchantId値を置き換える場合の詳細については、MerchantInfoをご覧ください。 ユーザーに表示される販売者名のコードサンプルは、次のとおりです。paymentDataRequest.merchantInfo = { merchantName: 'Example Merchant' merchantId: '12345678901234567890' }; 
ステップ 9: ユーザー ジェスチャーのイベント ハンドラを登録する
ユーザー ジェスチャーのイベント ハンドラを登録するには、次の手順を行います。
- 購入ボタンのクリック イベント ハンドラを登録します。Google Pay 支払いボタンがクリックされた直後に、イベント ハンドラが loadPaymentData()を呼び出します。
- Google ユーザーから、ユーザーが選択した支払い方法と連絡先に関する情報を取得することについて許可が得られたら、Google Pay API からのレスポンスを処理します。
- paymentDataレスポンスから支払いトークンを抽出します。ゲートウェイ統合を実装する場合は、このトークンをそのままゲートウェイに渡します。- paymentsClient.loadPaymentData(paymentDataRequest).then(function(paymentData){ // if using gateway tokenization, pass this token without modification paymentToken = paymentData.paymentMethodData.tokenizationData.token; }).catch(function(err){ // show error in developer console for debugging console.error(err); }); 
ステップ 10(省略可): ユーザーが操作を行う前に支払いデータをプリフェッチする
実行時間を短縮するには、loadPaymentData() を呼び出す前に Google Pay API からウェブサイトの支払い構成をプリフェッチします。次の例をご覧ください。
paymentsClient.prefetchPaymentData(paymentDataRequest);
ステップ 11(省略可): 支払い承認を設定する
支払い承認は、支払いプロセスを開始し、支払いの承認ステータスを確認するために使用されます。支払い承認を設定する手順は次のとおりです。
- PaymentOptionsで- onPaymentAuthorized()コールバックを登録します。
- PAYMENT_AUTHORIZATIONコールバック インテントを指定して- loadPaymentData()関数を呼び出します。
- onPaymentAuthorized()を実装します。
onPaymentAuthorized コールバックを登録する
次のコードサンプルは、onPaymentAuthorized コールバックを登録する方法を示しています。
{ environment: "TEST", merchantInfo: { merchantName: "Example Merchant", merchantId: "12345678901234567890" }, paymentDataCallbacks: { onPaymentAuthorized: onPaymentAuthorized } }
コールバック インテントで支払いデータを読み込む
次のコード例は、支払い承認つきで支払いシートを初期化する方法を示しています。
const paymentDataRequest = Object.assign({}, baseRequest); paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod]; paymentDataRequest.transactionInfo = getGoogleTransactionInfo(); paymentDataRequest.merchantInfo = { merchantName: 'Example Merchant' merchantId: '12345678901234567890', }; paymentDataRequest.callbackIntents = ["PAYMENT_AUTHORIZATION"];
onPaymentAuthorized コールバックを処理する
支払人がユーザー ジェスチャーを使用して支払いを承認すると([お支払い] をクリックした場合など)、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(配送が有効な場合向け、省略可): 動的料金設定の更新を設定する
動的料金設定の更新では、選択した配送先住所に基づいて配送オプションや取引情報を動的に更新できます。また、選択した配送オプションに基づいて取引情報を動的に更新することもできます。
動的料金設定の更新を設定するには、次の手順を行います。
- PaymentOptionsで- onPaymentAuthorizedと- onPaymentDataChangedの両方のコールバックを登録します。
- コールバック インテントを指定して loadPaymentData()関数を呼び出します。詳しくは、対応するサンプルをご覧ください。
- onPaymentAuthorizedと- onPaymentDataChangedを実装します。
PaymentData コールバックを登録する
次のコードサンプルは、動的料金設定の更新を実装するには PaymentsClient の paymentOptions オブジェクトにコールバック関数を登録する必要があることを示しています。
{ environment: "TEST", merchantInfo: { merchantName: "Example Merchant", merchantId: "12345678901234567890" }, paymentDataCallbacks: { onPaymentAuthorized: onPaymentAuthorized, onPaymentDataChanged: onPaymentDataChanged } }
コールバック インテントで支払いデータを読み込む
次のコードサンプルは、支払いシートの初期化に際して、配送先住所と配送オプションの構成が必要であることを示しています。
const paymentDataRequest = Object.assign({}, baseRequest); paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod]; paymentDataRequest.transactionInfo = getGoogleTransactionInfo(); paymentDataRequest.merchantInfo = { merchantId: '12345678901234567890', merchantName: 'Example Merchant' }; paymentDataRequest.callbackIntents = ["SHIPPING_ADDRESS", "SHIPPING_OPTION", "PAYMENT_AUTHORIZATION"]; paymentDataRequest.shippingAddressRequired = true; paymentDataRequest.shippingAddressParameters = getGoogleShippingAddressParameters(); paymentDataRequest.shippingOptionRequired = true;
onPaymentDataChanged コールバックを処理する
onPaymentDataChanged コールバックの呼び出し時には IntermediatePaymentData オブジェクトが渡されます。このオブジェクトには、支払いシートで選択された配送先住所と配送オプションが含まれます。
このコールバックは Promise<PaymentDataRequestUpdate> を返します。PaymentDataRequestUpdate オブジェクトには、新しい取引情報、配送オプション、支払いデータエラーが含まれます。このデータを使用して支払シートが更新されます。
配送先住所や配送方法が無効な場合など、例外が発生した場合は支払いシートで直接処理してください。PaymentDataError オブジェクトを設定し、エラーの理由とユーザーに表示されるエラー メッセージを指定します。メッセージには関連するインテントを含めてください。オブジェクトとメッセージの設定方法の詳細については、次のコード例をご覧ください。
function onPaymentDataChanged(intermediatePaymentData) { return new Promise(function(resolve, reject) { let shippingAddress = intermediatePaymentData.shippingAddress; let shippingOptionData = intermediatePaymentData.shippingOptionData; let paymentDataRequestUpdate = {}; if (intermediatePaymentData.callbackTrigger == "INITIALIZE" || intermediatePaymentData.callbackTrigger == "SHIPPING_ADDRESS") { if(shippingAddress.administrativeArea == "NJ") { paymentDataRequestUpdate.error = getGoogleUnserviceableAddressError(); } else { paymentDataRequestUpdate.newShippingOptionParameters = getGoogleDefaultShippingOptions(); let selectedShippingOptionId = paymentDataRequestUpdate.newShippingOptionParameters.defaultSelectedOptionId; paymentDataRequestUpdate.newTransactionInfo = calculateNewTransactionInfo(selectedShippingOptionId); } } else if (intermediatePaymentData.callbackTrigger == "SHIPPING_OPTION") { paymentDataRequestUpdate.newTransactionInfo = calculateNewTransactionInfo(shippingOptionData.id); } resolve(paymentDataRequestUpdate); }); }
ステップ 13(プロモーション コード向け、省略可): プロモーション コードを設定する
プロモーション コードを使用すると、提供されたプロモーション コードに基づいて配送オプションや取引情報を動的に更新できます。
プロモーション コードを設定するには、次の手順に従います。
- PaymentOptionsで- onPaymentDataChangedコールバックを登録します。
- コールバック インテントを指定して loadPaymentData()関数を呼び出します。詳しくは、対応するサンプルをご覧ください。
- onPaymentDataChanged callback functionを実装します。
OFFER コールバックの登録
次のコードサンプルは、プロモーション コードを実装するには PaymentsClient の paymentOptions オブジェクトにコールバック関数を登録する必要があることを示しています。
{ environment: "TEST", merchantInfo: { merchantName: "Example Merchant", merchantId: "12345678901234567890" }, paymentDataCallbacks: { onPaymentDataChanged: onPaymentDataChanged } }
コールバック インテントで支払いデータを読み込む
次のコードサンプルは、OFFER コールバック インテントを使用して支払いシートを初期化する方法を示しています。
const paymentDataRequest = Object.assign({}, baseRequest); paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod]; paymentDataRequest.transactionInfo = getGoogleTransactionInfo(); paymentDataRequest.merchantInfo = { merchantId: '12345678901234567890', merchantName: 'Example Merchant' }; paymentDataRequest.callbackIntents = ["OFFER"];
onPaymentDataChanged コールバックを処理する
onPaymentDataChanged コールバックの呼び出し時には IntermediatePaymentData オブジェクトが渡されます。このオブジェクトには、支払いシートで選択された配送先住所と配送オプションが含まれます。
このコールバックは Promise<PaymentDataRequestUpdate> を返す必要があります。PaymentDataRequestUpdate オブジェクトには、新しい取引情報、配送オプション、特典データ、支払いデータエラーが含まれます。このデータを使用して支払シートが更新されます。
プロモーション コードが無効な場合など、例外が発生した場合は支払いシートで直接処理してください。PaymentDataError オブジェクトを設定し、エラーの理由とユーザーに表示されるエラー メッセージを指定します。メッセージには関連するインテントを含めてください。オブジェクトとメッセージの設定方法の詳細については、次のコードサンプルをご覧ください。このコードサンプルではプロモーション コード値を含むオブジェクト(validPromoCodes)を参照しています。
function onPaymentDataChanged(intermediatePaymentData) { return new Promise(function(resolve, reject) { let redemptionCodes = []; let shippingOptionData = intermediatePaymentData.shippingOptionData; let paymentDataRequestUpdate = {}; paymentDataRequestUpdate.newTransactionInfo = getGoogleTransactionInfo(); // ensure that promo codes set is unique if(typeof intermediatePaymentData.offerData != 'undefined') { // convert to set then back to array redemptionCodes = Array.from( new Set(intermediatePaymentData.offerData.redemptionCodes) ); } // OPTIONAL: ensure that the newest promo code is the only one applied // redemptionCodes = new Array(redemptionCodes[redemptionCodes.length -1]); // validate promo codes and add descriptions to payment sheet if (intermediatePaymentData.callbackTrigger === 'OFFER') { paymentDataRequestUpdate.newOfferInfo = {}; paymentDataRequestUpdate.newOfferInfo.offers = []; for (redemptionCode of redemptionCodes) { if (validPromoCodes[redemptionCode]) { paymentDataRequestUpdate = validPromoCodes[redemptionCode].function( validPromoCodes[redemptionCode], paymentDataRequestUpdate ); } else { paymentDataRequestUpdate.error = getGoogleOfferInvalidError(redemptionCode); } } }
まとめ
このセクションのコードブロックの例は、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>