Web Payment Browser API（Payment Request API）を実装する
最初に登壇したのは、Google Developer Advocateの北村英志さん。
セッションタイトルは「はじめてのWeb Payments」。
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に実装を予定している。
Payment Request APIのフローは、ユーザーがサイトで商品を購入する支払いの際にUIが立ち上がり、ユーザーの処理がブラウザに渡される。
住所や支払い方法を選択し、支払いを決定すると情報がJavaScriptに返ってくる。それをPayment Gatewayに送ることで、トークンが発行される。
そのトークンをサーバに送り、もう一度Payment Gateway確認をすると支払いが完了する。住所を必要としない支払いの場合は、すごくシンプルなコードとなる。
続いてPayment Handler APIについて。Payment Request APIでは、サードパーティが支払う方法を自由に追加して、エコシステムに参加することができる。
ユーザーがAndroid PayなどのPayment Requet APIに対応したネイティブPayment Appをインストールしていると、それを使って支払いの処理を行うことができる。
ネイティブのPayment Appはプラットフォームごとの独自仕様になるが、インターフェースはオープンの仕様になる。Android向けを公開に向けて作業中。
もちろんウェブ版のPayment Appも用意している。これはサードパーティーのWebサイトに飛んで支払い処理を行うというもの。標準仕様の策定を目指している。
Service Workerを使っているので、プログレッシブアプリを作る要領でウェブ版Payment Appを作ることができる。
Web PaymentはWeb標準で複数ブラウザがサポートしている。一貫したUXで従来より劇的に手軽な買い物フローが実現する。オープンなエコシステムにより、さまざまな支払い方法が可能になる。
さらに詳細な情報は、以下をチェックしてほしい。
売り手と買い手を仲介！ 安心に買い物ができるサービス「PayPal」
続いて登壇したのは、PayPalの岡村純一さん。
セッションタイトルは「Easy & Secure Payment by Braintree SDK」。
岡村さんはインテグレーションマネジャーとして導入支援や技術サポートなどを行いながら、エバンジェリストとして活動している。個人でもマンガを描いたりもしている。
PayPalは1998年にアメリカで起業された、オンライン用の決済サービス提供会社。日本オフィスは表参道のおしゃれエリアにある。
PayPalは売り手と買い手を仲介して、クレジットカードの情報を渡さずに便利で安心に買い物ができるサービス。世界で約2億人のアクティブユーザーを抱え、年間取扱高は38兆円となっている（2016年時点）。
今回の話はPayPalの新しいSDKはBraintree SDKを使った簡単で安全な決済実装について。Braintreeとは、PayPalのグループ会社のPayment Gateway。PayPalなどのさまざまな支払い方法を一括して受け取れるサービスだが、日本登録のアカウントはまだ作れない。
Braintree SDKはさまざまな決済手段を簡単に導入できるSDKで、PayPal自体もメイン実装手段として活用している。
別プロダクトだが、PayPal部分だけはPayPal環境だけで使えるようになっている。（PayPalだけの利用は日本でもできる）
PayPalとPayment Gatewayの違いは何か。PayPalはデジタルウォレット。アカウントを作成して登録した資金源（クレジットカードや銀行口座）を使って支払いを行ったり、受け取ったりでき、口座残高が持てる。
日本の法律では資金移動業で管轄は金融庁。一方のBraintreeはPayment Gateway。PayPalやクレジットカード、その他の支払いの受け取りを代行する。
口座残高は基本的に持たず（一時預かり）受け取り一方向のみで、日本の法律では収納代行で、経済産業省の管轄となっている。PayPalのようにアカウントを作って支払うというものではない。
PayPalは都度決済や定期支払い、従量課金、マーケットプレイス用決済、送金などに使われている。
新しいPayPalのSDKはたった2ステップの実装で、Web、スマホアプリ同じように決済の導入が可能になる。
- Client SDK：JavaScript/iOS/Android : 決済開始、PayPal画面表示
- Server Side SDK：Java/.Net/Node.js/PHP/Python/Ruby : 決済完了
日本語の公式な情報は鋭意準備している。
公式サイトの例は、Payment Requestと同じような感じ。岡村さん個人のサンプルコードがGitHub上にあるので見てほしい。
Braintree SDKの技術的特徴は、クライアントサイド（JavaScript、モバイル）にシッピングや通貨などのほとんどの実装を寄せていること。また、Tokenization（トークン化）によってセキュリティ担保とサーバ処理の独立・簡素化を実現している。
BraintreeはPayment Request APIと連携できる。Android Payの日本語サイトにわかりやすく紹介されているので、チェックしてほしい。
現実問題、カードの生番号を処理するには、PCIDSSというカード会社のセキュリティ基準に対応している会社しか行えない。だからこそ、決済代行の出番になる。
Android Payの場合はトークンという代理のデータを使って、別のPayment Gatewayで処理できる。
Braintree SDKやRequest Payment APIの特徴の背景は、誰にでもわかりやすい決済導入、実装者に依存しないセキュアな決済である、複数決済手段を導入しやすいことなどが挙げられる。
これらの特徴の目指すところは、決済の民主化。どこかのベンダーにロックインされないということ。
Tokenizationとはカード情報などの機密情報を直接やり取りせず、一時的に引換券（トークン）で行う仕組み。モバイルアプリなのかWebアプリなどUIを考えずに決済できる。
Braintree SDKのTokenizationは、2つのトークンと1つのワンタイムトークンを使っているところが特徴だ。
PaymentにおけるTokenizationの今後の展望について。Android Payで適用されており、Android PayとPayment Gatewayは2種類のつなぎ込みの方法がある。
Android Payで入力したカード情報をトーカナイズして、そのトークンをBraintreeやStripeなどのPayment Gatewayに渡して決済を完了する。
例えばTwitterのトークンはTwitterでしか使えないが、決済の場合はベリサインが発行している証明書のようにパブリックに引き渡して決済のUIと決済を分けるような使い方が期待されている。
つまり、決済の民主化にすごくよい流れとなっている。
決済導入はもはや身近な存在。アイデアがあれば稼げるチャンスはいくらでもある。PayPal User Group（PPUG）も始動しており、ミートアップも開催されている。Facebookページもあるので、興味のある人はぜひチェックしてほしい。
マイクロソフトの夢とビジネスを育てる施策
ここで10分間の休憩。その間に会場を提供してくれた日本マイクロソフト物江修さんのLT「エンジニアよ、大志を抱け！マイクロソフトの夢とビジネスを育てる施策Microsoft BizSparkとMicrosoft Imazine」が行われた。
Microsftでは開発者向けに2つのプログラムを展開している。「Microsoft BizSpark」スタートアップを対象としており、起業時に必要な開発ツールやクラウド環境が1年間無償で使えるプログラム。
参加要件はテクニカルスタートアップで独自のサービスやソフトウェアを開発しており、設立5年未満もしくは法人化を目指している個人事業主、起業家。
そそいて、非上場で年間売り上げが1億2000万円未満。オリジナルドメインのWebサイトを運営していること。起業を考えている人は、ぜひ申し込んでほしい。
もう一つのプログラムが、「Microsoft Imagine」。Microsoft ImagineサブスクリプションとはITスキルの学習や研究をサポートする学生支援のプログラム。
Visual StudioやWindows Server、Microsoft Azure、SQLServerなど、ダウンロードしたものはずっと使える。
簡単にPaymentの仕組みが実装できる「Stripe」
続いて登壇したのは、StripeのDaniel Heffernanさん。ダニエルさんはアイルランド生まれ。2014年にStripeに入社し、ストライプジャパンを設立した。
Stripeは2011年にローンチされたPaymentプラットフォームを提供している会社。資本金は500億円で社員は679人、パートナー企業はAndroid PayやApple Pay、日本では三井住友カードと提携している。
Stripeのミッションは「Increase The GDP of the Internet」。これは新しいビジネスを共にし、そのインフラとなることを目指している。今まで存在しなかったビジネスモデルを可能にして、それに必要なインフラを提供して、GDPの増加に貢献したいということだ。
従来の決済サービス方法はいろいろあるが、Stripeはそれらの従来の決済方法のハードルを解消し、決済代行サービスや加盟店契約、審査、カードブランド、決済方法、海外展開、本人確認、マネーロンダリング大作、不正使用対策、PCI DSS準拠、コンバージョン率などAPI化して提供する。現在、25カ国で使える。
StripeはApple PayやAndroid Payはサポートしており、現在、W3Cのメンバーに入り、Payment Requestの仕様の作成を行っている。
Payment Request APIの対応がないブラウザで使えるようなJavaScriptのStubをGitHubで公開。APIをJavaScriptで実装しているもので、おもしろいものを作っている。
正式発表はまだだが、現在Stripe Elementsという新しい製品のリリースを予定している。同製品はPayment Request APIと同じで決済情報を安全にやり取りするAPI。基本的にWebの中で使えるJavaScriptのライブラリである。
Stripe Elementsのドキュメントページを見ると、決済カード情報が入力できるエレメントがある。カスタマイズ性も高く、まったく異なるフォームでもきれいに出すことができる。
ここでダニエルさんはライブコーディングを実施。Stripe Elements Quick Startページでガイドにしたがってライブコーディング。やり方はこちらのページを参照してほしい。
JP_Stripesというコミュニティも立ち上げている。Stripeについて知りたい人、交流したい人、決済について質問などがある場合は、ぜひ、Facebookページがあるので「#JP_Stripes」をチェックしてみよう。
Web Paymentはこれからの必須スキルになる！
最後の登壇者はStripeの小島英揮さん。セッションタイトルは「今、Online Payment / Cashlessに注目する理由～クラウド時代の決済トレンドとは?」。
決済のデジタル化が浸透している世界と比較して、日本ではまだ現金決済や、請求書→銀行振込といったレガシーなプロセスが根強く残っているといえる。しかし、この状況は2020年に向けて大きく変わっていく「不可避な流れ」がある。
インバウンド需要を取り込むためには、店頭での決済はキャッシュレスが主流になる。現金（しかも日本円）しか扱えない店舗は選択肢から外されてしまうだろう。
つまり店頭ではクレジットカード対応、キャッシュレス対応は不可避になるというわけだ。これまで店頭でのクレジットカードの普及を阻んでいたものの一つが、カード処理（スワイプ）のための装置の設置コスト。
だが、すでにiPadを利用した簡便な装置が登場しているのに加え、最近はSTORES.jp Paymentのような、クレジットカードをスマホで写真に撮ることで（カードスワイプ装置不要で）決済ができるというアプリもある。
この仕組みのバックエンドは、Web Paymentそのものであり、店頭や屋外でのクレカ決済にも簡単に対応ができる。
またもう一つ見逃せないのが、シェアリングエコノミーの流れ。シェアリングエコノミー成功のための重要な要件が、事前決済とキャッシュレス。これがUXを向上するからだ。これがなければ、シェアリングエコノミーはここまで流行らなかったとも言われている。
日本から海外に事業を展開する場合、これまでは自動車とか精密機器など、モノを輸出するのが当たり前だったが、これからは越境ECやSaaSなどデジタルビジネスという新たなカテゴリーでの輸出も考える必要がある。
越境ECのTokyo Otaku Modeでは一点ごとの決済だけでなく、最近は月額のお菓子サブスクリプションサービスや、Tokyo Mirai Mode（クラウドファンディング）などの新しいビジネスモデルも次々と展開している。
SaaSビジネスでは、サブスクリプション課金が世界では主流になってきている。このように海外とビジネスするためには、外貨決済も含めいろんな形態のWeb Paymentを実装することが必須となる。
その一方でB2Cはともかく、B2Bでは日本はクレジットカードによるオンライン決済は利用されていないのではと言われるが、そんなことはない。
例えばクラウドサービスのAWSは、アカウントを開設する時点でクレジットカードの登録が必要。国内の数多くの企業がAWSを利用しているということは、クレジットカード決済が実際は広く受け入れられていることを示している。
デジタルビジネスを進める側からは、クレジットカードによるWeb Paymentは次のようなメリットがある。
- バックオフィス業務がシンプルになる
- サブスクリプションビジネスにもマッチする
- 与信業務から開放されること。取引実績のない顧客や少額ビジネスにも対応できるようになる
- 代金回収にかかる努力が不要になる
- 入金が早い
- キャッシュフローの改善につながる
ただしクレジットカード情報を事業者が自社で管理するのは工数的にもセキュリティ対策的にも大変である。
そこで検討するべきものが決済プラットフォームの利用。そうすることでセキュリティと利便性が向上できる。
（先ほどの）ライブコーディングでも見たとおり、実装もそう難しいものではない。これからはサービス機能の実装だけでなく、Web Paymentのような決済周りの実装ができないとビジネスの競争からも振り落とされてしまうリスクが大きくなる。
実装に必要なドキュメントやナレッジなどはインターネットで学ぶことができる。変化の早いテクノロジーなのでコミュニティで学ぶことをお勧めする。Web Paymentは必須スキルになる。ぜひ、学んでほしいと訴えた。
小島さんが言うように、これからのWeb系エンジニアにとって、Web Paymentの実装スキルは必須になるはず。興味のある人はぜひ、コミュニティに参加するなどして、最新情報をチェックしよう。
今回のセッションを動画で公開中
今回レポートした勉強会のセッション内容は、動画でも公開中。デモなども見ることができるので、より詳しく見たい方は、ぜひ以下から！