Web決済をスムーズにするPayment Request API

コロナ禍になってEコマースが成長していたり、アプリ内課金の仕組みが変わろうとするなど、決済を巡る動きが加速しています。

Web決済と言えばPayment Request APIが有名ですが、この記事ではその実装や技術的な解説を行います。

Payment Request APIでできること、できないこと

Payment Request APIは、Webブラウザ内に保存されている決済情報を取得できるAPIになります。

取得できる情報は次の通りです。

決済情報
配送先住所
決裁者の名前やメールアドレス

つまり、Payment Request APIで取得できるのは単純な決済情報だけになります。実際の決済は別途システム側で行う必要があります。

クレジットカード情報は取得できなくなります

Google Chrome 100より、決済情報取得の際に利用していた basic-card が指定できなくなります。従来、この指定でカード情報が取得できていましたが、セキュリティやユーザ体験として課題があるため、使えなくなります。iOS版Chromeでは、この変更に伴ってPayment Request API自体利用できなくなっています。

Google Developers Japan: iOS 版 Chrome の Payment Request を再考する

決済種別について

basic-cardを使ったカード情報が取得できなくなりますので、別途指定が必要になります（W3C標準である点は変わっていませんが、ブラウザがサポートしなくなると使えないのと同義でしょう）。それがPayment Method Identifierです。

たとえば、Google Payを指定する場合には https://google.com/pay を指定します。

他に、下記の決済が知られています。

Apple Pay:
https://apple.com/apple-pay
Samsung Pay:
https://spay.samsung.com/

なお、新しい決済に対応させる場合には3つのファイルが必要になります。詳細はPayment Request APIに独自の支払い方法を追加する | フロントエンドBlog | ミツエーリンクスを参照してください。

実装方法について

Payment Methodsの作成

たとえばGoogle Payに対応する場合です。
まず利用する決済情報を指定します。

const data = {
  environment: "TEST",
  apiVersion: 2,
  apiVersionMinor: 0,
  merchantInfo: {
    merchantId: "12345678901234567890",
    merchantName: "Example Merchant"
  },
  allowedPaymentMethods: [{
    type: "CARD",
    parameters: {
      allowedAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"],
      allowedCardNetworks: ["JCB", "MASTERCARD", "VISA"]
    },
    tokenizationSpecification: {
      type: "PAYMENT_GATEWAY",
      parameters: {
        "gateway": "example",
        "gatewayMerchantId": "exampleGatewayMerchantId"
      }
    }
  }]
};

const paymentMethods = [{
  supportedMethods: "https://google.com/pay",
  data,
}];

商品情報を定義する

購入する商品情報を定義します。

const details = {
  displayItems: [
    {label: "商品1", amount: {currency: "JPY", value: "1000"}},
    {label: "商品2", amount: {currency: "JPY", value: "2000"}},
    {label: "商品3", amount: {currency: "JPY", value: "3000"}},
  ],
  total: {label: "小計", amount: {currency: "JPY", value: "6000"}}
};

返却して欲しい情報を定義します。

const options = {
  requestShipping: true,    // 配送先住所を要求
  requestPayerEmail: true,  // メールアドレスを要求
  requestPayerName: true,   // 決済者名を要求
  requestPayerPhone: true,  // 決済者の電話番号を要求
};

PaymentRequestを作成、表示する

必要な情報を作ったら、PaymentRequestを作成して表示します。

const request = new PaymentRequest(paymentMethods, details, options);
const result = await request.canMakePayment();
const response = await request.show();

// この下でレスポンス情報を使って決済処理を行います

// 完了したらcompleteを呼びます
response.complete("success");

responseは利用するプロバイダーによって異なります。detailsにカード情報が入ってきたり、shippingAddressに住所が返ってきたりします。これは開発する際に確認してください。

役立つ情報

Google Payを使う場合、参考にしたい公式ドキュメントはこちらです。

Google Pay API PaymentRequest チュートリアル | Google Developers

Apple Payを利用する際のデモはこちらです。Payment Request APIも対象となっています。

Apple Pay on the Web Demo

Monacaでの利用について

Payment Request APIはHTTPS環境のみ、かつWkWebViewでは利用できないので、注意してください。Apple PayやGoogle Payが利用できるCordovaプラグインの利用を検討してください（※プラグインはサポート対象外です）。

なお、Payment Request APIにて新しい決済を追加する場合にはmanifest.jsonやService Workerが必要になります。つまり、PWA（Progressive Web Apps）である必要があります。MonacaではPWAアプリも開発できますので、PWAとして開発する場合にはPayment Request APIが利用できるでしょう。