体験を伝える―『ガジェット通信』の考え方

面白いものを探しにいこう 本物を体験し体感しよう 会いたい人に会いに行こう 見たことのないものを見に行こう そしてそれをやわらかくみんなに伝えよう [→ガジェ通についてもっと詳しく] [→ガジェット通信フロアについて]

これからのWebエンジニアの必須スキル!?「Payment」の実情と実装できる技術を一挙紹介

Web Payment Browser API(Payment Request API)を実装する

最初に登壇したのは、Google Developer Advocateの北村英志さん。
セッションタイトルは「はじめてのWeb Payments」。

Google Developer Advocate / 北村 英志さん

ECサイトで何か商品を購入したとする。表示されたフォームには、配送するのであれば住所、また支払いについてはカード情報を入力するなど、一般的なeコマースでは何かしらの情報をサイトに提供しなければならない。

しかし、スマートフォンのソフトウェアキーボードで文字を入力するのは大変。そのニーズを解決するため、ブラウザにはオートフィルという機能があるが、サイトによってフォームの組み合わせがまちまちで上手くはまってくれないという状況がある。

Chromeでは、過去にフォームで送信した内容がオートフィルに用いられるが、設定画面でアドレスやクレジットカードの情報を編集することもでき、その情報がオートフィルで利用されることになる。

autocomplete属性を使えば、あらかじめ決まった構造にピタッとマッチするような正確なオートフィルが可能になる(※参考記事)。ECサイトのベストプラクティスとして覚えてほしい。

Web Paymentsとはいくつかある仕様の集合体。今日はWeb Payment Browser API(Payment Request API)とWeb Payment Applications(Payment Handler API)について説明する。中でもPayment Request APIは非常にホットな話題となっている。

Payment Request APIとは支払いのための新しいWeb標準。支払い専用のUIを提供する。オープンな仕様で、支払い方法そのものではない。フォームの代わりのもの。これを介してサイトは正確な情報を受け取る。

オートフィルを活用することで、支払い情報の構造を強制することで、ユーザーは住所やクレジットカードの情報をタイプしなくてもタップするだけで呼び出すことができる。

対応済みのブラウザとしては、Android Chromeのバージョン53以降。API的にも安定している。今デスクトップ版を開発中でまもなく登場予定。ほかのブラウザも続々と対応している。例えばSamsung Internetはすでに利用可能。

Microsoft Edgeも対応予定で、Insider Buildでβ利用可能(最近のCreators Updateで正式版でも利用可能になりました)。Apple Safariは独自仕様のApple Pay JSを提供しているため、インターフェースは似ているが対応していない。さらにFacebookはアプリのWebViewに実装を予定している。

1 2 3 4 5 6次のページ
CodeIQ MAGAZINEの記事一覧をみる
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。