Polymer Cafe #1でのLT資料です。ちなみに制限時間5分で2-3ページ分しかしゃべれませんでした、、、
自己紹介
- ニックネーム: howking
開発環境:
Chromebook + 
Emacs - 元々サーバサイドエンジニアで、フロントエンド(Polymer)歴は2年半ぐらい
Polymer-jp.orgのサイト構築のお手伝いしてます。 -
QiitaにちょこちょこPolymerネタを書いてます。
- 今日の資料もQiitaにアップ予定、ソースコードは Polymer-Japan/polymer-jp.org#30
概要
- Polymer-jp.orgにStripeで寄付ボタンを設置してみた
- Polymer-jp.orgとは
- 100% pure
Polymer Library & Toolbox - 100% only
Firebase Infrastructure - 特色: PWA (Lighthouse100点)、Markdownで動的にコンテンツ編集できる
- 100% pure
-
Stripeとは
- 最近カード決済では急成長している決済代行会社(手数料: 一律3.6%)
- Stripe ElementsのPayment Request Buttonを設置(いわゆるWeb Componentではない)
- Payment Request API, Android, Apple Pay対応
- Polymer-jp.orgとは
- ざっくり決済フローとその実装
- 今後のWebアプリ時代で快適な決済方法
- まとめ、感想
- 注意点やセキュリティなど
寄付コンポーネント(使い方)
https://polymer-jp.org/about/ のページの一番下
※ 注意! 実際に100円課金されます。
※ Mac Safariで現状動いてないです。。。(公式サンプルでも表示されない?)
実質 PCはChromeのみ、iPhoneはApple PayでOK、AndroidもOK。
フロー
PlantUML寄付ボタンの表示部分 /about
- コンテンツにMarkdownで寄付コンポーネントのタグ(
<polymer-jp-donate>)を入れて表示しています。
# 寄付
以下のボタンで100円寄付されます(検証中)。
<polymer-jp-donate pub-key="pk_test_uUgI4YrGzPWHLamUPQZpaTNW" amount="100"></polymer-jp-donate>
寄付金についてはサイトやイベントの運用費用に充てさせていただきます。
- 公開キーはStripeの管理画面から
寄付ボタンコンポーネント
- ほぼStripeが公開しているサンプルコードのまま。
src/polymer-jp-donate.html
...
<script src="https://js.stripe.com/v3/"></script>
<dom-module id="polymer-jp-donate">
<template>
<style>
...
[hidden] {
display: none !important;
}
</style>
<!-- 寄付ボタン -->
<div id="payment-request">
<div id="payment-request-button" hidden$="[[_sourceId]]"></div>
</div>
...
寄付ボタンの生成
-
pub-keyとamountで指定された属性を使ってStripeElementを生成(指定した金額で実際に決済(charge)されない)
src/polymer-jp-donate.html
class PolymerJpDonate extends Polymer.Element {
...
ready(){
const stripe = Stripe(this.pubKey);
const paymentRequest = stripe.paymentRequest({
country: 'JP', currency: 'jpy',
total: { label: '合計', amount: this.amount }
});
// 決済に対応しているブラウザであれば、Elementを表示
paymentRequest.canMakePayment().then(ok=>{
if (! ok) return;
stripe.elements().create('paymentRequestButton', {
paymentRequest,
style: {
paymentRequestButton: { type: 'donate', theme: 'light-outline' }
}
}).mount(this.shadowRoot.querySelector('#payment-request-button'));
});
...
寄付ボタンクリック時
- ダイアログからの戻りを定義
src/polymer-jp-donate.html
class PolymerJpDonate extends Polymer.Element {
...
ready(){
...
paymentRequest.on('source', e => {
try {
this.set('_sourceId',e.source.id);
this.set('_donateResponse','...');
e.complete('success');
} catch (error) {
e.complete('fail');
}
});
...
source_tokenの処理と完了メッセージ
-
<iron-ajax>で_souceIdを取得した時点で/donateを呼び出し、戻り値を_donateResponseに格納する
src/polymer-jp-donate.html
<iron-ajax
auto="[[_sourceId]]"
url="/donate?sid=[[_sourceId]]"
handle-as="text"
last-response="{{_donateResponse}}"></iron-ajax>
<!-- 決済完了のメッセージ -->
<div id="donate-response" hidden="[[!_sourceId]]">[[_donateResponse]]</div>
</template>
<script>
stripeへの決済
-
config.stripe.amountの金額で実際に決済される
functions/index.js
const stripe = require("stripe")(config.stripe.token);
...
exports.donate = functions.https.onRequest((req, res) => {
...
stripe.charges.create({
amount: config.stripe.amount,
currency: "jpy",
source: req.query.sid,
description: "Polymer-jp donate"
}, (err, charge)=>{
...
if(err){
return res.status(500).end();
}
res.send('Thank you!!');
});
});
まとめ、感想
-
Stripeはすぐ使えてお手軽! Payment Request APIのUIも素晴しい
- 入金には身分証を送る必要があるけど、その場でなくてもよい
- PCI DSS準拠 カード番号を知らなくて済む
- Apple Payは管理画面でドメイン設定、ファイル配置が必要
- Stripe Elementsはhttps接続が必須(ngrokは動作検証に便利だった)
-
Firebase Functionsはローカルエミュレータがv6.11.x縛りでデバックしにくい
firebaseは有料プランにしないと外部APIが叩けないので注意 -
Polymer
手軽にWebコンポーネントにできて便利!(Polymerを使って)素敵な有料Webアプリをつくっていきましょう!
以上!
ご静聴、ありがとうございました! (よかったら寄付お願いします!w)
