Payment Request APIを試す

Payment Request APIという仕様の策定が進んでいるという話を聞きまして、ちょっと触ってみました。

あまりコードは書いてないですが、ここに置いてあります。

https://joe-noh.github.io/payment_request_api/でも試せるようにしてあります。108円取られそうになりますが、途中で失敗して中断するようになってます。

できること

ECサイトなんかで買い物をするとき、フォームにクレカ番号とか届け先とかを入力すると思いますが、あの辺の情報の入力をブラウザに丸投げできちゃいます。言葉で書くより、以下のページのスクショを眺めたほうが速いと思いますので貼っておきます。

developers.google.com

ここではブラウザの画面で説明されていますが、今後はPCはもちろんもっと多様なデバイスで使えるようになって、夢が広がるねという話。今はAndroid用のChromeの、ver. 53以上でしか使えないようです。なので試す場合はChrome Betaをインストールするなどしましょう。

play.google.com

使い方

まだ完全に仕様が固まったわけでもなさそう（多分）なので、すぐに役に立たなくなりそうですが、試したことや↑の内容を読んでふむふむーと思ったことをメモっておきます。

まずはPaymentRequestのインスタンスをつくります。

var payment = new PaymentRequest(methodData, details);

このとき引数に与えるのは以下の様なデータ。PaymentMethodDataとPaymentDetails。第3引数にPaymentOptionsも渡せますが、これは任意。

// 支払方法についての情報
var methodData = [
    { supportedMethods: ["visa", "mastercard", "bitcoin"] }
];

// お買い物の詳細
var details = {
    displayItems: [
        {
            label: "メロンパン",
            amount: {currency: "JPY", value : "100"}
        },
        {
            label: "消費税",
            amount: {currency: "JPY", value : "8"}
        }
    ],
    total:  {
        label: "合計",
        amount: {currency: "JPY", value : "108"}
    }
};

インスタンスができたら、payment.show()を呼びます。これで画面に以下のようなものが現れます。

f:id:Joe_noh:20160808210529p:plain:w300

注文概要をタップするとこんな感じ。

f:id:Joe_noh:20160808210602p:plain:w300

payment.show()はPromiseを返すので、thenで繋いでその中で結果を受け取ります。

payment.show().then(function(paymentResponse) {
    // ユーザが「お支払い」を押すと、ここへ処理が来る

    paymentResponse.methodName;  // "visa" など
    paymentResponse.details;  // 後述

    // 例えばバックエンドのサーバに送る
    post("https://...", paymentResponse).then(function(res) {
        paymentResponse.complete("success");  // 成功
    }, function(err) {
        paymentResponse.complete("fail");  // 失敗
    });
});

paymentResponse.detailsには、ユーザが入力した支払の詳細が入っていますので、こういったものをバックエンドのサーバに送れば受注完了となるわけです。

{
  "cardholderName": "",
  "cardNumber": "4321123456789999",
  "expiryMonth": "06",
  "expiryYear": "2019",
  "cardSecurityCode": "999",
  "billingAddress": {
    "country": "JP",
    "region": "Tokyo",
    "city": "Shibuya",
    "dependentLocality": "",
    "addressLine": [
      "Shibuya 1-18-21",
      "Shibuya Kuyakusho"
    ],
    "postalCode": "150-8010",
    "sortingCode": "",
    "languageCode": "",
    "organization": "",
    "recipient": "Joe Honzawa",
    "careOf": "",
    "phone": "080-1234-1234"
  }
}

インスタンスつくるときの第3引数は、以下の様なObjectです。メールアドレスや届け先を入力してほしいときに使います。

{
    requestPayerEmail: false,
    requestPayerPhone: true,
    requestShipping: true
}

全部trueにしたのが下の画像。入力項目が増えます。

f:id:Joe_noh:20160808210511p:plain:w300

ここはドキュメントを読んで欲しいのですが、例えば「国内の配送しかしませんよー」とか「離島は送料ちょっと高いよー」みたいなときは、以下のイベントリスナーを設定して、この中でゴニョゴニョします。

payment.addEventListener("shippingaddresschange", function(e) {});
payment.addEventListener("shippingoptionchange", function(e) {});

所感

ネットで買い物するとき、ブラウザ補完が上手くやってくれればサクッと行くこともありますが、結構変なとこに電話番号が入ったり、そもそも用意されている入力フォームが分かりづらかったりして離脱しちゃうとかあるわけです。Payment Request APIを使うと、買い物する人から見れば色んなサイトで色んなフォームに苦しむことなく、補完もバシッと決まってハッピー。ECサイトをやってる人からすれば離脱が減って注文が増えてハッピーというわけですかね。良いことしかないってことも無いでしょうし、業態によっては使えなかったりしそうですが、特にスマホで効いてきそうですし、抑えておくべき仕様だなと思いました。

mmag

ハマったことメモなど

Payment Request APIを試す

できること

使い方

所感