stripe を使った決済機能の実装方法を学ぶ前に知っとくといい全体感

import { NextApiRequest, NextApiResponse } from "next"
// サーバーで使うSDK
import Stripe from "stripe"

const stripe = new Stripe(process.env.STRIPE_SECRET, {
  apiVersion: "2020-08-27",
})

export default async (req: NextApiRequest, res: NextApiResponse) => {
  // 決済する金額を受け取る
  const value = req.body.amount

  // intentは支払いフローを定義するオブジェクト
  const paymentIntent = await stripe.paymentIntents.create({
    amount: value,
    currency: "jpy",
    // Verify your integration in this guide by including this parameter
    metadata: { integration_check: "accept_a_payment" },
  })

  // intentのsecretをクライアントがstripeに送るとintentが実行される
  res.status(200).json({ client_secret: paymentIntent.client_secret })
}

import * as React from "react"
import {
  Elements,
  CardElement,
  useStripe,
  useElements,
} from "@stripe/react-stripe-js"
import { loadStripe } from "@stripe/stripe-js"

const Payment = () => {
  // public key
  const stripeApiKey = "pk_test_51HLU77BUWDS...jJhJ12C"
  const stripePromise = loadStripe(stripeApiKey)

  return (
    <div style={{ padding: 24 }}>
      <h1>sadnessOjisan に年収を払ってくれる御社を探してます！</h1>
      <p>お金欲しい！！！！！！！！！！</p>
      <div style={{ maxWidth: 760 }}>
        <Elements stripe={stripePromise}>
          {" "}
          // 中身はContext
          <CheckoutForm></CheckoutForm>
        </Elements>
      </div>
    </div>
  )
}

const CheckoutForm = () => {
  const stripe = useStripe()
  const elements = useElements()

  const handleSubmit = async event => {
    event.preventDefault()

    // intentを作るエンドポイントに決済したい金額を送る
    const res = await fetch("/api/pay", {
      method: "post",
      body: JSON.stringify({ amount: event.target.amount.value }),
      headers: { "Content-Type": "application/json" },
    })
    const data = await res.json()
    const secret = data.client_secret

    const card = elements.getElement(CardElement) // tokenを使ってintentを実行する

    const result = await stripe.confirmCardPayment(secret, {
      payment_method: {
        // FYI: payment_method (https://stripe.com/docs/api/payment_methods)
        card: card,
        billing_details: {
          name: "user name",
        },
      },
    })

    if (result.error) {
      /**
       * 決済の失敗
       * * api_connection_error
       * * api_error
       * * authentication_error
       * * card_error
       * * and so on...
       */
      console.log(result.error.message)
    } else {
      if (result.paymentIntent.status === "succeeded") {
        /**
         * 決済に成功したときの処理をこのブロックに書く
         */
        alert("payment success!!")
      }
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <label style={{ marginTop: 10, marginBottom: 10, display: "block" }}>
        年棒（日本円）
      </label>
      <input name="amount" defaultValue={10000000}></input>
      <label style={{ marginTop: 10, marginBottom: 10, display: "block" }}>
        カード情報
        <CardElement />
      </label>
      <p>↓テスト用クレジットカード情報↓</p>
      <ul>
        <li>番号: 4111111111111111</li>
        <li>有効期限: 02/25 (現在より後ならいつでmお)</li>
        <li>CVC: 111 (3桁ならなんでも)</li>
      </ul>
      <button type="submit">支払う</button>
    </form>
  )
}

export default Payment

<Elements stripe={stripePromise}>
  <CheckoutForm></CheckoutForm>
</Elements>

const result = await stripe.confirmCardPayment(secret, {
  payment_method: {
    card: elements.getElement(CardElement),
    billing_details: {
      name: "user name",
    },
  },
});

if (result.error) {
  /**
   * 決済の失敗
   * * api_connection_error
   * * api_error
   * * authentication_error
   * * card_error
   * * and so on...
   */
  console.log(result.error.message);
} else {
  if (result.paymentIntent.status === "succeeded") {
    /**
     * 決済に成功したときの処理をこのブロックに書く
     */
    alert("payment success!!");
  }
}

<form onSubmit={handleSubmit}>
  <CardElement />
  <button type="submit" disabled={!stripe}>
    Pay
  </button>
</form>

const CARD_OPTIONS = {
  iconStyle: "solid",
  style: {
    base: {
      iconColor: "#c4f0ff",
      color: "#fff",
      fontWeight: 500,
      fontFamily: "Roboto, Open Sans, Segoe UI, sans-serif",
      fontSize: "16px",
      fontSmoothing: "antialiased",
      ":-webkit-autofill": { color: "#fce883" },
      "::placeholder": { color: "#87bbfd" },
    },
    invalid: {
      iconColor: "#ffc7ee",
      color: "#ffc7ee",
    },
  },
};

const CardField = ({ onChange }) => (
  <fieldset className="FormGroup">
    <div className="FormRow">
      <CardElement options={CARD_OPTIONS} onChange={onChange} />
    </div>
  </fieldset>
);

<CardElement options={{ hidePostalCode: true }} />

/**
 * CSS properties supported by Stripe.js.
 */
interface StripeElementCSSProperties {
  backgroundColor?: string;
  color?: string;
  fontFamily?: string;
  fontSize?: string;
  fontSmoothing?: string;
  fontStyle?: string;
  fontVariant?: string;
  fontWeight?: string;
  iconColor?: string;
  lineHeight?: string;
  letterSpacing?: string;
  textAlign?: string;
  padding?: number;
  textDecoration?: string;
  textShadow?: string;
  textTransform?: string;
}