上一章講完如何獲取用户信息授權 後，下一步就可以進行小程序支付了。

本期就來介紹下支付寶小程序支付如何實現。

PS：接入前的準備工作可以參考：接入準備；接入指南可參考：接入指南～

獲取小程序支付權限

獲取權限分為三步：分別是 賬號開通 JSAPI 支付、賬號與小程序賬號綁定 以及 小程序綁定 JSAPI 產品

賬號開通 JSAPI 支付

需要用收款主體賬號去簽約，賬號要求必須是企業或者是個體工商户。

可以直接通過 👉 簽約直通車 進行開通

賬號與小程序賬號綁定

開通成功之後，要去 小程序 AppID 管理 頁面關聯小程序，將開發的小程序關聯到賬號下。

⚠ 注意：哪個小程序開發就綁哪個小程序，不綁的話後面無法支付成功。

小程序綁定JSAPI產品

要到小程序詳情界面的【產品綁定】去綁 JSAPI 支付產品。

可以參考 👉 [應用如何實現產品綁定] 進行操作：

簽約過程中可能遇到的問題也給大家列在這裏了，大家可以參考下～：

• [小程序功能列表中沒有支付能力]
• [個人小程序是否支持支付功能]
• [小程序支付簽約要求]

小貼士 📖 ： 賬號不符合要求的也可以通過沙箱環境去測試下，可以參考之前寫的這篇~

支付寶沙箱超詳細教程+避雷經驗，看這篇就夠了

支付調用整體流程

獲取到權限之後我們就可以進行接口調用了，主要步驟分為 ：

• （前端+後端）獲取用户的授權信息
• （前端）將訂單信息傳到服務端
• （後端）服務端創建支付單
• （前端）喚起支付

第一步、獲取用户的授權信息

目的： 這一步是為了能夠獲取到用户的 user_id（openid）

注意： user_id 和 openid 都是可以的，新老賬號可能獲取到的信息不一樣，我之前老的賬號獲取到的是user_id，新申請的賬號獲取到的是 openid，根據大家的自己賬號實際情況來看~

對此內容感興趣的小夥伴也可以查看 👉[openid 和 userid 的區別]

方法一：通過用户授權獲取（用户端有彈窗）

大家可以參考我之前寫的獲取用户信息的 my.getAuthCode 步驟，下面簡單概括下就是：

• 前端通過 my.getAuthCode 方法獲取到用户的授權 authCode
• 將 authCode 傳到後端通過 alipay.system.oauth.token 接口獲取 access_token 參數

• 後端用 access_token 參數傳入 alipay.user.info.share 接口中獲取到 user_id（openid）

  ---

  方法二：通過靜默授權獲取（用户端無彈窗）

靜默授權與用户授權同樣是使用的 my.getAuthCode 方法，但是 scopes 傳參不同，獲取到的信息 只有 uid（openid） ，調用步驟為：

• 前端通過 my.getAuthCode 方法（scopes 入參 auth_base）獲取到用户的授權 authCode
• 將 authCode 傳到後端通過 alipay.system.oauth.token 接口到 user_id（openid）

代碼示例

Page({
  getAuthCode() {
    my.getAuthCode({
      scopes: 'auth_base',//靜默授權
      success: res => {
        const authCode = res.authCode;
      fail: err => {
        console.log('my.getAuthCode 調用失敗', err)
      }
    });
  }
})

授權這塊的問題在上一篇 已經説過很多了，這次再補充兩個關於靜默授權的問題：**

• [小程序靜默授權是否可以拿到用户頭像暱稱]
• [支付寶小程序可以在首頁獲取到user_id嗎]

第二步、將訂單信息傳到服務端

用户信息獲取到之後，我們就可以將訂單信息和用户信息一起再打包，通過 my.request 傳回服務端

//.js頁面
Page({
  pay(){
    my.request({
      url: '商家服務端地址',//須加httpRequest域白名單
      method: 'POST',
      data: {//data裏的key、value是開發者自定義的
        from: '支付寶',
        order: 'XXXXX',//訂單信息
      },
      dataType: 'json',
      success: function(res) {
        my.alert({content: 'success'});
      },
      fail: function(res) {
        my.alert({content: 'fail'});
      },
      complete: function(res) {
        my.hideLoading();
        my.alert({content: 'complete'});
      }
    });
  }
});

如果是在本地測試的話記得在 IDE 的【詳情】裏面把下面這兩個校驗勾選上，不然IDE會去校驗域名的合法性的。

這邊給大家彙總一些 my.request 調用過程中的常見問題：

• [my.request API 可以使用 ip 地址訪問嗎]
• [my.request 的 url 參數的域名是否需要配置白名單]
• [my.request 默認請求頭]
• [my.request 默認請求超時是多久]

第三步、服務端創建支付單

目的： 獲取 trade_no（支付寶交易號）

接收到前端傳過來的訂單信息之後，需要將信息傳入 alipay.trade.create 接口中獲取 trade_no。

服務端的代碼大家可以直接參考：👉 [alipay.trade.create 代碼示例]

📌下面簡單列一下後端幾個必傳的參數：

• out_trade_no： 商户端自定義訂單號，需保證在商户端的唯一性。
• total_amount： 訂單金額，單位元，精確到兩位小數。
• subject： 訂單標題，會在賬單界面展示。
• product_code： 產品碼，固定值 JSAPI_PAY。
• op_app_id： 傳小程序appid。

如果獲取到的是user_id，傳入

• buyer_id： 傳入之前獲取到的user_id。

如果獲取到的是openid，傳入

• buyer_open_id： 傳入之前獲取到的openid。

後端接口調用成功之後就可以獲取到 trade_no 參數了：

服務端接口報錯的常見問題如下：

• [小程序支付報錯：ACCESS_FORBIDDEN]
• [小程序支付報錯：本筆交易不支持在本小程序內支付請聯繫商户完成小程序 APPID 的綁定後再重新發起支付]
• [ACQ.UNBOUND_APPLICATION（指定小程序主體未完成關聯綁定）]
• [小程序支付報錯：支付失敗，商家支付喚起方式不正確，請聯繫商家解決]

第四步、喚起支付

前端獲取到 trade_no 之後，我們就可以通過 my.tradePay（發起支付） 方法在小程序上喚起收銀台了。

// .js
my.tradePay({
  // 傳入支付寶交易號trade_no
  tradeNO: '201711152100110410533667792',
  success: (res) => {
    my.alert({
      content: JSON.stringify(res),
    });
  },
  fail: (res) => {
    my.alert({
      content: JSON.stringify(res),
    });
  }
});

如果是 IDE 上測試的話，需要用支付寶掃碼進行支付：

真機測試可以直接喚起收銀台進行支付：

大家也可以看下支付過程中可能會遇到的一些問題～：

• [小程序前端跳轉是否可以判斷支付成功]
• [小程序開發者工具是否在支持測試小程序支付功能]
• [小程序支付如何設置同步]
• [小程序支付報錯：當面付等產品不支持在小程序場景內使用，請聯繫商户更換收單產品後再重新發起支付]

以上就是小程序支付的所有內容了，希望能夠幫助到你★,°:.☆(￣▽￣)/$:.°★ 。