準備

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