ppug kyoto #1

PayPalの新しい機能と実装方法について

2017.8.2 @PPUG 京都 #1

Who‘s who？

2

Junichi Okamura (@benzookapi)

PayPal Integration Manager/Evangelist

Scala/Java/Node.js/Python/Ruby/PHP/../Mobile/../ppt

Rock/Beer/DQ/JOJO/I18N/Marketing/Payment

API愛好家、農業IT化支援、漫画家

© 2014 PayPal Inc. All rights reserved. Confidential and proprietary.

1998年設立。

17年以上の決済事業における実績を持つシリコンバレーのテックカンパニーであり、約2億人が200以上の国と地域、100通貨以上で利用している、Eコマースにおけるグローバルスタンダード

出発点はオンライン上でだれでも簡単に支払ったり、支払いを受けつけられる仕組みを提供し、起業家や中小企業を支援

規模に関わらず、世界中のバイヤーとセラーを安心・安全につなげて、国境、通貨、デバイスに関係なく、生活やビジネスを簡単に

日本では2010年より本格営業稼動。オフィスは青山・表参道に所在

PayPalの仕組み

5

2015 2016

収益＄9.24B ＄10.84B

取扱高＄282B ＄354B

Active accounts数 179M 197M決済件数 4.9B 6.1B

Copyright ©2016 PayPal Inc. All rights reserved.

PayPal は E コマースにおけるグローバルスタンダードです

YoY 26%

YoY 10%

YoY 24%

YoY 17%

本日お話ししたいこと

PayPalの新しい機能と実装方法による簡単で安全な決済についてお話ししたいと思います

©2016 PayPal Inc. Confidential and proprietary. 6

PayPalの新しい機能

7

ECサイトにおけるPayPalの３つのコンバージョンアップ機能


インコンテキスト＋ワンタッチ＋ショートカット -

1.インコンテキスト＝サイト非離脱2.ワンタッチ＝ログインスキップ

3.ショートカット＝住所自動入力

One Touch

©2016 PayPal Inc. Confidential and proprietary.

あるサイトでログインし、オプトインすると

次回以降は確認画面だけで決済可能

In-Context Checkout


利用局面（コンテキスト）に応じてUXを最適化。

外部サイトに遷移することなくチェックアウトが可能

Shortcut Checkout


PayPalユーザーの配送先住所を

そのまま利用してチェックアウトフローを

簡素化

PayPalの新しい実装方法

12

Braintree SDK

• Client SDK

JavaScript/iOS/Android :

決済開始、PayPal画面表示

• Server Side SDK

Java/.Net/Node.js/PHP/Python/Ruby :

決済完了


２ステップの実装で、WEB、Mobileを同様に決済導入が可能。

また、Tokenizationによりセキュリティを担保、サーバー処理を独立・簡素化

Braintreeって？


PayPalグループのPayment Gateway（複数決済手段サービス）

PayPal,Credit Card,Android Pay,Apple Pay,

Bitcoin, …etc日本アカウントは現在作れません

（Sandboxは可）

P2P Store-front XB P2P

Braintree SDKって？


様々な決済手段を簡単に導入できるSDKでPayPal自体もメイン実装手段に移行中

BraintreeのアカウントなしでPayPal実装に利用可能

Braintree SDK

PayPal APIの変遷


独自仕様のレガシーからオープン仕様（OAIやOAS）、様々な決済手段へ

Classic API REST API

Mobile SDK

Web Web

Mobile

Web

Mobile

Others…

Holdlings

Braintree SDKのシステム概要


PayPal

Sandbox =Test

PayPal本番環境

Braintree

Sandbox =Test

Braintree本番環境

Braintree SDK

PayPal

Credit Card

Android Pay,

Apple Pay,

BitCoin,

etc…

切り替え切り替え

作成に必要

Personal: 支払い用Business:受け取り用

日本は現在不可

PayPalでできる主な決済方法とその実装方法

• 都度決済（Checkout）- Braintree SDK / REST API / ボタン

• 定期支払（Recurring Payment）- REST API / ボタン

• 従量課金（Vault）- Braintree SDK

• マーケットプレイス用決済 - REST API

• 送金（Payout）- REST API


PayPal独自の機能はREST APIまたはボタン貼り付けで実装

アカウントを活かした多様な使い方が可能

Client SDK ( JavaScript)の例


JSファイルを読み込んで、こんな感じでほぼコピペで出来ちゃいます

Server Side SDK ( Ruby)の例


Gemで簡単にインストールできて、たったこんだけで決済完了

動くサンプルコード（Node.js）


https://github.com/benzookapi/VZeroNodeDemo

• GitHubで「VZeroNodeDemo」で検索

• http://localhost:3000 で動くよ！

https://github.com/benzookapi/VZeroNodeDemo

http://localhost:3000/

Braintree SDKの技術的特徴


• Client Side (JavaScript、Mobile）にほとんどの実装を寄せている

• Tokenization（トークン化）によってセキュリティ担保とサーバー処理の独立・簡素化

こうしたBraintree SDKの特徴の背景


• 誰にでもわかりやすい決済導入

• 実装者に依存しないセキュアな決済

• 複数決済手段の導入のしやすさ

=>決済の民主化（越境ECのハードル下げにも貢献）

ところでTokenizationって？


カード情報などの機密情報を直接やりとりせず一時的引き換え券（トークン）で行う仕組み

• 決済だけのものではない（OAuthのトークンとかお馴染み）

• 最近決済の手法にも一般的に取り入れられてきた

• トークンを介すことでJavaScriptやモバイルといったクライアントの差異を吸収した決済処理が可能

Braintree SDKのTokenization

• ①Access Token

− Credentialsで生成したトークンです。サーバー側で管理します。

• ②Client Token

− Access Tokenを元にサーバー側で生成します。クライアント（WEBページやアプリの決済画面）で使います。

• ③(Payment Method )Nonce

− クライアントがClient Tokenを使って、ユーザー操作の後に生成します。

• ④サーバー側の決済処理

− Access TokenとPayment Method Nonceを使って行います。両者が正しくないと処理できません。

• セキュリティ的な順位付け

− Credentials > Access Token > Client Token > Nonce


２つのTokenと１つのNonce（ワンタイムトークン）を使って行います

図にするとこんな感じ


まとめ


決済導入はもはや身近な存在

越境ECも身近な存在

アイディアがあれば稼げるチャンスはいくらでもある！

だからみんなでペイパろー！

そんなPayPalをもっと知りたい、使い倒したいあなた！


大丈夫！京都でPPUGを継続すれば

実現するよ！https://ppug.org

https://ppug.org/

PayPalの新しい機能と実装方法について

2017.8.2 @PPUG 京都 #1

ppug kyoto #1

Technology