AWS Summitに行ってきた！レポート※セッションメモ （2017/05/31）AmazonPayの仕組みと実装方法

AWS Summitに行ってきた！レポート※セッションメモ （2017/05/31）AmazonPayの仕組みと実装方法

【ライブコーディングも実施】AmazonPayの仕組みと実装方法

自己紹介

• ジョナサン
• 吉村周造

アジェンダ

• Amazon Payの特徴
• Amazon Payと日本赤十字社
• Amazon Pay購入画面BestPravtice
• Amazon Payのライブコーディング

Amazon Payの３つの特徴

• 利便性　AmazonIDひとつでOK
• スピード　入力不要で最短2clickで完了
• 安心感　マケプレ保証の対象

導入実績

• 2,016年１０月時点で1,000社を超えた

エンジニアとは

なにもないところから人の人生を豊かにする（社会貢献をする）

Amazon Payと日本赤十字社

熊本地震

• 被災状況　　物資支援はありがたいのだけれども。。。
• Amazon Customerの要望　　寄付はしてみたいんだけど
• 赤十字社の要望　　より多くの方にWeb経由で寄付してほしい

困っている人がいる　→エンジニアがやらねば！！！

Amazon Payで寄付するための課題

1. 信頼できるページ管
2. 理を楽にしたい
3. すぐに開始したい

Amazon Payの仕組み

• フロントエンド↔バックエンド
• フロントエンドはJSでだけで実装できる
• バックエンド　SDKがあるのでそれを経由してAPIをコール

API GateWay＋Lambda＋DynamoDBで寄付ページを作成できた！

課題の解決

1. →Amazonの中に
2. →AWSを使ってるので楽ちん
3. →LambdaのPGは１週間くらいでできた

そして、グローバルでも利用できる！

Amazon Pay購入画面BestPracticeとは

ECサイトのゴールはなんですか？　→商品購入→たくさんの商品を購入してほしい

カゴ落ち

• カートに入れても購入しないこと　※購入するときに面倒だから（入力項目が多すぎる）
• 平均的に購入画面である入力項目は３８個もある！！！

商品購入の機会最大化

ECサイトのゴールデンルール

• １ページで注文・購入を確定させる
• 項目は最小限に
• ゲスト購入OK　OptIN形式で会員登録させる

※ユーザーは我慢強くないということを理解すべき！

ここからライブコーディング

必須事項：

• AmazonPayのJSライブラリを読み込む
• クライアントクレデンシャルAPIを利用するための項目を指定する
• （個人的な所感）アクセストークン系をどう秘匿するかは検討かなー

コードはGitHub上に公開されるとのこと リファレンスはAmazonPayのページ参照

まとめ

エンジニアはお客様のため、社会貢献をおこっていきましょう！