准备

stripe.js

uniapp-H5-API

思路

• 在选择支付方式的页面当选择信用卡支付时，跳转web-view到写好stripe.js的支付页面。
• 引入wx-API和uni-API

• <!-- 微信 JS-SDK  -->  
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>  
    <!-- uni 的 SDK -->
    <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">          </script>```
  

• 页面逻辑选择Jquery简单方便
• 在用户点击支付后设置定时器循环查询支付是否成功
  • 成功失败分别跳转不同页面

代码

• 动态创建<script>标签加载stripe.js

•               let form = window.document.getElementById("formDom");
                let script = window.document.createElement("script");
                script.src = "https://checkout.stripe.com/checkout.js";
                script.className = "stripe-button";
                script.setAttribute('data-name', '*** store')
                script.setAttribute('data-key', 'keyValue')
                script.setAttribute('data-amount', 总金额)
                script.setAttribute('data-description', 'yami store')
                script.setAttribute('data-image',
                    'https://stripe.com/img/documentation/checkout/marketplace.png')
                script.setAttribute('data-locale', 'auto')
                script.setAttribute('data-currency', 'AUD')
                form.appendChild(script);
            // 挂载stripe basePath
                $.get(basePath + '/api/createCheckout', {
                    params: param
                }, function(res) {
                    // console.log('stripe==GET', res)
                })
  

• 以上我们完成了stripe.js的配置，会自动生成一个支付按钮。点击按钮后他会自动走流程。

跳转

• 接下来就是根据自己项目的业务逻辑进行跳转了。这没什么好说的，值得说的是引入uniapp-API
• 需要监听事件UniAppJSBridgeReady

•   document.addEventListener('UniAppJSBridgeReady', function() {
        // 至此可以使用uni的API
    })```
  

• 需要注意的是，必须同时引入微信和uniapp两个API资源
• 辟谣
• 网上说使用本地static时无法加载uniapp-API，亲测可以加载。

自己写了一个解析url参数的方法分享一下

•                   let getUrlName = (...args) => {
                    let currindex = curPath.indexOf('?')
                    let currStr = curPath.slice(currindex + 1)
                    let paramsArr = currStr.split('&')
                    let res = {}
                    if (currindex > 0) {
                        if (args.length === 0) {
                            paramsArr.map((item, index) => {
                                let i = item.split('=')
                                let key = i[0]
                                res[key] = i[1]
                            })
                            return res
                        } else {
                            paramsArr.forEach((item, index) => {
                                let i = item.split('=')
                                let key = i[0]
                                if (args.includes(key)) {
                                    res[key] = i[1]
                                }
                            })
                            return res
                        }
                    } else {
                        return {
                            error: '参数错误'
                        }
                    }
                }
  
  

总结：

• 不难，就是遇到好多小坑。
• 坑1： 在创建web-view时如果传入plusrequire:"none"将无法加载uniapp-API
• 坑2: 就是上面说到的必须引入两个微信和uniapp