如何按国家法规配置Stripe CardElement？印度合规报错求助

问题场景 #

点击Pay按钮后，已生成Stripe Customer ID，但触发错误：

Error: As per Indian regulations, export transactions require a customer name and address

解决方案 #

印度监管要求跨境交易必须关联客户的姓名与完整地址，需要在PaymentMethod创建流程中添加这些信息，具体步骤如下：

1. 在JSX中添加客户信息输入字段

在CardElement上方添加姓名、地址相关的输入框，用于收集客户信息：

<div className="SubsCard">
     <div className="SubsCardTitle">Enter card details</div>
     {/* 新增客户信息输入字段 */}
     <input 
        type="text" 
        placeholder="Full Name" 
        ref={nameRef} 
        className="customer-input"
        required
     />
     <input 
        type="text" 
        placeholder="Address Line 1" 
        ref={addressLine1Ref} 
        className="customer-input"
        required
     />
     <input 
        type="text" 
        placeholder="City" 
        ref={cityRef} 
        className="customer-input"
        required
     />
     <input 
        type="text" 
        placeholder="Postal Code" 
        ref={postalCodeRef} 
        className="customer-input"
        required
     />
     <input 
        type="text" 
        placeholder="State" 
        ref={stateRef} 
        className="customer-input"
        required
     />
     <CardElement />
     <Button variant="primary" onClick={onPayClickHandler}>
            Pay
     </Button>
</div>

2. 修改React逻辑，传入客户信息到PaymentMethod

使用useRef获取输入框的值，在创建PaymentMethod时通过billing_details字段传入合规所需的信息：

import { useRef } from 'react';
const stripe = useStripe();
const elements = useElements();

// 创建ref绑定输入字段
const nameRef = useRef<HTMLInputElement>(null);
const addressLine1Ref = useRef<HTMLInputElement>(null);
const cityRef = useRef<HTMLInputElement>(null);
const postalCodeRef = useRef<HTMLInputElement>(null);
const stateRef = useRef<HTMLInputElement>(null);

const onPayClickHandler = async (event: React.MouseEvent<HTMLElement>) => {
        event.preventDefault();
        try {
            const cardElement = elements.getElement(CardElement);
            // 获取输入的客户信息
            const customerName = nameRef.current?.value;
            const addressLine1 = addressLine1Ref.current?.value;
            const city = cityRef.current?.value;
            const postalCode = postalCodeRef.current?.value;
            const state = stateRef.current?.value;

            // 校验必填字段
            if (!customerName || !addressLine1 || !city || !postalCode || !state) {
                alert("请填写所有客户信息");
                return;
            }

            const { paymentMethod, error } = await stripe.createPaymentMethod({
                type: "card",
                card: cardElement,
                // 传入账单信息，满足印度合规要求
                billing_details: {
                    name: customerName,
                    address: {
                        line1: addressLine1,
                        city: city,
                        postal_code: postalCode,
                        state: state,
                        country: "IN" // 固定为印度国家代码
                    }
                }
            });

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

            // 若后端创建Customer时需要这些信息，可一并传入请求体
            const response = await axios.post("/subscriptions", { 
                plan: "price_1LzFhSSAy6HVqYxUjUW7uUd1", 
                payment_method: paymentMethod.id,
                customer_name: customerName,
                customer_address: {
                    line1: addressLine1,
                    city: city,
                    postal_code: postalCode,
                    state: state,
                    country: "IN"
                }
            });
           
            // 后续错误处理代码........... 
           
        } catch (err) {
            console.log(err);
        }
    };

3. 后端补充（可选但建议）

如果后端是通过Stripe API创建Customer对象，需要将收集到的姓名和地址传入Customer的name和address字段，确保Customer信息也符合合规要求，避免后续交易触发错误。

内容的提问来源于stack exchange，提问作者Pawan