国外三大支付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. Easyui form提交后input清空的方法

    先上解决办法: $(#formid #inputid).val("") 将这个代码放在提交按钮最后就可以了. 我在做一个修改信息的功能时,发现上一次提交的内容在下一次打开的记录里又 ...

  2. LR12集合点设置和多个负载生成器策略

    今天给大家分享几个有关LR12的Controller使用过程中的几个常用问题: 一,脚本中添加集合点函数---lr_rendezvous 1,在被测接口事物函数之前加入集合点函数--lr_rendez ...

  3. Linux中DDNS配置

    1.实验拓扑结构 图1 实验拓扑图 2.项目要求 通过系统的搭建,能够为Web Server动态更新DNS信息. 3.项目开展思路(思维导图) 图2 DDNS实验思维导图 4.实验步骤 (1) 基础网 ...

  4. WSDL文档

    portType 相当于一个类. operation 相当于该类里有一个方法名,方法名为processAPNManagement,该方法里有一个输入消息,一个输出消息,一个错误消息.

  5. python dict字典和set集合用法

    创建字典:键  值  key  value c = {'张三':59, '李四':60, '王五':100} #查 print(c['张三'])  #打印张三的成绩 #改 c['张三'] = 60 # ...

  6. 项目添加大量js文件时关闭Eclipse校验机制

    1,如:当添加Ext JS的examples文件夹时

  7. 使用QPlainText代替QText

    1.现象 在项目开发中,经常使用QText来显示解析的数据,比如从网络中获取到一个数据包,解析成中文加以显示,当时间过久或者字符串比较多的时候,就会产生一定的卡顿,所以需要限制QText的行数,或者清 ...

  8. Flask Web框架

    Flask依赖两个外部库:Werkzeug和Jinja2.Werkzeug是一个WSGI(在Web应用和多种服务器之间的标准Python接口)工具集:Jinja2负责渲染模板.所以在安装Flask之前 ...

  9. html2canvas文字重叠（手机端）

    发现情况: 1.设置文字居中,文字自动换行后文字有重叠   text-align: center; 解决办法: text-align: left; text-align: justify;等 2.使用 ...

  10. sass报 error (Line XX: Invalid GBK character "\xE4") 的解决办法

    在webstorm配置的SASS,插入中文注释报错: cmd.exe /D /C call D:\ProgramFiles\Ruby24-x64\bin\sass.bat --no-cache --u ...