ReactにStripeのCheckoutを実装してみた。

この記事は、Stripe Advent Calendar 2017の17日目です。

前書き

Stripeには、WEBサイトに簡単に決済機能を実装できる、Checkoutという機能があります。
わずか数行のJavaScriptを書くだけで、おしゃれなモーダル形式の決済フォームを提供してくれます。

この記事では、ReactのWEBアプリの中でCheckoutを実装し、実決済部で利用するCard Tokenを発行するまでのフロント側での実装について解説します。

実装準備

Stripe Checkoutはわずか数行のJavaScriptのコードを書くだけで実装できます。
ですが、Reactを利用している場合は、便利なWrapperライブラリがあるのでそちらを利用します。

React-Stripe-Checkout

# NPM
$ npm install react-stripe-checkout
# Yarn
$ yarn add react-stripe-checkout

それに併せて、HTMLの中にStripe.jsのタグを埋め込んで実装準備は終了です。

<script src="https://js.stripe.com/v3/"></script>

実装

実装はとても簡単です。
上記でインストールした、react-stripe-checkoutをimportして
下記を例に、Componentを作成します。

import React from 'react';
import StripeCheckout from 'react-stripe-checkout';

class Checkout extends React.Component {
  onToken(token) {
    console.log(token);
  }
  render() {
    return (
      <div>
        <StripeCheckout
          token={this.onToken}
          stripeKey="{STRIPE_API_KEY}"
          image="https://stripe.com/img/documentation/checkout/marketplace.png"
          name="寄付"
          panelLabel="寄付"
          amount={100}
          currency="JPY"
          locale="ja"
        />
      </div>
    );
  }
}

export default Checkout;

とりあえず、ここまで作れば下記のようなボタンが表示されて、押下するとCheckoutの画面が表示されます。

もし、Pay With Cardのレイアウトを変更したい場合は、下記のようにStripeCheckoutタグの中で
Buttonを作成すれば好きなButtonでCheckoutを表示させることができます。

<StripeCheckout
  token={this.onToken}
  stripeKey="{STRIPE_API_KEY}"
  image="https://stripe.com/img/documentation/checkout/marketplace.png"
  name="寄付"
  panelLabel="寄付"
  amount={100}
  currency="JPY"
  locale="ja"
>
  <Button
    basic
    color="blue"
  >
    寄付する
  </Button>
</StripeCheckout>

処理解説

StripeCheckoutの中のtokenというProps
これが、Checkoutでカード情報を入力して支払いボタンを押した時の処理です。

上記の例にある、onTokenがそれに該当します。

onToken(token) {
  console.log(token);
}

ここでの引数、tokenはサーバの決済処理へ安全にカード情報を渡すために暗号化された
Card Tokenが含まれています。
ここで、簡単にTokenが利用できるのであとはサーバ、もしくはStripeのAPIを叩いて決済を行うだけです。
その辺りは、公式ドキュメントで詳しく書いているので、APIへ渡すsourceの部分を上記で取得できたtokenを渡せば、決済完了ですね。

Stripe Charges

後書き

サーバ側はともかく、フロント側の決済関連処理というのは、カードをどうやって入力するか、入力したカードをどうやってサーバに安全に渡すか。。という悩みがつきものです。
Stripeは、そういった開発者の悩む部分をフォームの提供によりとても楽にしてくれます。
Checkoutの他に、Stripe Elementsというのがあり、Checkoutとは別におしゃれなフォームを提供してくれます。
今回のように、サクッと決済機能を実装できてしまうので、ぜひ、お試しください。