![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F00e844dd-196f-4c4a-ba53-39a104ce46e8?alt=media&token=012b074e-2736-45cb-b57a-293e78ae1ba3)
## ✍️ 概要

本記事では、**Stripe**を用いて、3Dセキュアー・3D Secure対応の**クレジットカード登録**および**サブスクリプション課金**をNext.jsで実装する方法を紹介します。

* Stripe / React / Firebase Auth / Next.js API Routes / Cloud Functions
* 機能:

  * `SetupIntent` を使った3Dセキュア対応カード登録
  * `Subscription`作成時の3Dセキュア確認

---

## ✅ カード登録(SetupIntent) 実装

### 1. SetupIntent API

`pages/api/stripe/create_setup_intent.ts`

![img](/mosaic-code.jpg)

---

### 2. フロントエンド

`UserCreditCardModal.tsx`

![img](/mosaic-code.jpg)

---

## ✅ サブスクリプション課金時の3Dセキュア

### 1. Cloud Functions

`UserSubscriptionService.ts`

![img](/mosaic-code.jpg)

---

### 2. フロントエンド

![img](/mosaic-code.jpg)

---

## 🧠 実装ポイント

| 機能        | 使用API                             | 解説                |
| --------- | --------------------------------- | ----------------- |
| カード登録     | SetupIntent + confirmCardSetup    | 3Dセキュア対応の支払い方法上保存 |
| サブスクリプション | Subscription + confirmCardPayment | 3Dセキュアの要約がある場合の確認 |

---

## 📉 補説

* Firebase Auth のIDトークンをBearerで利用
* `payment_behavior: 'default_incomplete'`で未認証カードの登録も可
* `expand: ['latest_invoice.payment_intent']`でclient\_secretを取得

---

## ✅ まとめ

Stripeでの3Dセキュア対応は、下記の構成が重要です。

* カード登録時: `SetupIntent` + `confirmCardSetup`
* 課金時: `Subscription` + `confirmCardPayment`

これにより、安全な請求フローを構築できます。

[cv:issue_marketplace_engineer]




![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F00e844dd-196f-4c4a-ba53-39a104ce46e8?alt=media&token=012b074e-2736-45cb-b57a-293e78ae1ba3)
## ✍️ 概要

本記事では、**Stripe**を用いて、3Dセキュアー・3D Secure対応の**クレジットカード登録**および**サブスクリプション課金**をNext.jsで実装する方法を紹介します。

* Stripe / React / Firebase Auth / Next.js API Routes / Cloud Functions
* 機能:

  * `SetupIntent` を使った3Dセキュア対応カード登録
  * `Subscription`作成時の3Dセキュア確認

---

## ✅ カード登録(SetupIntent) 実装

### 1. SetupIntent API

`pages/api/stripe/create_setup_intent.ts`

```ts
import Stripe from 'stripe'
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY as string)
import { auth } from 'src/config/backend/firebase'
import type { NextApiRequest, NextApiResponse } from 'next'

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const { customer_id } = req.body
  const token = (req.headers.authorization || '').replace('Bearer ', '')
  const decoded = await auth.verifyIdToken(token)
  if (!decoded.uid) return res.status(401).json({ message: 'Invalid token' })

  const setupIntent = await stripe.setupIntents.create({
    customer: customer_id,
    payment_method_types: ['card'],
  })

  res.json({ clientSecret: setupIntent.client_secret })
}
```

---

### 2. フロントエンド

`UserCreditCardModal.tsx`

```tsx
const handleSubmit = async (event) => {
  event.preventDefault()
  const currentUser = auth.currentUser
  if (!currentUser) throw new Error('ログインが必要です')

  const { paymentMethod } = await stripe.createPaymentMethod({
    type: 'card',
    card: elements.getElement(CardElement),
  })

  const response = await axios.post(
    '/api/stripe/create_setup_intent',
    { customer_id: user.stripeCustomerId },
    {
      headers: {
        Authorization: `Bearer ${await currentUser.getIdToken(false)}`,
      },
    }
  )

  const { clientSecret } = response.data

  const result = await stripe.confirmCardSetup(clientSecret, {
    payment_method: {
      card: elements.getElement(CardElement),
      billing_details: { name: getUserName(user) },
    },
  })

  if (result.error) {
    // エラー処理
    return
  }

  const paymentMethodId = result.setupIntent.payment_method as string
  await update(paymentMethodId)
}
```

---

## ✅ サブスクリプション課金時の3Dセキュア

### 1. Cloud Functions

`UserSubscriptionService.ts`

```ts
const stripeSubscription = await stripe.subscriptions.create({
  customer: stripeCustomerId,
  items: [{ price: config().issue.stripe.subscription.user.basic_plan.price_id }],
  default_payment_method: user.stripePaymentMethodId,
  payment_behavior: 'default_incomplete',
  expand: ['latest_invoice.payment_intent'],
  automatic_tax: { enabled: true },
})

const paymentIntent = (stripeSubscription.latest_invoice as Stripe.Invoice)
  .payment_intent as Stripe.PaymentIntent

return {
  clientSecret: paymentIntent?.client_secret ?? null,
  status: paymentIntent?.status ?? null,
}
```

---

### 2. フロントエンド

```ts
if (
  userSubscriptionPlan.name === UserSubscriptionPlan.Basic.name &&
  status === 'requires_confirmation'
) {
  await stripe.confirmCardPayment(clientSecret)
}
```

---

## 🧠 実装ポイント

| 機能        | 使用API                             | 解説                |
| --------- | --------------------------------- | ----------------- |
| カード登録     | SetupIntent + confirmCardSetup    | 3Dセキュア対応の支払い方法上保存 |
| サブスクリプション | Subscription + confirmCardPayment | 3Dセキュアの要約がある場合の確認 |

---

## 📉 補説

* Firebase Auth のIDトークンをBearerで利用
* `payment_behavior: 'default_incomplete'`で未認証カードの登録も可
* `expand: ['latest_invoice.payment_intent']`でclient\_secretを取得

---

## ✅ まとめ

Stripeでの3Dセキュア対応は、下記の構成が重要です。

* カード登録時: `SetupIntent` + `confirmCardSetup`
* 課金時: `Subscription` + `confirmCardPayment`

これにより、安全な請求フローを構築できます。






✍️ 概要

続きを読むには単価診断を受けてください（30秒）