国外三大支付paypal,braintree,stripe,有兴趣可以去了解一下他们的区别。

支付宝和paypal基本只需要发送charge信息请求交给后端做就ok了，那么stripe前端也只需要收集卡信息，拿到token给后端就ok了。

那就来说说主角stripe支付：官方文档

stripe官方说分为六步，如下图：

step1: 收集卡信息  step2 :创建customer  step3:支付金额

step4和step5：计划(月付和年付等)

step6:成功

其实相对于普遍来说 step4和step5不用考虑，所有我们就只有4步。

前端stripe支付步骤：

1：引入stripe.js(为了方便测试，简便引入stripe.js，引入axios为了测试退款请求)

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <title>测试stripe支付demo</title>

    <script src="https://js.stripe.com/v3/"></script>

    <script src="https://cdn.bootcss.com/axios/0.16.0/axios.min.js"></script>

  </head>

  <body>

    <div id="app"></div>

    <!-- built files will be auto injected -->

  </body>

2：接下来就是按照官方文档步骤走，粘贴复制，先创建页面收集卡信息。

　　<div style="width: 60%;margin: 0 auto">

      <div>stripe demo支付demo</div>

      <form action="http://xxxxxxx/test/stripe/pay.json" method="post" id="payment-form">

        <div class="form-row">

          <label for="card-element">

            Credit or debit card

          </label>

          <div id="card-element" name="token">

            <!-- A Stripe Element will be inserted here. -->

          </div>

          <div style="margin-top: 20px">

            <input placeholder="请输入费用" name="charger"> USD

          </div>

          <!-- Used to display form errors. -->

          <div id="card-errors" role="alert"></div>

        </div>

        <button style="margin-top: 20px">Submit Payment</button>

      </form>

      <div>

        <div style="margin-top: 40px">测试退款(两个都请输入)</div>

        <input style="margin-top: 20px" placeholder="请输入退款的交易单号" v-model="value">

        <div style="margin-top: 20px">

          <input placeholder="请输入退款金额" v-model="charge">

        </div>

        <div style="margin-top: 20px">

          <button @click="refund">发起退款</button>

        </div>

      </div>

    </div>

3.创建stripe客户端，将stripe提供的卡页面内嵌到页面中，用于收集卡信息，然后监听form表单提交，阻止表单提交前先去给stripe交互。

　　　　　// Create a Stripe client.

        const stripe = Stripe(process.env.PUB_KEY);

        // Create an instance of Elements.

        var elements = stripe.elements();

        // Custom styling can be passed to options when creating an Element.

        // (Note that this demo uses a wider set of styles than the guide below.)

        var style = {

          base: {

            color: '#32325d',

            lineHeight: '18px',

            fontFamily: '"Helvetica Neue", Helvetica, sans-serif',

            fontSmoothing: 'antialiased',

            fontSize: '16px',

            '::placeholder': {

              color: '#aab7c4'

            }

          },

          invalid: {

            color: '#fa755a',

            iconColor: '#fa755a'

          }

        };

        // Create an instance of the card Element.

        var card = elements.create('card', {style: style});

        // Add an instance of the card Element into the `card-element` <div>.

        card.mount('#card-element');

        var form = document.getElementById('payment-form');

        form.addEventListener('submit', function(event) {

          event.preventDefault();

          stripe.createToken(card).then(function(result) {

            if (result.error) {

              // Inform the customer that there was an error.

              var errorElement = document.getElementById('card-errors');

              errorElement.textContent = result.error.message;

            } else {

              stripeTokenHandler(result.token);

              // Send the token to your server.

            }

          });

        });

        function stripeTokenHandler(token) {

          // Insert the token ID into the form so it gets submitted to the server

          var form = document.getElementById('payment-form');

          var hiddenInput = document.createElement('input');

          hiddenInput.setAttribute('type', 'hidden');

          hiddenInput.setAttribute('name', 'stripeToken');

          hiddenInput.setAttribute('value', token.id);

          form.appendChild(hiddenInput);

          // Submit the form

          form.submit();

        }

一些stripe提供的样式：stripe element examples 地址

4.与stripe交互完之后，会得到stripe给你的token,你可以在写一些表单input拿到用户输入的信息和token表单提交submit一起传给服务器，后端得到token就可以创建customer了。　　

这里展示下token信息：

那么我们就完成我们的任务的，接下来就是后端的工作了，注stripe支付是相当于主动拉，从信用卡主动扣款，不像支付宝是被动拉，需要用户主动发起付款支付(如转账，扫码)　

　

-----原创文章，©版权所有，转载请注明标明出处：http://www.cnblogs.com/doinbean

　

