Microsoft Edge で Web Payments を試す（Windows 10 Insider Build 14316）

Web Payments API の仕様が変更されました。

修正したサンプル
https://github.com/ToshihiroGoto/WebPayments/blob/gh-pages/index.html

そのため、以下のサンプルでは動作しません。

Insider Build 14316 で使用可能になったため、以前のビルドでは動作しません。

結論から申し上げますと、完全に動作しません。
Microsoft Wallet での決済サービスがまだ提供されていないため、動作が止まるか、エラーが返ります。

ざっくりとした説明

ブラウザからクレジットカードやその他支払いサービスの決済方法の登録、開始、完了までの一連を定義し、安全でスピーディな決済を行う API。

仕様をざっくり見た感じですと、決済用の処理をブラウザ側でつくり、支払いなどはサーバ側のサイトに委ねる様な感じだと思われます。
Paypal の支払いのような感じでしょうか。

Microsoft Edge の場合、デフォルトでは現状 Microsoft Wallet と結びつくようになるようです。

Microsoft Wallet のページ

f:id:x67x6fx74x6f:20160413152646p:plain

準備

試験的機能ですので、アドレスバーに about:flags を入力し、開発者向け設定の1番下 Web Payments の「Enable experimental Web Payments API」のチェックをオンにしてください。

f:id:x67x6fx74x6f:20160413152527p:plain

一応、サンプル

最初の then の complete を通らずにエラーをキャッチしてしまいます。
もしかすると PaymentRequest の書き方が悪いだけかもしれません。

       var request = new PaymentRequest(
            ['visa','mc','amex',"jcb"],
            {
                items: [
                    {
                        id: "basket", label: "合計（税抜き）",
                        amount: { currencyCode: "JPY", value: "10000" }
                    },
                    {
                        id: "shipping", label: "送料無料",
                        amount: { currencyCode: "JPY", value: "0"}
                    },
                    {
                        id: "tax", label: "消費税",
                        amount: { currencyCode: "JPY", value: "800" }
                    },
                    {
                        id: "total", label: "合計（税込み）",
                        amount: { currencyCode: "JPY", value: "10800" }
                    }
                ],
                shippingOptions: [
                { id: "free", label: "FREE shipping", amount: { currencyCode: "USD", value: "0.00" } }
                ]
            },
            { requestShipping:true }
        );

        request.show()
            .then(function(response) {
                console.log("処理中")
                return response.complete(true);
            })
            .then(function() {
                alert("購入完了");
            })
            .catch(function(e) {
                alert("エラー： " + e.name);
            });

サンプルページ

支払いの実行を呼び出す PaymentRequest でオブジェクトを送ります。
オブジェクトの最初の配列はクレジットカードの種類、
次は、商品情報とオプションに物理的な商品を送る設定がされています。

PaymentRequest を設定し show() を行い Promise で結果を取得。実行すると、別窓が開き Microsoft Wallet につながります。
その後は、エラーが起こり今回はこれ以上動作しません。

f:id:x67x6fx74x6f:20160413161111p:plain

動作時の振る舞いに対してのメソッドがありますが動作しないため今回省きます。

まとめ

商品の支払い等を API 経由で他のサービスを使用します。
Microsoft のアカウントに紐づいた Microsoft Wallet にクレジットカード等が登録されていれば、ユーザーはサイトごとに面倒なクレジットカードの登録をしなくて済むことになります。

また、開発者はショッピングカートのお金に関する部分はつくる必要性がなりそうですし、ユーザーはネット上で何かを買うという行動が、スマートフォンのストアのようにアカウントに紐づいて買うことができることとなります。
（ガラケーのキャリア決済的なものがやっと Web サイトでもできそうな感じです）

Windows Hello と組み合わせたら、更に便利になるのではと期待しております。

補足

使用できるクレジットカードの種類

現状の仕様ではこちらになるようです。

設定文字	説明
visa	Visa (クレジット/デビット/エレクトロン)
visa/credit	Visa クレジットカード
visa/debit	Visa デビットカード
visa/electron	Visa エレクトロン
mastercard	MasterCard (+ EuroCard)
mastercard/credit	MasterCard クレジットカード
mastercard/debit	MasterCard デビットカード
amex	American Express
discover	Discover
maestro	Maestro
diners	Diners Club
jcb	JCB
unionpay	UnionPay (銀聯)
unionpay/credit	UnionPay (銀聯) クレジットカード
unionpay/debit	UnionPay (銀聯) デビットカード