Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

この記事は、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の画面が表示されます。

スクリーンショット 2017-12-17 18.12.49.png
スクリーンショット 2017-12-17 18.12.55.png

もし、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とは別におしゃれなフォームを提供してくれます。
今回のように、サクッと決済機能を実装できてしまうので、ぜひ、お試しください。

Why do not you register as a user and use Qiita more conveniently?
  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
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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