Elements

构建像素级完美支付体验

Stripe 提供丰富的 UI 构建基块套件,帮助您打造与您网站完美匹配的安全支付体验,助力提升转化率。

全名
Jane Diaz
国家
美国
地址
街道地址
Card
Afterpay
Klarna
卡号
1234 1234 1234 1234
有效期
月份/年份
安全码
CVV
提交订单
邮件地址
jane.diaz@example.com
国家
荷兰
iDEAL
SEPA Debit
iDEAL 银行
ING 银行
完成结账
姓名
Jane Diaz
国家
中国
邮编
城市
地区
地址
街道地址
Alipay
Card
支付 US$450.00

可自定义组件

选择您需要的 Elements 并用 CSS 级样式工具匹配您网站的外观样式。

为更优转化率打造

利用内置功能如无障碍访问、错误提示、输入掩码、自动填充等,省去开发时间,避免用户操作上的复杂性。

解锁新市场

通过单一集成,利用 40+ 种支付方式触达更多用户。从管理平台中轻松运行 A/B 测试并管理支付方式。

帮助保持支付安全

Stripe 的平台满足行业认证标准,可减轻您公司的合规负担。

可定制的模块化组件

强大的构建块,帮助优化网页和移动端转化率

我们提供经过优化的组件化 UI 套件,助您轻松收集支付信息和客户地址、提供移动支付钱包选项等。采用 Stripe Payment Element 的商家,其收入平均增长了 11.9%。

内置支付逻辑

Stripe 的 Payment Element 具有屏蔽、样式化、错误处理功能,且可在客户端进行输入验证,确定卡片是否可用。它还通过 Adaptive Pricing 实现本地化定价,支持接入 100 多种支付方式,并运用 AI 模型为客户智能推荐相关支付方式——即使在 Stripe 之外处理银行卡支付也是一样。

  • 银行卡
  • ACH 借记
  • Google Pay
  • Afterpay / Clearpay
  • Affirm
  • iDEAL
  • 支付宝
  • Klarna
  • Apple Pay
  • Konbini
  • Amazon Pay
  • BECS 直接借记
  • OXXO
  • Bancontact
  • Przelewy24
  • Boleto
  • SEPA 直接借记
  • EPS
  • BACS 直接借记
  • MobilePay
Card
ACH bank debit
Card number
1234 1234 1234 1234
Expiration date
MM/YY
Security code
CVV
Pay US$175.00
Klarna
Card
PayPal
Name
Alistair Hanton
Land oder Region
Deutschland
Zahle €90.00
Card
Klarna
Clearpay
Card number
1234 1234 1234 1234
Expiration date
MM/YY
Security code
CVV
Pay £235.00
Boleto
Cartão
CPF/CNPJ
123.456.789-00
Nome
Jane Diaz
Pague R$160.00

用 Link 提高结账转化率

Link 可自动填充客户的支付和配送详情,打造了一种简单又安全的结账体验。

运作机制

客户可以选择在 Stripe 网络中支持 Link 的任意网站上保存其支付详情,然后在未来购物时 Link 会自动填充。当客户在新的网站或设备上使用 Link 时,他们会收到一个一次性验证码来验证其身份。

提升转化率

创建无阻结账流程——拥有大量回头客的商家,回头客的平均转化率增加了 14%。

加速结账

通过优化的 Link 体验,让客户数秒完成结账——比非 Link 客户快 3 倍。

支付
US$120
小计
US$120
配送
免费
合计
US$120
结账
邮件地址
jane.diaz@example.com
收货地址
Jane Diaz
27 Fredrick Ave
Brothers, OR 97712
支付方式
•••• 7764
支付 US$120
付款成功
US$120
这笔付款会在您的对账单上显示为“Italic”。

看看我们的其他 Elements

构建由我,设计由你

控制方方面面的体验

通过我们的通用 API 和库,您既能享受到预构建组件的便捷,又能拥有自定义 UI 的灵活性。使用 React 或 JavaScript 可创建您理想的网页端集成,也可以利用我们的 iOSAndroidReact Native SDK,来打造简洁的移动支付流程。

