产品

Stripe Elements

构建美观、智能的结账流程

Stripe Elements 是丰富的预构建 UI 组件，可帮助您在桌面和移动端创建清晰完美的结账流程。

尝试一下 探索文档

Donate with
Or pay with card
Address
Name City
Email State
Phone Zip Code
Card Number
Expiration
$1
$5
Jane Doe 185 Berry St Jane Doe $20
janedoe@gmail.com San Francisco janedoe@gmail.com $50
(941) 555-0123 CA (941) 555-0123 $100
4242 5200 8282 8282 8210 6011 0009 9013 9424 98431
MM/YY MM/YY MM/YY MM/YY
CVC CVC CVC CVC
ZIP 94107 ZIP Code ZIP
Pay $25 Pay $25 Pay $25 Donate $5

为您的客户提供最佳支付体验

Stripe Elements 集合了 Stripe 前端工程师、设计师以及分析团队的共同经验。Elements 有助于您的客户快速准确的输入，进而最大程度减少用户出错的可能性，增加成功支付的几率。

  • 实时验证

    当客户键入时，自动提供实时反馈，做到第一时间捕获错误信息。

  • 本地化

    基于卡所属国家动态检测需要输入的内容，并进行相应的本地化。

  • 格式化和屏蔽

    通过匹配用户在他们的银行卡上看到的格式，进一步简化用户输入操作。

卡号
月月/年年
卡安全码 (CVC)
ZIP
Visa 5556 04 / 21
Amex 98431 07 / 19
使用

  • Apple Pay 和付款请求

    一次集成，即可获取 Apple Pay 和付款请求 API （包括 Google Pay）。

  • 自动填充

    保证自动填充功能在各平台和浏览器的稳定运行，使客户更快结账。

  • 响应能力

    适应不同屏幕尺寸（从桌面到移动设备），必要时调用数字键盘。

卡号
月月/年年
卡安全码 (CVC)
ZIP
Visa 5556 04 / 21
Amex 98431 07 / 19
使用
var style = {
  base: {
    color: '#303238',
    fontSize: '16px',
    fontFamily: '"Open Sans", sans-serif',
    fontSmoothing: 'antialiased',
    '::placeholder': {
      color: '#CFD7DF',
    },
  },
  invalid: {
    color: '#e5424d',
    ':focus': {
      color: '#303238',
    },
  },
};

我们搭建，您来设计

Stripe Elements 具备定制功能，可完美匹配您的结账页面。使用 Elements，不用再使用托管支付页面，而是可以利用构建模块创建自己的结算页面。

不妨试试！在编辑器中编辑样式对象，以匹配您的表单样式。您可以使用多数 CSS 属性。

安全地收集支付信息

Stripe Elements 使所收集的支付信息更加安全，有助于防止恶意破坏分子窃取敏感信息。我们生成安全 iframe，使敏感信息与网站相互分离——消除各类攻击——同时依然为您提供全视野控制。

PCI 合规更简单

Stripe Elements 是与当前的 PCI 法规保持同步的最简单方式——不会有敏感数据达到您的服务器。您拥有使用最简单 PCI 合规表单的资格，这可以让您避开成本高昂和时间紧迫的审计工作。我们还可以自动生成自我评估问卷 (SAQ A) 文档。

代码更短，异常更少

Stripe Elements 附有内置的输入验证、格式化、掩蔽、样式及错误处理功能。这意味着您在维护结账代码、解决极端案例方面不需要再花费太多时间，同时还可以打造一种更好的支付体验。

格式化 
// Stripe.js v2 formatting helpers
$('input[name="card"]').on('input', () => {
  let brand = Payment.fns.cardType($('input[name="card"]').val());

  $('.credit-card-img').css('opacity', 0.4);
  $(`#${brand}`).css('opacity', 1);
});
验证 
// We only need to manually validate and format for Stripe.js v2.
$.fn.form.settings.rules.customBillingZip = (value) => {
  if (!$("[name='billingZipSame']").is(':checked') && value === '') {
    return false;
  }
  return true;
}

$.fn.form.settings.rules.customCVV = (value) => {
  return window.Stripe.validateCVC(value);
}

$.fn.form.settings.rules.customExp = (value) => {
  if (value.split('/').length === 1) {
    let sliceIndex = value.length % 2 ? 1 : 2;
    let value = `${value.slice(0, sliceIndex)}/${value.slice(sliceIndex, value.length)}`;
  }
  return window.Stripe.validateExpiry(value);
}

