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
为您的客户提供最佳支付体验
Stripe Elements 集合了 Stripe 前端工程师、设计师以及分析团队的共同经验。Elements 有助于您的客户快速准确的输入,进而最大程度减少用户出错的可能性,增加成功支付的几率。
卡号
月月/年年
卡安全码 (CVC)
ZIP
Visa 5556
04 / 21
Amex 98431
07 / 19
使用
卡号
月月/年年
卡安全码 (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 的模块化且可定制的样式精确创建您想要的表单