reactjs 如何根据国家/地区法规更改条纹CardElement?

p4tfgftt  于 2022-11-04  发布在  React
关注(0)|答案(1)|浏览(107)

我正在尝试实现条带化订阅。
下面是我的react代码:

const stripe = useStripe();
const elements = useElements();

 const onPayClickHandler = async (event: React.MouseEvent<HTMLElement>) => {
        event.preventDefault();
        try {

            const cardElement = elements.getElement(CardElement);

            const { paymentMethod, error } = await stripe.createPaymentMethod({
                type: "card",
                card: cardElement,
            });

            if (error) {
                alert(error.message);
                return;
            }

            const response = await axios.post("/subscriptions", { plan: "price_1LzFhSSAy6HVqYxUjUW7uUd1", payment_method: paymentMethod.id });

            //Error handling code........... 

        } catch (err) {
            console.log(err);
        }
    };

下面是jsx部分:

<div className="SubsCard">
     <div className="SubsCardTitle">Enter card details</div>
          <CardElement />
          <Button variant="primary" onClick={onPayClickHandler}>
                 Pay
          </Button>
    </div>
</div>

当我点击Pay按钮时,我可以看到我的stripe customer id正在生成,但随后我得到一个错误消息,说Error: As per Indian regulations, export transactions require a customer name and address
如何在CardElement中添加customer nameaddress字段,请指导。

46qrfjad

46qrfjad1#

如何在CardElement中添加客户名称和地址字段
您通常不会这样做,因为CardElement只收集基本的编号/有效期/CVC/邮政编码字段,而不收集其他字段。
这里的建议是:

  • 使用Checkout作为Stripe的托管支付页面,该页面将收集所需的一切,而不是直接集成CardElement:https://stripe.com/docs/billing/subscriptions/build-subscriptions?ui=checkout
  • 如果您自己构建此服务器,则需要
  • 添加您自己的HTML输入以收集客户的名称和地址
  • 将这些值发送到后端服务器
  • 在后端创建客户对象时,将它们提供给客户创建或更新API。(https:stripe.com/docs/api/customers/create#create_customer-namehttps://stripe.com/docs/api/customers/create#create_customer-address)

相关问题