【初心者向け】Stripe決済の実装方法を3パターン解説｜中小企業でも安心

「オンライン決済を導入したいけれど、開発が難しそうで踏み出せない」「初期費用をかけずに始められる決済サービスはないか」――Stripeなら、初期費用・月額費用ゼロで、技術レベルに合わせた3つの方法で決済機能を実装できます。

本記事では、Stripe決済の実装方法をCheckout・Payment Links・APIの3パターンに分けて、コード例付きで初心者にもわかりやすく解説します。APIの基本概念についてはAPI連携とは？初心者向け解説を先に読んでおくと理解が深まります。ECサイトとの連携事例はAPI連携の具体例10選でも紹介しています。

Stripeとは？中小企業が選ぶべき理由

オンライン決済の導入に「開発が難しそう」「費用が心配」と感じていませんか？

Stripe（ストライプ）は、世界中で数百万の企業が利用するオンライン決済プラットフォームです。技術知識が少ない方でも導入しやすく、中小企業にとって「ちょうどいい」決済システムとして注目されています。

この記事では、Stripe決済の実装方法を3つのパターンに分けて解説します。技術レベルや目的に応じた最適な方法を、具体的な手順とサンプルコードで紹介します。

Stripeが支持される理由

開発者に優しい設計
APIドキュメントが充実し、サンプルコードも豊富です。テストモードで本番環境に影響なく何度でも試せるため、初めての方でも安心して実装できます。

透明な手数料体系
決済額の3.6%のみというシンプルな料金設定です。初期費用・月額費用は不要で、決済発生時のみ課金されます。隠れたコストがないため、事業計画が立てやすいのが特徴です。

段階的な拡張性
決済リンクから始めて、事業成長に合わせてカスタマイズできます。サブスクリプション、多通貨対応、請求書発行など、必要な機能を後から追加可能です。

他サービスとの比較

項目	Stripe	PayPal	Square
決済手数料	3.6%	3.6% + 40円/件	3.25%〜3.95%
開発の柔軟性	非常に高い	中程度	低〜中程度
API充実度	◎	○	△
入金サイクル	最短翌々営業日	最短翌日	最短翌営業日

Stripeの強みは開発の柔軟性とAPI充実度です。簡単な決済から複雑なカスタマイズまで、幅広いニーズに対応できます。

導入前に知っておきたい基本用語

API（Application Programming Interface）
アプリケーション同士が情報をやり取りする仕組みです。Stripeでは、APIを通じて決済処理や顧客情報管理を行います。

Webhook（ウェブフック）
決済完了などのイベント発生時に、Stripeから自動通知を受け取る仕組みです。「決済成功時に在庫を減らす」といった処理を自動化できます。

テストモードと本番モード
テストモードでは実際の決済は行われず、動作確認のみ可能です。本番モードに切り替えると実際の決済処理ができます。

3つの実装パターンと選び方

Stripe決済の実装方法は、技術レベルと目的に応じて3つのパターンから選択できます。

実装方法	技術レベル	実装時間	カスタマイズ性	推奨用途
Payment Links	不要	5分	低	単発販売・SNS販売
Checkout	初級	30分〜1時間	中	ECサイト・標準的な決済
API連携	中〜上級	数時間〜数日	高	独自フロー・システム連携

最適な実装方法の選び方

技術リソースで判断する
- プログラミング経験なし → Payment Links
- HTML/JavaScript基礎知識あり → Checkout
- サーバーサイド開発可能 → API連携も選択肢

カスタマイズ要件で判断する
- 標準的な決済フローで十分 → Payment Links / Checkout
- 独自の決済フローが必要 → API連携
- 既存システムとの連携が必要 → API連携

導入スピードで判断する
- 今すぐ始めたい → Payment Links
- 1〜2日で導入したい → Checkout
- じっくり構築したい → API連携

多くの中小企業では、Payment LinksまたはCheckoutから始めて、事業成長に合わせてAPI連携に移行するケースが一般的です。

