よりシンプルな Web の決済方法 : Payment Request API の紹介

Microsoft Edge での Payment Request API のプレビュー実装を導入することに興奮しています。これは Windows 10 の PC や携帯電話で Web 上で簡単なチェックアウトと支払いを可能にします。安定したビルドでの Payment Request のサポートは、来年早々に更新される Creators Update の EdgeHTML 15 からです。

Payment Request は Windows 10 の PC や携帯電話上の Microsoft Wallet と一緒に動作し、e コマースを顧客や販売者むけに迅速でシンプルなものにします。Payment Request API の開発は現在、Windows Insider Preview build 14986 上の Microsoft Edge から開始することができます。エンドツーエンドのテストを可能にする Microsoft Wallet のユーザーエクスペリエンスは、近日中のインサイダービルドで利用できるようになります。

チェック アウト フローのコンバージョン率は、e コマース サイトのための重要な指標です。e コマースの買い物客の 46% は、支払い段階の間の複雑で冗長なデータの再入力や、支払い情報の追跡 への不満によりチェックアウトプロセスを放棄します。(翻訳者註: tracking down = 追跡としましたが他にふさわしい表現があるかもしれません)
チェック アウトの成功率がわずかな増加でも、顧客のショッピング体験を向上させ、サイトのボトムラインに直接影響を与えます。

Microsoft Edge では、Payment Request API は Microsoft Wallet (ユーザーの権限) に接続し、ユーザーの Microsoft アカウントに関連付けられた支払い情報に簡単にアクセスできるようにします。お支払い情報はデジタルウォレットに安全に保存されるため、買い物客は、従来のチェックアウトフローをナビゲートして、同じ支払いと配送先住所情報を繰り返し入力する必要はありません。ウォレットは、Web サイト間でより速く、一貫性のあるエクスペリエンスを提供し、保存された支払い情報を安全に共有できるようにすることで、買い物客の時間と労力を節約できます。

どのように動作するのか?

ユーザーのためのより良い経験と、単一の一貫した API を開発者に提供するために、販売者、ブラウザーと支払い方法全体でコミュニケーションを標準化することを目的として、マイクロソフトと W3C Web Payments ワーキング グループの他のメンバーはAPIを設計しました。

Payment Request API では、支払い情報は、Web サイトのチェックアウトフォームを介して収集されるのではなく、(ユーザーが承認を付与した後) wallet によって提供されます。ブラウザーは、wallet と販売者の間で渡されるすべての情報を仲介します。

Payment Request API をサンプルサイトに実装する方法を見てみましょう。

コンストラクタ

まず、コンス トラクタを使用します。Payment Request オブジェクトは、次のパラメータを渡すことによって構築されます。

• methodData: 支払方法の識別子と関連するデータを含むディクショナリの配列; 支払方法の識別子は、サポートされている支払方法を識別する文字列です。
• details: 注文の品目など、トランザクションの情報
• options: ウォレットが収集する必要がある追加情報

上記のスニペットでは、ユーザーが Visa、MasterCard、または Amex のネットワークに属するデビットまたはクレジットのいずれかで支払うことができます。詳細オブジェクトには、代金、消費税、および合計の支払額が含まれます。これらの詳細は、ウォレットのユーザーに表示されます。APIはアイテムを追加したり、売上税を計算したりしないことに注意してください – 正しい情報を提供するのは販売者の責任です。
この例では、我々は物理的な商品を販売しているので、顧客の配送先住所を収集するためにウォレットに尋ねています。

UIの表示、支払いの処理、結果を表示する

Payment Request オブジェクトが作成されると、request.show () でウォレットを表示するようにブラウザをトリガーすることができます。Microsoft Edge では、このユーザーに Microsoft Wallet からのチェックアウトダイアログボックスが表示されます。:

カスタマーは、適切な支払情報、送付先住所、およびその他のフィールドを選択し、準備ができたら [Pay] ボタンをクリックすることができます。この時点で、ユーザーは識別を確認する必要があるでしょう。成功した場合、これは request.show () プロミスを満たし、カスタマーがウォレットに提供したすべての情報をウェブサイトに返します。基本的なカード決済方法については、結果オブジェクトにカード名義、カード番号、有効期限、その他の関連項目が含まれます。販売者はバックエンドでトランザクションを処理するのにこの情報を使用できます。

応答がサーバーから戻った後、result.complete(‘success’)を使用してウォレットに成功画面を表示し、失敗したトランザクションを示す result.complete(‘fail’) を表示できます。

イベントのリッスン

価格は顧客が選択した配送先住所と配送オプションによって変わる場合があります。これらの変更を shippingaddresschange と shippingoptionchange イベントで聴くことができ、それに応じて価格を再計算します。

機能の検出

サイトは、Payment Request API の検出機能を備え、利用可能でない場合は従来のフォームベースのエクスペリエンスに転送することができます。

このコードの最小限の実装の例を次に示します。

テストと可用性

支払い要求 API は、電話とデスクトップで最新の Windows インサイダープレビューリリース (14986 以上) で始まるデフォルトでオンになっています。エンドツーエンドのテストを可能にする Microsoft ウォレットユーザーエクスペリエンスは、近日中のインサイダービルドで利用できるようになります。このプレビュー期間中、Microsoft ウォレットの基本的なカードの支払い方法の応答は、PCI の制約に対処することがなく初期統合テストを行う開発者を支援するための偽の支払いカードの応答になります。

来春から、API は実際の支払いカードの応答を返すようになります。最初に、ウォレットは米国の課金と配送先住所と英語 (en-US ロケール) をサポートします。その他の地域と言語のサポートは、2017 年に追加されます。

まとめ

Microsoft ウォレットと Payment Request API 組み合わせは、Web 上のチェックアウトのコンバージョンを改善し、顧客により快適で便利なショッピング体験を提供する強力なツールを販売者に提供します。この API は、Web プラットフォームのパワーと柔軟性の偉大な例であり、 Chrome  54 から始まる API をサポートした Android 用 Chrome との広範な相互運用性への道のりです。

Microsoft edge の Payment Request API の詳細と完全なドキュメントは、Microsoft Edge Dev の Payment Request デベロッパーガイド、および MSDN の Payment Request API リファレンスでご利用いただけます。Windows インサイダープログラムに参加するか、 Microsoft Edge Dev から PC 用もしくは Mac 用のプレビュー仮想マシンをダウンロードすることによって Payment Request やその他の EdgeHTML15 の新しい機能をプレビューすることができます。

問題が発生した場合は、bugs.microsoftedge.com にバグをファイルしたり、twitter の @MSEdgeDev で私たちとつながることができます。私達はあなたからのヒアリングを楽しみにしています!

― Andy Pavia, Program Manager, Microsoft Edge

Updated December 16, 2016 10:05 am