Google Payのトークン取得

MpToken.js では Google Pay トークンを取得する機能も提供しています。
カード情報は当サービスではなく Google Pay によってトークン化されます。

備考

Google Pay決済サービスについてはこちらを参照してください。

処理フロー

mulpay.createPaymentRequest(argsForGoogle)

Google Payの支払い情報を作成するメソッドです。

項目	必須	型	説明
`merchantName`	✓	string	加盟店名
`currency`	✓	string	通貨（例: `"JPY"`）
`country`		string	国（例: `"JP"`）
`total`	✓	string	金額

mulpay.checkAvailability()

Google Payの利用可否をチェックするメソッドです。トークン取得前に必ず実行してください。

返り値:

項目	型	説明
`googlePayAvailable`	boolean	`true` で利用可能

mulpay.googlePayClient.createButton(options)

Google Payの支払いボタンを生成するメソッドです。 Google Payの支払いボタンは、トークン決済v2独自のUI部品ではありません。
Google Pay Web APIが提供するcreateButton()を利用して表示します。

表示手順は以下のとおりです。

mulpay.checkAvailability()を実行して、Google Payの利用可否を確認する
利用可能な場合のみ、初期化済みの mulpay.googlePayClient から Google Pay Web API の createButton() を呼び出し、ボタンを表示する
ボタンクリック時にmulpay.fetchEncryptedTokenObject(...)を実行して、Encrypted Token Objectを取得する

注意事項

createButton()はGoogle Pay Web APIのメソッドです。
ボタンの色・種別・角丸などは、Google Payのブランドガイドラインに従って設定してください。
ボタン表示前に、必ずmulpay.checkAvailability()を実行してください。

mulpay.fetchEncryptedTokenObject(paymentRequest)

Google Payのトークンを取得するメソッドです。

引数	型	説明
`paymentRequest`	object	`createPaymentRequest()` の返り値

サンプルコード（Google Pay）

htmlサンプルコード

<!doctype html>
<html>
<head>
    <title>Google Pay の利用サンプル</title>
    <script async src="https://pay.google.com/gp/p/js/pay.js"></script>
    <script type="module" src='./useMpToken.js'></script>
</head>
<body>
    <h1>Google Pay</h1>
    <!-- Google Pay ボタン表示領域 -->
    <div id="google-pay-btn"></div>
    <!-- トークン取得結果を表示するための要素 -->
    <div id="result"></div>
</body>
</html>

JavaScriptサンプルコード(useMpToken.js)

import { loadMulpay } from "@mul-pay/mptoken-js"; // Multipaymentオブジェクトを初期化するためのメソッドをインポートする

// Google Payのトークンを取得するための引数を設定する
const argsForGoogle = {
    merchantName: "merchant name", // 購入者を設定する
    currency: "JPY", // 通貨を設定する
    country: "JP", // 国を設定する
    total: "1000", // 金額を設定する
};

window.addEventListener("load", async () => {
    const apiKey = "ec9946c42bbbef17658f0bea238f8dacac8d91ab15071fdf4d7b8cce70ce1ed4"; // apiKeyを設定する
    const publicKey = "pub_key"; // 公開鍵を設定する
    const ids = {
    googlePayMerchantId: "google_merchant_id",
    }; // Google PayのmerchantIdを設定する

    const mulpay = await loadMulpay(apiKey, publicKey, ids); // Multipaymentオブジェクトを初期化する
    // Google Payの支払い情報を作成する
    const paymentRequestForGoogle = mulpay.createPaymentRequest(argsForGoogle);
    // Google Payが利用可能かどうかをチェックする
    const { googlePayAvailable } = await mulpay.checkAvailability();
    // Google Payが利用可能な場合、Google Payボタンを表示する
    if (googlePayAvailable) {
        const container = document.getElementById("google-pay-btn");
        // Google Pay ボタンを作成して表示
        const googlePayButton = mulpay.googlePayClient.createButton({
            buttonColor: "default",
            buttonType: "buy",
            buttonRadius: 4,
            onClick: async () => {
                // Encrypted Token Object を取得
                const encryptedTokenObject = await mulpay.fetchEncryptedTokenObject(
                  paymentRequestForGoogle
                );
            },
            allowedPaymentMethods:
            paymentRequestForGoogle.allowedPaymentMethods, // 確認済みの支払い方法を適用
        });
        container.appendChild(googlePayButton);
    }
});

処理フロー​

mulpay.createPaymentRequest(argsForGoogle)​

mulpay.checkAvailability()​

mulpay.googlePayClient.createButton(options)​

mulpay.fetchEncryptedTokenObject(paymentRequest)​

サンプルコード（Google Pay）​

htmlサンプルコード​

JavaScriptサンプルコード(useMpToken.js)​