如何让Stripe Elements默认显示邮政编码输入框？

数据老陈

2026-6-15

解决Stripe Card Element邮编字段默认显示问题

默认的Stripe Card复合元素会根据输入的卡号自动识别地区，仅当该地区要求提供邮编时才显示邮编字段，所以仅设置hidePostalCode: false无法让邮编框在页面加载时就显示。要实现这一需求，你需要改用独立的卡号元素和邮编元素，而非复合的Card元素。

步骤1：修改HTML结构

将原来的单个card-element拆分为两个独立容器，分别用于挂载卡号和邮编元素：

<div id="card-number-element" class="form-control my-in"></div>
<div id="postal-code-element" class="form-control my-in mt-3"></div>
<button class="btn btn-primary proseed submit-but single-but update-car" id="place-order">Pay Now</button>

步骤2：更新JavaScript代码

创建cardNumber和postalCode两个独立元素，分别挂载到对应的容器中：

const stripe = Stripe('my-stripe-key');
const elements = stripe.elements();

// 创建卡号元素
const cardNumberElement = elements.create("cardNumber", {
    style: {
        base: {
            color: "white",
            "::placeholder": {
                color: "white",
            },
        },
    },
});

// 创建邮编元素
const postalCodeElement = elements.create("postalCode", {
    style: {
        base: {
            color: "white",
            "::placeholder": {
                color: "white",
            },
        },
    },
});

// 挂载元素到页面
cardNumberElement.mount("#card-number-element");
postalCodeElement.mount("#postal-code-element");

额外说明

独立元素模式下，邮编字段会在页面加载后立即显示，完全符合需求。

提交支付时，依然可以通过stripe.createPaymentMethod同时获取卡号和邮编信息，用法与复合元素一致：

// 示例：创建支付方法
const {error, paymentMethod} = await stripe.createPaymentMethod({
  type: 'card',
  card: cardNumberElement,
  billing_details: {
    // 若需要其他账单信息可补充
  },
});