Stripe Checkout を Next.js アプリケーションに追加する方法
Stripe は、事前に構築されたチェックアウト ページを Web サイトに追加し、オンライン支払いを受け入れて管理できる支払い処理プラットフォームです。使いやすさ、豊富なドキュメンテーション、ローカル支払いのサポート、カスタマイズとブランディング オプション、サブスクリプション、請求、不正防止により、広く普及しています。
Stripe を使用すると、クレジット カードやデビット カード、Apple Pay、Google Pay など、さまざまなソースからの支払いを受け入れることができます。
Next.js アプリケーションへの Stripe Checkout の追加
Next.js などのさまざまなテクノロジーで作成されたアプリケーションと Stripe チェックアウトを統合できます。
このチュートリアルでは、Next.js e コマース サイトがセットアップされていることを前提としており、Stripe チェックアウトをサイトに追加する方法についてのガイドのみを提供します。
Stripe アカウントの設定と API キーの取得
Stripe チェックアウトを使用するには、Stripe アカウントを作成して API キーを取得する必要があります。API キーは公開可能なキーと秘密キーで構成され、アプリケーションから Stripe API へのリクエストを認証するために使用します。
次の手順に従って、Stripe アカウントを設定します。
- Stripe の Web サイトにアクセスし、[サインアップ] ボタンをクリックします。
- メールアドレス、氏名、国、パスワードを入力し、「アカウントの作成」ボタンをクリックします。
- Stripe から送信されるメールの指示に従って、メールを確認します。
- Stripe ダッシュボードで [支払いを有効にする] をクリックし、プロンプトの質問に答えて、アカウントのセットアップ プロセスを完了します。これらの質問は、会社名、住所、および銀行情報に関するものである可能性があります。開発目的では、テスト モードを使用します。
- 「開発者」タブから API キーをコピーします。app フォルダーにある .env ファイル。
API キーを使用して Stripe アカウントにアクセスできるようになりました。
Stripe npm パッケージのインストール
このコマンドを実行して、Stripe npm パッケージをインストールします。
npm install stripe
Stripe ライブラリをチェックアウト コンポーネント ページにインポートします。
import Stripe from 'stripe';
API フォルダーで、checkout-session.js ファイルという名前の新しいファイルを作成します。Stripe ダッシュボードから取得した API キーを使用して、Stripe オブジェクトを初期化します。
const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
ハンドラー関数で、body パラメーターからチェックアウトするアイテムを取得します。
export default async function handler(req, res) {
const { item } = req.body;
};
チェックアウト セッション オブジェクトをハンドラー関数に作成し、アイテムを渡します。
const session = await stripe.checkout.sessions.create({
payment_method_types: ['card'],
line_items: [
item,
],
mode: 'payment',
success_url: `${req.headers.origin}/?success=true`,
cancel_url: `${req.headers.origin}/?canceled=true`,
});
セッションオブジェクトに渡すノードの意味は次のとおりです。
- payment_method_types : チェックアウト セッションが受け入れる支払い方法のタイプ。Stripe のドキュメントで利用可能な支払い方法のリストを参照してください。
- line_items : ユーザーが購入しているアイテムのリスト。
- mode : チェックアウト セッションのモード。チェックアウト項目に少なくとも 1 つの定期的な項目が含まれている場合は、「サブスクリプション」を渡します。
- success_url : 支払いが成功した場合、URL ストライプはユーザーをリダイレクトします
- cancel_url : ユーザーが支払いをキャンセルした場合、URL ストライプはユーザーをリダイレクトします。
全体として、checkout-session.js ファイルは次のようになります。
export default async function handler(req, res) {
if (req.method === 'POST') {
const { cart } = req.body;
try {
const session = await stripe.checkout.sessions.create({
line_items: [
cart
],
mode: 'payment',
success_url: `${req.headers.origin}/success`,
cancel_url: `${req.headers.origin}/cancele`,
});
res.redirect(303, session.url);
} catch (err) {
res.status(err.statusCode || 500).json(err.message);
}
} else {
res.setHeader('Allow', 'POST');
res.status(405).end('Method Not Allowed');
}
}
この関数は、チェックアウト中にエラーが発生したときに、try/catch を使用してユーザーをリダイレクトするようになりました。支払いを処理する API ルートを作成したので、次のステップはチェックアウト プロセスを処理するチェックアウト コンポーネントを作成することです。
Next.js API ルートの詳細な説明については、Next.js での API ルートの作成に関するこの投稿を確認してください。
チェックアウト コンポーネントの作成
チェックアウトを処理するには、NPM を使用して @stripe/stripe-js ライブラリをインストールする必要があります。
npm install @stripe/stripe-js
@stripe/stripe-js ライブラリは、Stripe.js インスタンスの読み込みに役立つ読み込みユーティリティです。
インストールが完了したら、/components ディレクトリに /components/checkout.js という名前の新しいファイルを作成します。次に @stripe/stripe-js ライブラリから loadstripe 関数を呼び出し、発行可能なキーを引数として渡します。
import { loadStripe } from '@stripe/stripe-js';
const stripePromise = loadStripe(
process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
);
loadstripe() は、Stripe.js が読み込まれると、新しく作成された Stripe オブジェクトで解決される promise を返します。
次に、チェックアウト セッションを作成する関数をコンポーネントに追加します。
export default function Checkout({cart}) {
const handleCheckout = async () => {
try {
const stripe = await stripePromise;
const checkoutSession = await axios.post("/api/checkout-session", {
cart,
});
const result = await stripe.redirectToCheckout({
sessionId: checkoutSession.data.id,
});
if (result.error) {
alert(result.error.message);
}
} catch (error) {
console.log(error);
}
};
return (
<div>
</div>
);
}
この関数は、Axios を使用して /api フォルダーに作成した API を呼び出し、チェックアウト セッションを取得します。
クリックすると handleCheckout 関数をトリガーする return ステートメントにチェックアウト ボタンを追加します。
<button onClick={handleCheckout}>
Checkout
</button>
カート ページでチェックアウト コンポーネントを呼び出すことができます。
Stripe からのリダイレクトの処理
チェックアウト API ルートで、プロセスが成功または失敗したときにストライプがユーザーをリダイレクトする成功 URL とキャンセル URL を定義しました。キャンセル URL は /cancel ルートにマップされ、成功 URL は /success ルートにマップされます。/pages フォルダーに success と cancel という名前の 2 つのコンポーネントを追加して、これらの URL を処理します。
pages/success.js で、success コンポーネントを追加します。
export default function Success() {
return <div>Checkout out successfully</div>;
}
pages/cancel.js に cancel コンポーネントを追加します。
export default function Cancel() {
return <div>An error occurred during checkout</div>;
}
現在、Stripe はチェックアウトのステータスに応じて、これらのページのいずれかにリダイレクトします。
Next.js 13 を使用している場合は、このチュートリアルを参照して、Next.js 13 でアプリ フォルダーがどのように機能し、/pages フォルダーから切り替えるかを確認してください。
チェックアウト ページの追加のカスタマイズ オプション
Stripe ダッシュボードから、ブランドの外観に合わせてチェックアウト ページをカスタマイズできます。ロゴ、アイコン、ブランド カラー、アクセント カラーを追加でき、独自のカスタム ドメインを使用することもできます。さらに、チェックアウト セッションを作成するときに、好みの支払い方法を追加し、Stripe がチェックアウト ページに表示する言語を指定することもできます。これらすべてのオプションにより、アプリケーションに合わせてチェックアウト プロセスをカスタマイズできます。
チェックアウトページに Stripe を使用する理由
独自のチェックアウト処理サービスを構築することもできますが、通常は、Stripe などの支払いプラットフォームを使用することをお勧めします。Stripe チェックアウトは、開発時間を短縮するのに役立ち、短期間で支払いの受け入れを開始できます。
さらに、PCI コンプライアンス、カートの復元、割引機能、配送情報を収集して支払い後の請求書を送信する機能などの追加機能を利用できます。
コメントを残す