React + ExpressでStripeの決済処理を実装する

決済処理をフルスクラッチで書く場合非常に大変な作業になってしまいます。そこでReactで決済処理を行いたいならstripeが便利です。今回はhooksやTypeScriptといったモダンな技術を使いつつstripeの決済処理を実装していきます。

予めstripeのアカウントを作成しておいてください。
stripe.com

プロジェクトの作成

create-react-appでプロジェクトを作成していきます。--typescriptオプションをつけると、TypeScript用のプロジェクト構成で作成してくれます。

$ npx create-react-app react-stripe --typescript

一応ローカルで動くか確認

$ cd react-stripe
$ yarn start

次にreact-elements-stripeというReactで簡単にstripeを実装できるライブラリがあるのでインストール
レポジトリはこちら
github.com

$ yarn add react-stripe-elements

react-stripe-elementsのTypeScript用のパッケージをインストール

$ yarn add -D @types/react-stripe-elements

stripe.jsを読み込みます。publicフォルダにあるindex.htmlファイルのHeadタグ内に下記のscriptを追加します。
public/index.html

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

CheckoutForm.tsxのファイルを作成します。ここでは後で用意するexpressのサーバーの/chargeにpostして成功すると、checkout処理が完了します。もし処理が成功していたら、chromeのdeveloper consoleにokという文字が出ます。

import React from 'react';
import {CardElement, injectStripe} from 'react-stripe-elements';

const CheckoutForm = (props: any) => {
  async function handleSubmit(e: any) {
      let {token} = await props.stripe.createToken({name: "Name"});

      let response = await fetch("http://localhost:9000/charge", {
        method: "POST",
        headers: {"Content-Type": "text/plain"},
        body: token.id
    })
    if (response.ok) {
      console.log('ok')
    }
  }
  return (
    <div>
      checkout
      <CardElement />
      <button onClick={handleSubmit}>チェックアウト</button>
    </div>
  )
}

export default injectStripe(CheckoutForm);

App.tsxの内容を修正します。react-element-stripeはcontext apiで作成されてるので、StripeProviderを作成して、その中に先程作成したCheckoutFormをwrapしてあげます。StipeProviderのはapiKeyを指定します。こちらは予め登録したstripeのダッシュボードで確認することができます。

import React from 'react';
import './App.css';
import {Elements, StripeProvider} from 'react-stripe-elements';
import CheckoutForm from './CheckoutForm';

const App: React.FC = () => {
  return (
    <div className="App">
      <StripeProvider apiKey="">
        <Elements>
            <CheckoutForm />
        </Elements>
      </StripeProvider>
    </div>
  );
}

export default App;

とりあえずフロントエンドの実装は終わり。次にexpressサーバーを作成していきます。

Expressサーバーでチェックアウト処理

stripeを試すための簡易的なサーバーを作成していきます。

$ mkdir server
$ yarn init -y

そして必要なパッケージをインストールしていきます。

$ yarn add express body-parser cors

こちらはserver.jsの内容です。

const app = require("express")();
const stripe = require("stripe")("SECRET_KEY");
const cors = require("cors")

app.use(require("body-parser").text());
app.use(cors())

app.post("/charge", async (req, res) => {
  try {
    let {status} = await stripe.charges.create({
      amount: 2000,
      currency: "jpy",
      description: "An example charge",
      source: req.body
    });

    res.json({status});
  } catch (err) {
    res.status(500).end();
  }
});

app.listen(9000, () => console.log("Listenig on port 9000"));