$.fn.form.settings.rules.customCardNumber = (value) => {
  return Payment.fns.validateCardNumber($('input[name="card"]').val());
}
return (formData, stripeResponseHandler) => {
  // Set up Stripe payload
  if (formData.exp.split('/').length > 1) {
    let exp = formData.exp.split('/');
  } else {
    let sliceIndex = formData.exp.length % 2 ? 1 : 2;
    let exp = [formData.exp.slice(0, sliceIndex), formData.exp.slice(sliceIndex, formData.exp.length)];
  }
  let payload = {
    number: formData.card,
    cvc: formData.cvv,
    exp_month: parseInt(exp[0]),
    exp_year: parseInt(exp[1])
  }
}
有效载荷 
// Send address if given.
if ($("name='billingZipSame']").is(':checked')) {
  payload.name = formData.name;
  payload.address_line1 = formData.address1;
  if (formData.address2) {
    payload.address_line2 = formData.address2;
  }
  payload.address_city = formData.city;
  payload.address_state = formData.state;
  payload.address_zip = formData.zip;
} else {
  payload.address_zip = formData.billingZip;
}
处理错误 
Stripe.card.createToken(payload, (status, res) => {
  if (res.error) {
    window.scrollTo(0, 0);
    $('.ui.form').form('add errors', [res.error.message]);
  }
  stripeResponseHandler(res);
});
本地化 
base.card = {
  rules: [{
    type: 'customCardNumber',
    prompt: translations['Enter a valid credit card number']
  }]
};

base.cvc = {
  rules: [{
    type: 'empty',
    prompt: translations['Enter a valid CVV code']
  }]
};

base.exp = {
  rules: [{
    type: 'customExp',
    prompt: translations['Enter a valid expiation date (MM/YYYY)']
  }]
};

base.billingZip = {
  rules: [{
    type: 'customBillingZip',
    prompt: translations['Must enter a billing zip']
  }]
};
Elements 
let Stripe = () => {}
let stripeClient = Stripe(key);
let stripeElements = stripeClient.elements()

let stripeCardElement = stripeElements.create('card', {
  style: {
    base: {
      fontSize: '16px',
      fontFamily: 'Lato, "Helvetica Neue", Arial, Helvetica, sans-serif',
      color: 'rgba(0,0,0,.87)'
    },
    invalid: {
      color: '#9F3A38',
      iconColor: '#9F3A38'
    },
    focus: {
      color: 'rgba(0,0,0,.95)'
    }
  }
});

专注于您的产品，我们来处理其他

经营在线业务并非易事。Stripe Elements 让您在安全和构建/优化结账体验方面充分利用 Stripe 的集体学习功能，从而做到让您更加专注于您的产品。

  • 浏览器自动填充支持
    确保您的表单与主流的桌面和手机浏览器支付自动填充系统相兼容
  • 第三方自动填充支持
    确保您的表单与各主要第三方自动填充软件的支付自动填充功能相匹配（例如 1Password、 LastPass）。
  • 卡品牌识别
    通过发送银行卡品牌自动检测指令、格式化和输入验证等驱动（例如 American Express，仅接受 4 位数卡安全码 (CVC)）来验证客户输入的信息。
  • 银行卡特定的卡安全码 (CVC) 提示
    通过向客户展示客户 CVC/CVV 的位置，将错误减至最少。
  • 输入掩码
    采用内置输入掩码，将错误减至最少。
  • 格式化
    当客户键入时，自动格式化其输入的内容，使其符合客户的期望。
  • 本地化错误消息
    错误消息采用您客户所用的语言，提供 15 种不同语言。
  • 本地化占位符
    向您的客户展示本地化的占位符（例如，美国采用“ZIP”，而英国采用“Postal Code”）。
  • 简单的 PCI 合规 (SAQ A)
    最大限度缩小您的 PCI 合规范围，因为 Elements 支持最简易的 PCI 合规验证表单——即，SAQ A。
  • 网页字体支持
    使用您想要的网页字体。
  • 从右至左语言支持
    支持从右向左输入，从而支持从右至左的语言。
  • 实时输入验证
    实时验证输入，将错误减至最少并降低脱线率。
  • 付款请求 API
    采用全新 W3C 支付请求 API，通过单个 Element 即可打通各种支付方式，并可自动检测客户的最佳支付选项。
  • Google Pay
    以单一 Element 支持 Google Pay。
  • Microsoft Pay
    以单一 Element 支持 Microsoft Pay。
  • Apple Pay
    以单一 Element 支持 Apple Pay。
  • 智能点击目标
    由于 Elements 可自动设置标签和边距上的点击部位，因而可使用与您的表单其余部分相兼容的安全输入字段。
  • 移动友好输入
    为客户展示适当的移动键盘，使输入更简单（例如，当客户需输入的内容为纯数字时，展示数字键盘）。
  • 移动友好导航
    确保您的客户可以使用本国移动导航箭头在输入框来回移动。
  • 可访问性
    符合 W3C ARIA 标准，提升可访问性以满足您所有客户的需求。
  • 动态邮编收集
    仅在必要时才采集邮编信息，因为 Elements 会动态地确定采集邮编是否会增加交易的成功几率或将欺诈风险降至最低。
  • 全宽/CJK 数字支持
    支持中文、日语、韩语软件键盘常用的 CJK 数字。
  • 响应式布局
    适应您客户的屏幕尺寸，Elements 会根据您客户的可用屏幕尺寸自动调整其布局，使小屏幕输入更加便捷。
  • 回应绑定
    利用 React Stripe.js 集成 Elements 和 React。
  • 完全可定制的样式
    使用 Elements 的模块化且可定制的样式精确创建您想要的表单
You’re viewing our website for Romania, but it looks like you’re in the United States. Switch to the United States site