支付-stripe的更多相关文章

  1. iOS 资源大全

    这是个精心编排的列表,它包含了优秀的 iOS 框架.库.教程.XCode 插件.组件等等. 这个列表分为以下几个部分:框架( Frameworks ).组件( Components ).测试( Tes ...

  2. IOS中文版资源库

    Swift 语言写成的项目会被标记为  ★ ,AppleWatch 的项目则会被标记为 ▲. [转自]https://github.com/jobbole/awesome-ios-cn#librari ...

  3. 墙裂推荐 iOS 资源大全

    这是个精心编排的列表,它包含了优秀的 iOS 框架.库.教程.XCode 插件.组件等等. 这个列表分为以下几个部分:框架( Frameworks ).组件( Components ).测试( Tes ...

  4. API经济产业

    技术大咖为我们铺好了前进道路,我们为什么还要敬而远之舍近索远呢?充分利用开源,利用API进行App有效整合. 为应用添加日志功能,Loggly; 为应用添加用户管理和身份认证模块,Stormpath; ...

  5. 【翻译】React vs Angular: JavaScript的双向性

    翻译原文链接:https://blog.prototypr.io/react-vs-angular-two-sides-of-javascript-b850de22b413 我的翻译小站:http:/ ...

  6. Redis 实现接口访问频率限制

    为什么限制访问频率 做服务接口时通常需要用到请求频率限制 Rate limiting,例如限制一个用户1分钟内最多可以范围100次 主要用来保证服务性能和保护数据安全 因为如果不进行限制,服务调用者可 ...

  7. 开发者应该了解的API技术清单

    近几年,API经济纷纷崛起,无论是国外还是国内,众多厂商积极开放API.开发者很多时候是要借助这些API,才能轻松构建出一款应用,极大地提高开发效率和开发质量.文中整理了一份API服务清单,内容涵盖: ...

  8. 开发者应该了解的API技术清单！

    英文原文:API-Driven Development 作为一名开发者,诚然编写代码如同作家提笔挥毫,非常有成就感与乐趣,但同时我也觉得删除代码是件不相伯仲的美事.为什么呢?因为在进行删除工作时,意味 ...

  9. 【转】开发者应该了解的API技术清单

    [转载贴] 作为一名开发者,诚然编写代码如同作家提笔挥毫,非常有成就感与乐趣,但同时我也觉得删除代码是件不相伯仲的美事.为什么呢?因为在进行删除工作 时,意味着自己找出了造成干扰的位置,意味着找到了冗 ...

随机推荐

  1. powerdesigner的PDM模型name和comment相互复制替换

    在[Tools]-[Execute Commands]-[Edit/Run Script] 下.输入以下命令,这些命令也可以保存起来,扩展名为 vbs ,以便下次使用. 1.name的值复制到comm ...

  2. HDFS的Java客户端编写

    总结: 之前在教材上看hdfs的Java客户端编写,只有关键代码,呵呵…….闲话不说,上正文. 1. Hadoop 的Java客户端编写建议在linux系统上开发 2. 可以使用eclipse,ide ...

  3. 游戏引擎——cocos2d-x

    Cocos2d-x是一个开源的移动2D游戏框架,MIT许可证下发布的.这是一个C++ Cocos2d-iPhone项目的版本.Cocos2d-X发展的重点是围绕Cocos2d跨平台,Cocos2d-x ...

  4. SQL进阶1：case表达式的用法示例

    一:case表达式的用法 1.SQL中的case表达式的作用是用来对"某个变量"进行某种转化,通常在select字句中使用,举个例子: 不能看出,case表达式很像我们的if el ...

  5. Oarcle之序列

    序列:是一种数据库对象,用来自动产生一组唯一的序号: 序列:是一种共享式的对象,多个用户可以共同使用序列中的序号. 创建序列 create sequence seq_emp_temp incremen ...

  6. OO第一单元优化博客

    OO第一单元优化博客 第一次作业: 合并同类项+提正系数项+优化系数指数0/1=满分 第二次作业: 初始想法 一开始是想以\(sin(x)​\)和\(cos(x)​\)的指数作为坐标,在图上画出来就可 ...

  7. oracle使用 extract获取当前时间，并比较两个时间

    --根据当前时间戳获取年月日时分秒,其中sysdate不能用于获取时分秒select systimestamp, extract(year from systimestamp) year ,extra ...

  8. centos6添加mysql服务自启动

    环境: os: centos 6 db:mysql 5.6.40 1.修改/etc/init.d/mysqld文件,默认文件以及存在,该文件内容如下: #!/bin/sh # Copyright Ab ...

  9. vue 父组件调用子组件内置方法

    背景介绍:外派到泰康做项目.这个项目中有个选择组织的功能,是一个树桩结构的懒加载,于是我就element-ui的tree组件封装了一个公共的组件. 但是后来发现他们的公司组织结构不是都请求的同一个接口 ...

  10. python面试问题集锦

    GIL(全局解释器锁) 描述Python GIL的概念, 以及它对python多线程的影响?编写一个多线程抓取网页的程序,并阐明多线程抓取程序是否可比单线程性能有提升,并解释原因. 1.python语 ...