stripe.confirmCardPayment意图秘密返回空字符串

问题描述

我正在尝试使用Netlify函数在我的React应用程序中实现Stripe Elements Payment Intent。提交付款表格会返回错误：Unhandled Rejection (IntegrationError): Invalid value for stripe.confirmCardPayment intent secret: value should be a client secret of the form ${id}_secret_${secret}. You specified: .

我可以在paymentIntent对象中看到client_secret值，因此无服务器功能正在返回client_secret，但是我一定不能在客户端中适当地实现它。如果我将data.clientSecret作为参数传递给stripe.confirmCardPayment，则我的付款成功完成，但是Elements表单没有重置，这向我表明此实现存在问题。

setClientSecret是否未更新clientSecret上的状态？

这是我的Netlify函数：

const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);

exports.handler = async (event) => {  
  const paymentObject = JSON.parse(event.body);
  const amount = paymentObject.amount;
  const donorName = paymentObject.Metadata.donorName;
  const address = paymentObject.Metadata.address;
  const city = paymentObject.Metadata.city;
  const state = paymentObject.Metadata.state;
  const zip = paymentObject.Metadata.zip;
  const email = paymentObject.Metadata.email

  try {
    const paymentIntent = await stripe.paymentIntents.create({
      amount,currency: 'usd',description: 'USS Idaho Donation',receipt_email: email,Metadata: {
        donorName,address,city,state,zip,email,},});
    return {
      statusCode: 200,body: JSON.stringify({ 
        paymentIntent,clientSecret: paymentIntent.client_secret
      })
    };
  } catch (error) {
    console.log({ error });

    return {
      statusCode: 400,body: JSON.stringify({ error }),};
  }
};

handleSubmit函数：

const handleSubmit = async ev => {
    ev.preventDefault();
    setProcessing(true);

    window
      .fetch("/.netlify/functions/charge",{
        method: "POST",headers: {
          "Content-Type": "application/json"
        },body: JSON.stringify({
          amount,Metadata: {
             donorName: donorName,address: address,city: city,state: state,zip: zip,email: email
            }
          }
        )
      })
      .then(res => {
        return res.json();
        
      })
      .then(data => {
        setClientSecret(data.clientSecret)
        console.log(`clientSecret: ${clientSecret}`)
        
        const payload = stripe.confirmCardPayment(data.clientSecret,{
          payment_method: {
            card: elements.getElement(CardElement)
          }
        });
        
        if (payload.error) {
          setError(`Payment Failed: ${payload.error.message}`);
          setProcessing(false);
        } else {
          setError(null);
          setProcessing(false);
          setSucceeded(true);
          reset();
        } 
        
      })
  };

解决方法

stripe.confirmCardPayment函数返回一个Promise，因此您需要等待该Promise解析后才能更新组件状态：

• https://stripe.com/docs/js/payment_intents/confirm_card_payment（向下滚动到“返回”部分）

在您的代码中，该代码类似于：

const handleSubmit = async ev => {
    ev.preventDefault();
    setProcessing(true);

    window
      .fetch("/.netlify/functions/charge",{
        method: "POST",headers: {
          "Content-Type": "application/json"
        },body: JSON.stringify({
          amount,receipt_email: email,metadata: {
             donorName: donorName,address: address,city: city,state: state,zip: zip,email: email
            }
          }
        )
      })
      .then(res => {
        return res.json();
        
      })
      .then(data => {
        setClientSecret(data.clientSecret);
        
        return stripe.confirmCardPayment(data.clientSecret,{
          payment_method: {
            card: elements.getElement(CardElement)
          }
        });
      })
      .then((paymentResult) => {
        if (paymentResult.error) {
          setError(`Payment failed: ${payload.error.message}`);
          setProcessing(false);
        } else {
          if (paymentResult.paymentIntent.status === 'succeeded') {
            setError(null);
            setProcessing(false);
            setSucceeded(true);
            reset();
          }
        }
      });
  };