如何在Stripe Elements中使用客户已保存的支付方式付款

你可以通过以下两种方式让Stripe Elements卡片表单的样式接近Checkout会话的风格：

1. 使用Appearance API自定义主题 #

初始化Elements时配置appearance参数，选择官方的stripe主题，还能微调细节匹配Checkout的视觉风格：

const stripe = Stripe('你的公钥');
const elements = stripe.elements({
  clientSecret: '你的PaymentIntent客户端密钥',
  appearance: {
    theme: 'stripe', // 启用贴近Checkout的预设主题
    variables: {
      colorPrimary: '#0070f3', // 匹配Checkout的主色调
      borderRadius: '4px',
      fontSizeBase: '16px',
      colorText: '#333'
    }
  }
});

// 创建并挂载卡片元素
const cardElement = elements.create('card');
cardElement.mount('#card-element');

如果需要更精细的样式控制，比如输入框的焦点状态、错误样式，可以添加rules配置：

appearance: {
  theme: 'stripe',
  rules: {
    '.Input': {
      borderColor: '#e0e0e0',
      '&:focus': {
        borderColor: '#0070f3',
        boxShadow: '0 0 0 1px #0070f3'
      }
    },
    '.Input--invalid': {
      borderColor: '#ff4444'
    },
    '.Label': {
      fontSize: '14px',
      color: '#666'
    }
  }
}

2. 使用Payment Element替代Card Element #

Stripe的payment元素是专门设计来贴近Checkout体验的，它默认整合了卡片输入、支付方式选择等组件，样式和Checkout高度一致：

const stripe = Stripe('你的公钥');
const elements = stripe.elements({
  clientSecret: '你的PaymentIntent客户端密钥'
});

// 创建并挂载Payment Element
const paymentElement = elements.create('payment');
paymentElement.mount('#payment-element');

这个元素会自动适配不同设备，并且支持多种支付方式，比单独的Card Element更接近Checkout的交互体验。

注意事项 #

• 确保使用最新版本的Stripe.js，旧版本可能不支持上述部分特性；
• 自定义样式时不要修改Stripe元素的核心结构，避免影响支付安全合规性。

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