Last active
October 24, 2017 08:50
-
-
Save ryonakae/edaa3b628f3690dc3ee9a495bf1776b2 to your computer and use it in GitHub Desktop.
Frontend de KANPAI! #02 - エンジョイ！フロントエンド - 「Payment Request APIで実現できる Web決済の体験」
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Payment Request API Test</title> | |
| <style> | |
| body { | |
| color: #333; | |
| padding: 20px; | |
| } | |
| h1 { | |
| margin: 40px 20px 0; | |
| } | |
| ul { | |
| display: flex; | |
| list-style-type: none; | |
| justify-content: space-between; | |
| margin: 60px 0 0; | |
| padding: 0; | |
| } | |
| li { | |
| background-color: #eee; | |
| width: 100%; | |
| margin: 0 20px; | |
| padding: 20px; | |
| } | |
| .buyButton { | |
| margin-top: 20px; | |
| text-align: center; | |
| background-color: #FF5252; | |
| color: #fff; | |
| padding: 10px 20px; | |
| cursor: pointer; | |
| } | |
| .buyButton:hover { | |
| opacity: 0.7; | |
| } | |
| </style> | |
| <script src="./prapi.js"></script> | |
| </head> | |
| <body> | |
| <h1>Payment Request API Test</h1> | |
| <ul> | |
| <li> | |
| <div>商品A</div> | |
| <div>3,980円</div> | |
| <div class="buyButton" data-price="3980">購入する</div> | |
| </li> | |
| <li> | |
| <div>商品B</div> | |
| <div>1,980円</div> | |
| <div class="buyButton" data-price="1980">購入する</div> | |
| </li> | |
| <li> | |
| <div>商品C</div> | |
| <div>680円</div> | |
| <div class="buyButton" data-price="680">購入する</div> | |
| </li> | |
| </ul> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 'use strict' | |
| document.addEventListener('DOMContentLoaded', () => { | |
| init() | |
| }, false) | |
| function init () { | |
| document.querySelectorAll('.buyButton').forEach((e) => { | |
| e.addEventListener('click', () => { | |
| onBuyClicked(e.getAttribute('data-price')) | |
| }, false) | |
| }) | |
| } | |
| function onBuyClicked (_price) { | |
| // ブラウザがPayment Requestに対応していない場合はページ遷移する | |
| if (!window.PaymentRequest) { | |
| location.href = '/checkout' | |
| return | |
| } | |
| // 支払い方法の設定 | |
| const supportedInstruments = [{ | |
| supportedMethods: ['basic-card'], | |
| data: { | |
| supportedNetworks: [ | |
| 'visa', 'mastercard', 'amex', 'discover', | |
| 'diners', 'jcb', 'unionpay' | |
| ] | |
| } | |
| }] | |
| // 取引の詳細を設定 | |
| const price = Number(_price) | |
| const shipping = 500 | |
| const total = price + shipping | |
| const details = { | |
| displayItems: [{ | |
| label: '小計', | |
| amount: {currency: 'JPY', value: price} | |
| }, { | |
| label: '送料', | |
| amount: {currency: 'JPY', value: shipping} | |
| }], | |
| total: { | |
| label: 'ご請求額', | |
| amount: {currency: 'JPY', value: total} | |
| } | |
| } | |
| // Payment Requestインスタンスを作成 | |
| const request = new PaymentRequest(supportedInstruments, details) | |
| // 支払いのUIを表示 | |
| request.show() | |
| // 決済処理を行う | |
| .then((result) => { | |
| console.log(result) | |
| // resultに支払い情報が入っている。カード番号とかも入っているので取り扱いに注意 | |
| // 本来ならトークン化するなどしてサーバにPOSTする | |
| // 今回はそのままサーバにPOSTする（POST先がないのでエラーになる） | |
| return fetch('/pay', { | |
| method: 'POST', | |
| credentials: 'include', | |
| headers: { | |
| 'Content-Type': 'application/json' | |
| }, | |
| body: JSON.stringify(result.toJSON()) | |
| }).then((respnse) => { | |
| // 決済結果を表示する | |
| if (response.status === 200) { | |
| return result.complete('success'); | |
| } else { | |
| return result.complete('fail'); | |
| } | |
| }).catch(() => { | |
| return result.complete('fail'); | |
| }) | |
| }) | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment