Google Pay API + Payment Request APIの実装方法

Google Pay APIには2つのUIがあります。 (1) Google Payだけを使う方法と、(2) Google Pay APIをPayment Request API経由で使う方法です。 今回は後者 (2) のお話。

少額決済は変化の激しい分野のせいもあって、記事もよく間違ってる。 最も信用できるのは以下のリファレンスである。 本来ならGoogle Pay APIに限らずすべてに言える事だと思うけど、少額決済は特に注意が必要。 この記事は現時点では可能な限り間違いがないよう書いたつもりだけど、いずれ陳腐化すると思います。 動かなくなっていたらリファレンスを参照して変更点を修正しましょう。 これが今回一番言いたかった事。

• Object reference  |  Google Pay API  |  Google Developers

リファレンスを見よ、といっても紹介記事をベースにとりあえず動かして作ってみるのは、初心者には良い方法です。 今のところこの記事 (最終更新日: 2018-10-11) が最もハマりにくく、ベースになる記事だと思う。 ただこれも動かないので、この記事を良い感じに動かすための、現時点の方法を書いておきます。

このサンプルで間違ってるのは、今のところ以下の決済メソッドの定義だけです。

var supportedInstruments = [{
  supportedMethods: [
    'visa', 'mastercard', 'amex', 'discover', 'maestro',
    'diners', 'jcb', 'unionpay', 'bitcoin'
  ]
}];

まずbitcoinにはまだ対応していない。 dinersやonionpayも対応していないように見えるのだがどうなのだろうか。 とりあえず残しておくとAPIに怒られるので除去する。 指定の仕方も、以前は小文字でも動いたのですが、今は大文字じゃないと動きません。 対応していないカードを入力するとAPIに怒られて一定時間利用を止められる。つらい。

Google Payが日本でサポートしているカードは、店舗での購入時のサポートカードのページを見れば良さそうな気はしている。 あと海外のGoogle Payが対応しているか、Chromeが対応しているか、為替が対応しているか、決済プロセッサーが対応しているか (ex: Stripeのサポート状況) が関わってくるので、それらのANDを取るようにする。 リファレンスやGoogle以外のドキュメント、W3CのPayment Request APIの記述を見ると以下のような指定が良さそうである。 ちなみにJCBは日本だけ、DISCOVERは米国だけの対応となる。

var supportedInstruments = [{
    supportedMethods: ['basic-card'],
    data: {
      supportedNetworks: [
        'VISA', 'MASTERCARD', 'AMEX', 'DISCOVER', 'JCB'
      ]
    }
}];

他にもチュートリアルを参考にすると、支払い方法にGoogle Payを指定する事ができる。 これはGoogle Payに記憶したカードで決済する方法である。

var supportedInstruments = [{
  supportedMethods: 'https://google.com/pay',
  data: {  // 長いので省略
  }
}];

data内の書き方を補足すると、Google Payのゲートウェイを通じて決済するという事になるので、PAYMENT_GATEWAYの指定が必要になってきます。

そしてこの指定の仕方も、やってみる系の記事では色々な方法が書かれていて、どれが正しいのか凄くわかりにくい。 仕様変更後に書かれたGoogleの中の人の記事でさえ間違ってるし、記事通りに間違えるとAPIを短時間だけど止められる。つらい。 何度も言うようですが正しいのはリファレンス。 とりあえず執筆時点で動いていたのは以下です。

const supportedInstruments = [{
  supportedMethods: 'https://google.com/pay',
  data: {
    environment: 'TEST', apiVersion: 2, apiVersionMinor: 0,
    merchantInfo: { merchantName: 'Example Merchant' },
    allowedPaymentMethods: [{
      type: 'CARD',
      parameters: {
        allowedAuthMethods: allowedCardAuthMethods,
        allowedCardNetworks: allowedCardNetworks
      },
      tokenizationSpecification: {
        type: 'PAYMENT_GATEWAY', parameters: gatewayParameters
      },
    }],
  }
}];
const request = new PaymentRequest(supportedInstruments, details, options);

記載を省略している部分についてはここを参考にして欲しい。 ここまでの内容で一応は決済ができる直前のところまでは動くようになったはずです。 あとはPaymentRequestの実際の処理を書いていく必要があるのですが、ここは依存性が強いので省略します。 私はそこに到達するまでのほうがハマりまくったので、このようなメモを残しておく事にしました。



あとこれは自分用のメモなんですが、私はURL指定はプラットフォーマーがかなり有利な仕組みと思っていたのですが、W3CにおけるGithubでの議論を見ていて代替案に気が付きました。 basic-cardではなくtokenized-cardというプロパティが使えるらしい。 これはどうやらtokenを発行している業者を経由して決済するためのプロパティのようです。 ただ現時点では使える業者がよくわからない。