LoginSignup
14

More than 5 years have passed since last update.

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

Posted at

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14