Payment Links：5分で始める決済

Payment Linksの特徴

管理画面から決済リンクを作成し、URLを共有するだけで決済を受け付けられます。プログラミング知識は一切不要です。

適している用途
- コンサルタント・士業の相談料受付
- クリエイターの作品販売
- イベントチケット販売
- オンライン講座の受講料

できること
- 単発販売・定期課金
- 数量制限・クーポン発行
- 税金の自動計算

制限事項
- 複数商品の同時購入は不可
- 在庫自動管理は不可
- デザインカスタマイズは限定的

決済リンクの作成手順

ダッシュボードから「支払いリンク」→「新規」を選択
商品情報を入力（名前・金額・説明・画像）
オプション設定（数量調整・税率・配送先住所）
決済完了後の設定（確認メッセージまたはリダイレクトURL）
「リンクを作成」でhttps://buy.stripe.com/xxxxx形式のURLを取得

リンクの活用方法

メールでの送付

お支払いは以下のリンクからお願いいたします。
https://buy.stripe.com/xxxxx

Webサイトへの埋め込み

<a href="https://buy.stripe.com/xxxxx">今すぐ購入</a>

SNSでの共有
Instagram、Twitter、FacebookのプロフィールやDMで共有可能です。

Checkout：自社サイトに組み込む決済

Checkoutの特徴

Stripeが用意した決済ページに顧客を遷移させる方法です。数行のコードで実装でき、セキュリティ対策もStripe側で完結します。

メリット
- HTML/JavaScript基礎知識で実装可能
- PCI DSS準拠のセキュリティ
- 多言語・多通貨に自動対応
- モバイル最適化済み

デメリット
- Stripeページへの遷移が発生
- デザインカスタマイズに制限

最適な用途
ECサイト、イベントチケット販売、オンライン講座など、標準的な決済フローで十分な場合に適しています。

実装手順

1. Stripeアカウント作成

Stripe公式サイトで以下を登録：
- メールアドレス・会社名・氏名
- 事業の種類・業種
- 銀行口座情報

2. 商品情報の登録

ダッシュボードから「商品カタログ」→「商品を追加」を選択し、商品名・価格・課金タイプを設定します。作成された価格ID（price_xxxxx）をメモしてください。

3. 決済フォームの実装

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>商品購入ページ</title>
    <script src="https://js.stripe.com/v3/"></script>
</head>
<body>
    <h1>プレミアムプラン</h1>
    <p>月額5,000円</p>
    <button id="checkout-button">購入する</button>

    <script>
        const stripe = Stripe('pk_test_xxxxxxxxxxxxx');

        document.getElementById('checkout-button').addEventListener('click', () => {
            stripe.redirectToCheckout({
                lineItems: [{
                    price: 'price_xxxxxxxxxxxxx',
                    quantity: 1,
                }],
                mode: 'payment',
                successUrl: 'https://yoursite.com/success',
                cancelUrl: 'https://yoursite.com/cancel',
            });
        });
    </script>
</body>
</html>

4. テスト決済で確認

テスト用カード番号4242 4242 4242 4242で動作確認します。有効期限は未来の日付、CVCは任意の3桁を入力してください。

API連携：独自の決済システムを構築

API連携が必要なケース

以下の要件がある場合、Payment Intents APIを使った実装が必要です。

利用量に応じた従量課金など複雑な料金計算
会員管理システムやERPとの深い連携
サイト内で完結する決済（ページ遷移なし）
独自の承認フローを含む決済プロセス

実装の基本フロー

サーバー側：PaymentIntentを作成
クライアント側：カード情報を入力
クライアント側：カード情報をStripeに送信してトークン化
サーバー側：PaymentIntentを確定
Stripe：決済処理を実行
サーバー側：結果を受け取り後処理を実行

サーバーサイドの実装例

const express = require('express');
const stripe = require('stripe')('sk_test_xxxxxxxxxxxxx');
const app = express();

app.use(express.json());

