Stripe決済できない。サーバー側へのリクエストが失敗する。

Question

Stripe決済を実装しようとしています。しかしサーバー側へのリクエストが失敗してしまいます。

import stripe from "../../../../lib/stripe";

export default async (req, res) => {
  try {
    const price = req.body.price;
    // 店舗のID
    const stripeConnectedAccountId = req.query.id;
    // 顧客のID
    const customerId = req.body.customer_id;

    // 顧客のカードの登録情報を取得（複数のカードが登録されている場合は、複数件のカード情報をする）
    // 指定された顧客のPaymentMethodを一覧取得
    const paymentMethodData = await stripe.paymentMethods.list({
      customer: customerId,
      type: "card",
    });

    // 店舗毎に顧客と支払い情報を登録する必要がある
    // 参考：https://stripe.com/docs/payments/payment-methods/connect#cloning-payment-methods

    // 店舗毎(stripeConnectedAccountId)にクレジットカード情報(payment_method)を複製
    const clonedPaymentMethod = await stripe.paymentMethods.create(
      {
        customer: customerId,
        payment_method: paymentMethodData.data[0].id,
      },
      {
        stripeAccount: stripeConnectedAccountId,
      }
    );

    // 店舗毎(stripeConnectedAccountId)に顧客情報を複製(customer))を複製
    const clonedCustomer = await stripe.customers.create(
      {
        payment_method: clonedPaymentMethod.id,
      },
      {
        stripeAccount: stripeConnectedAccountId,
      }
    );

    // 上記の複製したpayment_methodとaccountを使用し、支払いのためのセットアップを行う
    // intentは支払いフローを定義するオブジェクト
    const paymentIntent = await stripe.paymentIntents.create(
      {
        amount: price,
        currency: "jpy",
        payment_method_types: ["card"],
        payment_method: clonedPaymentMethod.id,
        customer: clonedCustomer.id,
        // description: `${item.name}の購入代金`,
        // metadata: { name: item.name, price: item.price },
      },
      {
        stripeAccount: stripeConnectedAccountId,
      }
    );

    // 支払い処理自体はブラウザから行う必要があるため、決済に必要なキー(client_secret)をフロントに渡す
    res.statusCode = 201;
    res.json({
      client_secret: paymentIntent.client_secret,
    });
  } catch (err) {
    console.error(err);
    res.status(500).send({
      error: err.message,
    });
  }
};

ここのコードでエラーが出ています。
どうしていいか全く分からなくてこちらで質問させてもらいます。
ご教授いただけると幸いです。

Comments

[CHERRY]

どこで、どのようなエラーが出るのでしょうか？

[kobayashiteppei]

決済を実行する際に、フロントにステータスコード500が帰ってきて、その後下記のエラーが出ます。
Uncaught (in promise) IntegrationError:
Invalid value for stripe.confirmCardPayment intent secret: value should be a client_secret string. You specified: undefined.

[kobayashiteppei]

このアプリケーションサーバーに対するリクエストは下記です。
import { useStripe } from "@stripe/react-stripe-js";
import { POST } from "../lib/axios";
import * as React from "react";
import styles from "../styles/Home.module.scss";
import { Button } from "@material-ui/core";
import { TextField } from "@material-ui/core";
import PageHeader from "./PageHeader";
import Layout from "./Layout";

const CheckoutForm = (props) => {
const [message, setMessage] = React.useState();
const [customPrice, setCustomPrice] = React.useState();

const stripe = useStripe();

const handleSubmit = async () => {
setMessage("処理中...");
//現在の顧客のID
const result = await POST(`/api/shop/${props.shopId}/buy`, {
customer_id: props.customerId,
price: props.price,
});

const confirm_result = window.confirm(
"選択した商品を購入します。よろしいですか？"
);

if (confirm_result) {
const paymentResult = await stripe
.confirmCardPayment(result.client_secret)
.then(() => {
setMessage("購入しました");
})
.catch(() => {
setMessage("失敗しました");
});

paymentResult();
} else {
setMessage("");
}
};

return (
<>
<div className={styles.checkoutform}>
{message && <div className={styles.processing}>{message}</div>}

<form onSubmit={() => handleSubmit()}>
<TextField
type="text"
id="outlined-basic"
label="金額"
variant="outlined"
defaultValue={customPrice}
onChange={(e) => setCustomPrice(e.target.value)}
/>
<br></br>
<Button onClick={(e) => handleSubmit(e)} variant="contained">
決済する
</Button>
</form>
</div>
</>
);
};

export default CheckoutForm;