12
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

Organization

Polymer + Firebase + Stripe で寄付コンポーネント

Polymer Cafe #1でのLT資料です。ちなみに制限時間5分で2-3ページ分しかしゃべれませんでした、、、

自己紹介

概要

  • Polymer-jp.orgにStripeで寄付ボタンを設置してみた
    • Polymer-jp.orgとは
      • 100% pure Polymer Library & Toolbox
      • 100% only Firebase Infrastructure
      • 特色: PWA (Lighthouse100点)、Markdownで動的にコンテンツ編集できる
    • Stripeとは
      • 最近カード決済では急成長している決済代行会社(手数料: 一律3.6%)
      • Stripe ElementsのPayment Request Buttonを設置(いわゆるWeb Componentではない)
      • Payment Request API, Android, Apple Pay対応
  • ざっくり決済フローとその実装
    • 今後の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-keyamountで指定された属性を使って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アプリをつくっていきましょう!

polymer

:bow: 以上!

ご静聴、ありがとうございました! (よかったら寄付お願いします!w)

qrcode

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
12
Help us understand the problem. What are the problem?