読者です 読者をやめる 読者になる 読者になる

Browser

Microsoft Edge(Project Spartan, Internet Explorer) 、ブラウザ周辺、Web フロントエンド開発、UI、など

Microsoft Edge まとめページ

Microsoft Edge で Web Payments を試す(Windows 10 Insider Build 14316)

Microsoft Edge Windows 開発 JavaScript

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 (銀聯) デビットカード

 

通貨

仕様的には通貨は ISO 4217 でのコードの指定となっています。
今回のサンプルでは JPY で日本円ですが、USD にすると米国ドルという扱いになるようです。

ISO 4217 - Wikipedia

 

 

参考資料

仕様

W3C Web Payments Working Group / Browser Payment API Specifications
Specifications - Editor's Drafts

https://w3c.github.io/browser-payment-api/

 

その他

W3Cがウェブペイメントの効率的なチェックアウトを実現する標準化活動へ本格参入

https://www.w3.org/2015/09/webpaymentswg.html.ja

スポンサーリンク