３月２４日
html5j Webプラットフォーム部 第16回勉強会
https://html5j-webplat.connpass.com/event/53119/
にいってきて、Webでのpayment関係
（Payment Request APIと
Paypalの新しいSDK（Braintree SDK）、
Formにタグをいてれキャッシュカード対応させるJS Stripe.js等）
について聞いてきたのでメモメモ
HTML5J Webプラットフォーム部 第１６回勉強会
■WebPayments
・自己紹介
フォームによるチェックアウト
何かしらの情報をサイトに提供（例：クレジットカード）
→スマートフォンでの入力
サイトによって保存される情報まちまち
→オートフィル
オートフィルの最適化
INPUTタグにオートコンプリート→ぴたっとはまるように
・Web Payments
複数仕様の集合体
Web Payment Browser API
Web Payment handler API
Payment Request API
・フォームの変わりに、支払い専用UIを表示
さまざまなブラウザが対応
一貫したUX
オープンな仕様
支払い方法そのものではない（あくまでUI)
→住所、クレジットカードの再入力を避ける
・動画でも
payment gatewayにわたせば、支払い
・今後
・Android
・Desktop版 絶賛開発中
・Edge
・ios Safari独自仕様のapple pay JS
・Facebook（Webviewにjsさしこみ
・Paayment Request API
var request
basic-cord
サードパーティが提供していれば使える
WebPayment Apps
１，２ヶ月で面白い話
まとめ
・WebPayment 一貫したUX
Payme
■Es
■Easy
・自己紹介
・Paypalの紹介
paypalの仕組み
売り手と買い手の間を仲介
２億人のアクティブユーザー
・Paypalの新しいSDK Braintree SDK
・Braintreeって？
グループ会社：ペイメントゲートウェイ
SDK
日本アカウントは現在作れない
・Paypal APIの変遷
くらっしく
RestAPI
BraintreeSDK
ホールディングス
・paypalとpayment gatewayの違い
paypal=digital wall金融庁 口座持てる
payment gateway
受け取り側だけサービス 経済産業省
・できること
つど決済
定期支払い
従量課金
マーケットプレイス用決済
送金
・２ステップで実装
Client SDK
ServerSideSDK
・githubにあるからみてね
・技術的特長
Client Side
トーカナイゼーション（トークン化）
BraintreeはPayment RequestAPIと連携できる
PCIDSSを持ってないと、カードの番号を扱えない
・特徴の背景
誰にでもわかりやすい決済導入
実装者に依存しない
複数決済手段の導入のしやすさ
→決済の民主化
・ところでTokenizationって
機密情報を一時的引換券（トークン）でおこなうしくみ
２とのトークンと１つのノンスを利用
・Payment Tokenization
Tokenを引き渡す実装
決済と完了させるサイトをわける
まとめ
・みんなでペイパろー
・PPUG（ぺいぱるゆーざーぐるーぷ）
■LT
Microsoft Bizspark
中小
Microsoft Dream Spark（Imagineに変更）
学生中にダウンロードすると、無料
■
・自己紹介
Stripeに入社、Stripeジャパンに
・Increase the GDP of the Internet
Stripeは、従来の決済方法のハードルを解消します
５００億円くらい しゃいん：６７９名
パートナー：三井住友カード
・Stripe
背景 HTTP 1.1 ４０４、４０３
４０２：Payment Required コマースが入るという
・W3C Stripe会員になっている
・JSライブラリ：
・Elements
Stripe Elementクイックスタートがある
→決済昨日が入っていないところから、決済昨日を入れるのを実演
JSを入れるStripe.js
elementsを生成
formにdivを入れる
card = elements.create(・・・）
card.mount(セレクタ）
cardにイベントをつけると、エラーを出せる
トークン化
postされないようにevent.preventDefaultして
createToken
・#JP_Stripes
・エラーメッセージ：日本語でも、英語でも
■今、Online Payment/Cashlessに注目すべき理由
～クラウド時代の決済トレンドとは～
・自己紹介
・広がり続けるインターネットのGDP
・日本：２０２０年、そしてその先に向けての不可避な流れ
・日本の現状：まだ低いオンライン決済率→現金決済
人口減：今年より、来年のほうが売り上げが下がる
対応２つある
・ほかの国から来てもらう
・日本にいながら海外ビジネス
インバウンド：キャッシュレス→カード使えないの？
シェアリングエコノミーが事前（オンライン）決済
＝キャッシュレスを加速
→事前決済とキャッシュレスがUXを向上
Store Payment：カードを写真取る
→Stripeがバックで走っている
ものの輸出からデジタル輸出、越境EC
お菓子サブスクリプション
Tokyo Mirai Mode
海外とビジネス
デジタルビジネスでGo Global
そらこむ：SIMを
いつ課金：キャッシュフロー経営
AWS：クレカ後払い 提供サービスはStripeで前払い
オンライン決済がビジネスエリアを拡張
B2CはともかくB2Bでは日本ではクレジットカードによるオンライン決済が利用できないのでは？
→AWSは？？？
与信枠：パーチェシングカードの普及（IT支払いだけ）
バックエンドが楽になる
与信はカード会社に
Payment Platformをつかう
You Can Start Today With Payment API！！
コミュニティで使っている人から
html5j Webプラットフォーム部 第16回勉強会
https://html5j-webplat.connpass.com/event/53119/
にいってきて、Webでのpayment関係
（Payment Request APIと
Paypalの新しいSDK（Braintree SDK）、
Formにタグをいてれキャッシュカード対応させるJS Stripe.js等）
について聞いてきたのでメモメモ
HTML5J Webプラットフォーム部 第１６回勉強会
■WebPayments
・自己紹介
フォームによるチェックアウト
何かしらの情報をサイトに提供（例：クレジットカード）
→スマートフォンでの入力
サイトによって保存される情報まちまち
→オートフィル
オートフィルの最適化
INPUTタグにオートコンプリート→ぴたっとはまるように
・Web Payments
複数仕様の集合体
Web Payment Browser API
Web Payment handler API
Payment Request API
・フォームの変わりに、支払い専用UIを表示
さまざまなブラウザが対応
一貫したUX
オープンな仕様
支払い方法そのものではない（あくまでUI)
→住所、クレジットカードの再入力を避ける
・動画でも
payment gatewayにわたせば、支払い
・今後
・Android
・Desktop版 絶賛開発中
・Edge
・ios Safari独自仕様のapple pay JS
・Facebook（Webviewにjsさしこみ
・Paayment Request API
var request
basic-cord
サードパーティが提供していれば使える
WebPayment Apps
１，２ヶ月で面白い話
まとめ
・WebPayment 一貫したUX
Payme
■Es
■Easy
・自己紹介
・Paypalの紹介
paypalの仕組み
売り手と買い手の間を仲介
２億人のアクティブユーザー
・Paypalの新しいSDK Braintree SDK
・Braintreeって？
グループ会社：ペイメントゲートウェイ
SDK
日本アカウントは現在作れない
・Paypal APIの変遷
くらっしく
RestAPI
BraintreeSDK
ホールディングス
・paypalとpayment gatewayの違い
paypal=digital wall金融庁 口座持てる
payment gateway
受け取り側だけサービス 経済産業省
・できること
つど決済
定期支払い
従量課金
マーケットプレイス用決済
送金
・２ステップで実装
Client SDK
ServerSideSDK
・githubにあるからみてね
・技術的特長
Client Side
トーカナイゼーション（トークン化）
BraintreeはPayment RequestAPIと連携できる
PCIDSSを持ってないと、カードの番号を扱えない
・特徴の背景
誰にでもわかりやすい決済導入
実装者に依存しない
複数決済手段の導入のしやすさ
→決済の民主化
・ところでTokenizationって
機密情報を一時的引換券（トークン）でおこなうしくみ
２とのトークンと１つのノンスを利用
・Payment Tokenization
Tokenを引き渡す実装
決済と完了させるサイトをわける
まとめ
・みんなでペイパろー
・PPUG（ぺいぱるゆーざーぐるーぷ）
■LT
Microsoft Bizspark
中小
Microsoft Dream Spark（Imagineに変更）
学生中にダウンロードすると、無料
■
・自己紹介
Stripeに入社、Stripeジャパンに
・Increase the GDP of the Internet
Stripeは、従来の決済方法のハードルを解消します
５００億円くらい しゃいん：６７９名
パートナー：三井住友カード
・Stripe
背景 HTTP 1.1 ４０４、４０３
４０２：Payment Required コマースが入るという
・W3C Stripe会員になっている
・JSライブラリ：
・Elements
Stripe Elementクイックスタートがある
→決済昨日が入っていないところから、決済昨日を入れるのを実演
JSを入れるStripe.js
elementsを生成
formにdivを入れる
card = elements.create(・・・）
card.mount(セレクタ）
cardにイベントをつけると、エラーを出せる
トークン化
postされないようにevent.preventDefaultして
createToken
・#JP_Stripes
・エラーメッセージ：日本語でも、英語でも
■今、Online Payment/Cashlessに注目すべき理由
～クラウド時代の決済トレンドとは～
・自己紹介
・広がり続けるインターネットのGDP
・日本：２０２０年、そしてその先に向けての不可避な流れ
・日本の現状：まだ低いオンライン決済率→現金決済
人口減：今年より、来年のほうが売り上げが下がる
対応２つある
・ほかの国から来てもらう
・日本にいながら海外ビジネス
インバウンド：キャッシュレス→カード使えないの？
シェアリングエコノミーが事前（オンライン）決済
＝キャッシュレスを加速
→事前決済とキャッシュレスがUXを向上
Store Payment：カードを写真取る
→Stripeがバックで走っている
ものの輸出からデジタル輸出、越境EC
お菓子サブスクリプション
Tokyo Mirai Mode
海外とビジネス
デジタルビジネスでGo Global
そらこむ：SIMを
いつ課金：キャッシュフロー経営
AWS：クレカ後払い 提供サービスはStripeで前払い
オンライン決済がビジネスエリアを拡張
B2CはともかくB2Bでは日本ではクレジットカードによるオンライン決済が利用できないのでは？
→AWSは？？？
与信枠：パーチェシングカードの普及（IT支払いだけ）
バックエンドが楽になる
与信はカード会社に
Payment Platformをつかう
You Can Start Today With Payment API！！
コミュニティで使っている人から
アクセス
トータル
ランキング
