Stripe

Stripe を分かりやすく

Stripe は、ビジネスがオンラインで決済を受け取ることを容易にするためのプラットフォームです。これは、すべての主要なクレジットカード、デビットカード、さらには Apple Pay や Google Pay などの電子財布に対応しています。さらに、Stripe はサブスクリプションベースのビジネスモデルをサポートし、定期的な支払いを自動的に処理する機能も提供しています。

Stripe を使うメリット

Stripe の主な利点はその汎用性と柔軟性です。開発者は Stripe API を使用して、決済処理をアプリケーションやウェブサイトに組み込むことができます。これは、ユーザーがサイトを離れることなく、直接支払いを行うことを可能にします。

また、Stripe は多数の通貨と国際的な支払い手段に対応しているため、ビジネスがグローバルな顧客を対象とする際に役立ちます。また、安全性も非常に高く、PCI DSS（Payment Card Industry Data Security Standard）準拠の決済情報管理を提供します。

Stripe の実装

では、Stripe を Next.js と TypeScript で使用する基本的な例を見てみましょう。

まずは Stripe の公式パッケージをインストールします。

npm install stripe @stripe/stripe-js

次に、Stripe を初期化するための設定を行います。この例では、環境変数から Stripe の API キーを取得します。

import { loadStripe } from '@stripe/stripe-js'

const getStripe = () => {
  if (!process.env.STRIPE_PUBLIC_KEY) {
    throw new Error('Stripe API Key is missing')
  }

  return loadStripe(process.env.STRIPE_PUBLIC_KEY)
}

export default getStripe

さて、上記のコードにより、Stripe を扱うための準備が整いました。次に具体的な決済処理を実装してみましょう。

以下に、商品を購入するボタンを作成するコンポーネントを示します。このコンポーネントは Stripe のチェックアウトセッションを作成し、ユーザーを Stripe のチェックアウトページにリダイレクトします。

import { useEffect, useState } from 'react'
import getStripe from './getStripe'

type Props = {
  priceId: string
}

const CheckoutButton = ({ priceId }: Props) => {
  const [stripe, setStripe] = useState(null)

  useEffect(() => {
    getStripe().then((stripe) => {
      setStripe(stripe)
    })
  }, [])

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

    const { error } = await stripe.redirectToCheckout({
      lineItems: [{ price: priceId, quantity: 1 }],
      mode: 'payment',
      successUrl: `${window.location.origin}/success?session_id={CHECKOUT_SESSION_ID}`,
      cancelUrl: `${window.location.origin}/cancel`,
    })

    if (error) {
      console.warn('Error:', error)
    }
  }

  return (
    <button role="link" onClick={handleClick}>
      Buy Now
    </button>
  )
}

export default CheckoutButton

この CheckoutButton コンポーネントは、priceId をプロップとして受け取ります。priceId は Stripe で作成した特定の商品やサービスの価格を識別する ID です。ユーザーがボタンをクリックすると、Stripe のチェックアウトセッションが作成され、ユーザーは Stripe のチェックアウトページにリダイレクトされます。

redirectToCheckout 関数の引数には、購入する商品の情報（lineItems）、支払いモード（mode）、支払い成功時とキャンセル時のリダイレクト URL（successUrl, cancelUrl）を指定します。

最後に、error が存在する場合はそれをコンソールに表示します。これにより、何か問題が発生した場合にデバッグがしやすくなります。

以上が、Next.js と TypeScript を使用した Stripe の基本的な実装方法です。しかし、Stripe の機能はこれだけにとどまりません。サブスクリプション決済の管理、支払い情報の保存といった機能も提供されていますので、それらを必要に応じて活用してみてください。