app.post('/create-payment-intent', async (req, res) => {
    const { amount } = req.body;

    const paymentIntent = await stripe.paymentIntents.create({
        amount: amount,
        currency: 'jpy',
        automatic_payment_methods: { enabled: true },
    });

    res.json({ clientSecret: paymentIntent.client_secret });
});

app.listen(3000);

クライアントサイドの実装例

<form id="payment-form">
    <div id="card-element"></div>
    <button id="submit-button">支払う</button>
</form>

<script>
    const stripe = Stripe('pk_test_xxxxxxxxxxxxx');
    const elements = stripe.elements();
    const cardElement = elements.create('card');
    cardElement.mount('#card-element');

    document.getElementById('payment-form').addEventListener('submit', async (e) => {
        e.preventDefault();

        const response = await fetch('/create-payment-intent', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ amount: 5000 }),
        });
        const { clientSecret } = await response.json();

        const { error, paymentIntent } = await stripe.confirmCardPayment(
            clientSecret,
            { payment_method: { card: cardElement } }
        );

        if (error) {
            alert(error.message);
        } else if (paymentIntent.status === 'succeeded') {
            alert('決済完了');
        }
    });
</script>

セキュリティ対策のポイント

役割分担の原則
- サーバー側：金額決定、PaymentIntent作成、Webhook処理
- クライアント側：カード情報入力、トークン化、決済確定

必須のセキュリティ対策
- カード情報は自社サーバーを経由させない
- 金額の決定はサーバー側で行う
- シークレットキーをクライアント側に露出させない
- 本番環境では必ずHTTPS通信を使用

実装後の必須設定

本番環境への移行チェックリスト

[ ] テストモードで十分な動作確認を実施
[ ] 本番用APIキーに切り替え
[ ] HTTPS通信の有効化
[ ] エラーハンドリングの実装
[ ] Webhook URLの設定
[ ] 決済成功・失敗時の処理確認

Webhookで決済完了を受け取る

Webhookを設定すると、決済完了時にStripeから自動通知を受け取れます。

設定手順
1. ダッシュボードから「開発者」→「Webhook」を選択
2. エンドポイントURL（例：https://yoursite.com/webhook）を登録
3. 受信するイベント（例：payment_intent.succeeded）を選択
4. 署名検証を実装してセキュリティを確保

ダッシュボードでの売上管理

ダッシュボードの「支払い」セクションで以下を確認できます：
- 決済履歴と詳細情報
- 返金処理
- 入金予定と入金履歴
- 顧客情報

よくある質問

うまく動かない時の原因トップ5

APIキーの誤り：テストモードと本番モードのキーを混同
価格IDの誤り：存在しない価格IDを指定
URLの形式エラー：リダイレクトURLがhttps://で始まっていない
CORS エラー：サーバー側でCORS設定が必要
Webhook署名検証の失敗：署名シークレットの設定ミス

手数料と入金サイクル

手数料
決済額の3.6%のみ。初期費用・月額費用は不要です。

入金サイクル
最短で翌々営業日に指定口座へ入金されます。ダッシュボードから入金予定を確認できます。

サブスクリプション決済への対応

Checkoutのmodeをsubscriptionに変更するだけで定期課金に対応できます。

stripe.redirectToCheckout({
    lineItems: [{ price: 'price_xxxxx', quantity: 1 }],
    mode: 'subscription', // 定期課金モード
    successUrl: 'https://yoursite.com/success',
    cancelUrl: 'https://yoursite.com/cancel',
});

外部サービスに頼る判断基準

以下の場合は、開発会社への依頼を検討しましょう：
- 複雑なビジネスロジックが必要
- 既存システムとの深い連携が必要
- セキュリティ要件が高い
- 社内に技術リソースがない

Harmonic Societyでは、中小企業向けの「ちょうどいい」決済システム構築を支援しています。必要最小限の機能から始めて、段階的に拡張するアプローチで、失敗リスクを減らし着実な成果につなげます。