Card
Apple Pay
卡号
1234 1234 1234 1234
有效期
月份/年份
安全码
CVV
国家
美国
邮编
12345
Card
Google Pay
卡号
1234 1234 1234 1234
有效期
月份/年份
安全码
CVV
国家
美国
邮编
90210
Card
Apple Pay
卡号
1234 1234 1234 1234
有效期
月份/年份
安全码
CVV
国家
美国
邮编
90210
// 用 JavaScript 设计 Elements 的样式 const appearance = { variables: { fontFamily: "Sohne, system-ui, sans-serif", fontSizeBase: "14px", fontWeightNormal: "500", borderRadius: "8px", colorPrimary: "#FFCE48", colorText: "white", colorTextSecondary: "white", colorTextPlaceholder: "#727F96", tabIconColor: "white", tabIconSelectedColor: "#1A1B25", logoColor: "dark", }, rules: { ".Tab": { backgroundColor: "#0A2540", }, ".Tab--selected": { backgroundColor: "#FFCE48", color: "#1A1B25", }, ".Input": { backgroundColor: "transparent", border: "1.5px solid #FFCE48", }, }, };
~
// 用 JavaScript 设计 Elements 的样式 const appearance = { theme: "flat", variables: { colorBackground: "#fff", fontSizeBase: "14px", fontWeightNormal: "500", borderRadius: "2px", tabIconSelectedColor: "white", gridRowSpacing: "15px", }, rules: { ".Label": { marginBottom: "6px", }, ".Tab, .Input": { boxShadow: "0px 3px 10px rgba(18, 42, 66, 0.08)", }, ".Tab--selected": { backgroundColor: "#DF1B41", color: "white", }, }, };
~
// 用 JavaScript 设计 Elements 的样式 const appearance = { variables: { fontFamily: "Verdana", fontSizeBase: "14px", borderRadius: "0", colorBackground: "#dfdfdf", }, rules: { ".Input": { backgroundColor: "#ffffff", boxShadow: "inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080", }, ".Tab, .Block": { boxShadow: "inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf", }, ".Tab--selected, .Tab--selected:focus, .Tab--selected:hover": { backgroundColor: "#ccc", }, }, };
~

完全定制

CSS 属性自定义字体、颜色、间距,等等。

代码更少,错误更少

别浪费时间在支付上作无用功

针对优化转化率构建支付体验是一项艰难的任务。Elements 可以让您充分利用 Stripe 在前端、设计和分析方面的全方位经验,在支付上少花时间,把更多时间花在您的产品上。

UI 优化

  • 客户端输入验证
  • 输入屏蔽
  • 银行卡特定的卡安全码 (CVC) 提示
  • 内置可访问性 (ARIA)
  • 通过浏览器和验证服务自动填充

移动友好

  • 响应性布局
  • 动态数字小键盘
  • 移动友好导航
  • 内置银行卡扫描
  • Apple Pay
  • Google Pay

本地化体验

  • 全角/CJK 数字符号
  • 本地化错误消息
  • 从右至左的语言
  • 智能支付方式选择
  • 动态邮编收集

简化合规

  • AES-256 卡号加密
  • 满足 SCA 要求的解决方案
  • 轻松 PCI 验证

定价

定价简洁透明

Stripe Elements 已包含在 Stripe 的综合定价中,让您可以接受信用卡、借记卡、移动钱包等方式的付款。

已包含

在 Stripe Payments 的费用内

选择您的路径

开启收款的其他选项

Stripe 的所有支付 UI 都可让您立即获取 40+ 种支付方式,支持 35+ 种语言和 135+ 种货币。不妨选择最适合您业务的集成。

支付成功
感谢购买!来自 POWDUR 的付款会显示在您的对账单上。
POWDUR
US$65.00
Payment Links

可分享的支付链接

最快的收款方式——无需代码

  • 通过电子邮件、短信或任何其他渠道分享链接
  • 接受一次性付款、经常性付款或可随心付的款项
  • 把您的链接变成二维码或者一个可嵌入的购买按钮
邮箱
jane.diaz@example.com
银行卡信息
1234 1234 1234 1234
MM/YY
CVC
持卡人姓名
Jane Diaz
国家或地区
美国
Checkout

预构建支付表单

经优化的结账页面可带来更高转化率,帮助您加速业务启动

  • 嵌入您的网站或重定向到一个 Stripe 托管的页面
  • 定制颜色和字体,使其匹配您的品牌元素
  • 轻松添加经常性付款和 Stripe Tax 功能

准备好开始了?联系我们或创建账户

立即创建账户开始收款,无需合同或银行信息。如需定制套餐方案,欢迎与我们联系。

Morty Proxy This is a proxified and sanitized view of the page, visit original site.