Stripe支付简介和前端js调用
最近公司正在做一个国际版APP，涉及到海外支付，调研过Paypal、Skrill、BrainTree、Stripe（可参考海外移动支付方案对比），最终 选择了Stripe支付。Stripe特点如下：
- 收费规则简单透明，手续费就是收取订单总额的3.4 % + HK$2.35。没有月费、开户费、退款手续费，撤销付款费用手续费HK$85.00
- Stripe支持135+种货币创建付款（目前不支持中国大陆，只支持中国香港）。
- Stripe还支持其他付款方式，包括ACH信用转账、ACH借记转账、支付宝、Android Pay、Apple Pay、Bancontact、Bitcoin（比特币）、银行卡（Visa，Mastercard，American Express，Discover，Diners Club，JCB等）、Giropay、iDEAL、SEPA、SOFORT、微信支付等来自全球的热门支付方式。
- Stripe的开发文档清晰简单，集成友好。提供了IOS、Android的SDK，以及对各种语言的支持。
- 因为没有中国的移动支付那么发达，外国人一般都通过信用卡支付。
Stripe支付校验（https://stripe.com/docs/js）效果预览
测试卡号 （https://stripe.com/docs/testing）
日期:将来的任意日期 CVC:任意三位数字
普通卡：
4242424242424242
需3D校验卡（所谓3D校验就是需要用户输入验证码来校验，stripe提供）
4000000000003220
4000002500003155
V3使用方法
以vue.js为例
视图层：
<!-- stripe生成的组件 --><div class="text-center"><div class="card-input gotham" id="card-number-element"></div><div class="text-left gotham error">{{ stripeValidationError }}</div><div class="box-row"><div class="card-input1 gotham" id="card-expiry-element"></div><div class="card-input2 gotham" id="card-cvc-element"></div><imgclass="cvv-icon"@click="iconCvv"src="../assets/images/icon-question-cvv@2x.png"/></div></div>Script层：
// 请求获取支付公钥接口http.getSecretToken().then(res => {if (res.state == 11) {console.log(res.data.token)this.stripe = Stripe(res.data.token) // 引入密钥this.createAndMountFormElements() // 调用执行stripe创建函数}}) // stripe生成卡号校验部分createAndMountFormElements() {let elements = this.stripe.elements({locale: "en" // 设置默认显示语种 en 英文 cn 中文 auto 自动获取语种})// 创建cardNumber并实例化this.cardNumberElement = elements.create("cardNumber", {style: style,showIcon: true, // 设置卡片icon，默认值为falseplaceholder: this.cardNumberplaceholder})this.cardNumberElement.mount("#card-number-element")// 创建cardExpiry并实例化this.cardExpiryElement = elements.create("cardExpiry", { style: style })this.cardExpiryElement.mount("#card-expiry-element")// 创建cardCvc并实例化this.cardCvcElement = elements.create("cardCvc", { style: style })this.cardCvcElement.mount("#card-cvc-element")// 异常文字抛出this.cardNumberElement.on("change", this.setValidationError)this.cardExpiryElement.on("change", this.setValidationError)this.cardCvcElement.on("change", this.setValidationError)},// 获取异常文字setValidationError(event) {this.stripeValidationError = event.error ? event.error.message : ""},第一步：引入script
<script src="https://js.stripe.com/v3/"></script>第二步：引入publishableKey
let stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx');第三步：create an Elements（创建Elements）
let elements = this.stripe.elements()
注：可以带参数，fonts和locale，详见文档https://stripe.com/docs/js/elements_object/create
例如：
let elements = this.stripe.elements({locale: "en" // 设置默认显示语种：en英文、cn中文、auto自动获取语种})第四步：创建并实例化一个Element
create方法实例化对象 参数type 有Card、cardNumber、cardExpiry、cardCvc、fpxBank、iban、idealBank、paymentRequestButton、auBankAccount
每个type代表不同的实例化对象
注：card包含cardNumber、cardExpiry、cardCvc，不能同时创建
常用cardNumber、cardExpiry、cardCvc三个，创建三个实例化对象
可带option参数，常用style、showIcon、placeholder，详见文档：https://stripe.com/docs/js/elements_object/create_element?type=cardNumber
然后再实例化出来
element.mount(domElement)方法，绑定视图层的id
例：this.cardNumberElement.mount("#card-number-element")
第五步：获取异常文字的方法
首先，定义变量stripeValidationError来存储异常情况文字
<div class="text-left gotham error">{{stripeValidationError}}</div> // 可以自定义
定义setValidationError方法
再用上stripe的change事件，详见文档：https://stripe.com/docs/js/element/events/on_change?type=cardElement
以上步骤就可以完成stripe卡号校验的基本功能
第六步：支付
两个对象
- Payment_method (pm) //创建账单
- PaymentIntent (pi) // 付款意图
Payment_method对象字段详见文档https://stripe.com/docs/api/payment_intents/object
PaymentIntent对象字段详见文档https://stripe.com/docs/api/payment_methods/object
前后端交互一般流程：
1、前端调stripe接口(创建Payment_method） ，返回Payment_method id（id格式为pm_xxxxxxx）
2、拿到Payment_method id后，请求后端接口，后端部分的stripe进行处理，返回PaymentIntent id（id格式为pi_xxxxxxx）
3、拿到PaymentIntent id去请求后端接口扣款，完成交易
前端stripe.createPaymentMethod => Payment_method id => 后端部分stripe => PaymentIntent id => 扣款
*前端处理详细过程
1、创建账单
调用 stripe.createPaymentMethod(paymentMethodData) 方法
paymentMethodData对象参数详见文档：https://stripe.com/docs/js/payment_methods/create_payment_method#stripe_create_payment_method-paymentMethodData
必须参数：type，card，billing_details
注意：billing_details一定要是对象，而且有固定格式，不然会请求失败报错
"billing_details": {"address": {"city": null,"country": null,"line1": null,"line2": null,"postal_code": null,"state": null},格式详见文档https://stripe.com/docs/api/payment_methods/create#create_payment_method-billing_details
// 示例代码
this.stripe.createPaymentMethod({type: "card",card: this.cardNumberElement, // 创建好的cardNumber实例billing_details: stripePaymentMethodOBJ // 组装好的billing_details对象数据}).then(result => {if (result.error) {this.stripeValidationError = result.error.message } else {// sessionStorage.setItem("paymentMethodId", result.paymentMethod.id)this.paymentMethodId = result.paymentMethod.id // 获取paymentMethod.id }})拿到paymentMethod.id后请求后端接口，返回PaymentIntent id，再去扣款 完成交易
*3D校验
所谓3D校验就是需要用户输入验证码来校验，页面stripe提供
在获取到paymentMethod.id 后请求后端stripe获取PaymentIntent 对象的时候，后端会返回需不需要3D校验的信息
调用stripe.handleCardAction(clientSecret)方法，拉起3D校验弹窗
clientSecret字段存在于PaymentIntent 对象中
方法详情见文档：https://stripe.com/docs/js/payment_intents/handle_card_action
Stripe支付简介和前端js调用相关推荐
- 前端js调用后端API获取数据的三种方法（2022.7.25）
前端js调用后台API获取数据的三种方法(2022.7.25) 前言 需求分析 一个Get实例 浏览器请求 SoapUI软件请求 一个Post实例 浏览器请求 SoapUI软件请求 1.Http简介( ...
- 前端js调用摄像头进行录像并传到后端
js调用摄像头录像并传到后端 参考自https://juejin.im/entry/5b91e8e7f265da0ac55e2cd6?tdsourcetag=s_pcqq_aiomsg 项目要求前端h ...
- java集合转js数值_前端js调用接口转换Map数组数据
返回Map数据 后端接口返回数据格式 { "code": 1, "msg": "操作成功!", "count": 0, ...
- 前端JS调用微信扫一扫二维码
来源: 最近做一个项目,H5页面,在微信中打开,里面有个功能,就是 点击按钮弹出微信二维码扫一扫. 项目截图: 暂时没有图,下次再补上.就是页面点击按钮,弹出扫二维码的窗口 我只负责前端,所以只上前 ...
- 前端JS调用微信JSAPI之扫一扫
扫一扫按钮增加点击事件 <div class="a2" onclick="onQscan()"><span>扫一扫</span&g ...
- 前端js调用百度翻译api接口
目录 1.到百度翻译开放平台注册自己的账号 2.编辑html代码,设计一个简易的页面 3.远程调用百度翻译api 4.完整代码 5.测试 到百度翻译开放平台注册自己的账号 (1)进入网页:开放平台官网 ...
- 前端JS调用Android相机相册问题解决
需求: Android中webview加载网页,网页中有一个按钮,点击之后,调启Android系统的相机和相册. 问题: 前端中的<input type="file" acc ...
- 前端js调用相机实现拍照，下载照片功能
样式-定义取相框的大小 <style>.camera_vedio,canvas,img {width: 500px;height: 500px;border: 1px solid #ccc ...
- 前端对接stripe支付，创建测试session_is
第一次搞 stripe支付,国外的文档全英文 接stripe支付,根据官方文档,首先就是先跟服务端交互,创建session会话,获取id,当服务端不做这个功能时,就需要前端去掉stripe最底层的ap ...
最新文章
- 指定域的名称或安全标识(SID)与该域的信任信息不一致
- Java 设计模式——状态模式
- 再见 Seaborn！Altair 数据可视化已超神
- 如果没有就插入，如果有就更新
- odoo 自定义视图_如何使用Windows的五个模板自定义文件夹视图
- Linux下environ环境变量操作函数
- 【机器学习】脑机接口利器：错误率仅3%
- [Apple开发者帐户帮助]二、管理你的团队（3）删除团队成员
- [ Ubuntu Chinese Method ] uninstall DBus, install fcitx
- eclipse代码量统计插件_推荐一波代码量、行数、提交量、作者等全维度统计神器...
- 计算机学科 集体备课记录,信息技术学科组集体备课活动记录.pdf
- Excel如何快速插入行，删除行
- 搜狗浏览器安装插件(.crx)
- 用Python网络爬虫来看看最近电影院都有哪些上映的电影
- 卸载计算机系统,W7电脑系统如何卸载软件
- 塞规公差带图_塞规和卡规公差表
- 一键去除txt文本重复行（带界面版）
- ionic3 生命周期方法
- 手动安装ceph和使用
- Python 机器学习 | 超参数优化 黑盒（Black-Box）非凸优化技术实践