微信小程序支付功能全流程實踐

前言

微信小程序爲電商類小程序，提供了非常完善、優秀、安全的支付功能。在小程序內可調用微信的API完成支付功能，方便、快捷。小程序開發者在開發小程序時，支付流程是必然要接觸到，今天胡哥就小程序支付的全流程爲大家一一細說，讓小夥伴能快速得掌握小程序支付能力，避免踩坑！

知己知彼，方能百戰不殆 - 小程序支付流程圖

舉個栗子🌰：

某用戶小明在某電商小程序上購買一塊肥皂，從瀏覽、下單到支付經歷了什麼樣的過程呢？

1. 打開電商小程序，搜索瀏覽到某雕肥皂，點擊查看詳情後，發現大小、絲滑程度都很合適，點擊直接下單
2. wx.login獲取用戶臨時登錄憑證code，發送到後端服務器換取openId
3. 在下單時，小程序需要將小明購買的商品Id，商品數量，以及小明這個用戶的openId傳送到服務器
4. 服務器在接收到商品Id、商品數量、openId後，生成服務期訂單數據，同時經過一定的簽名算法，向微信支付發送請求，獲取預付單信息(prepay_id)，同時將獲取的數據再次進行相應規則的簽名，向小程序端響應必要的信息(必須字段信息將在下文進行詳細說明)
5. 小程序端在獲取對應的參數後，調用wx.requestPayment()發起微信支付，喚醒支付工作臺，進行支付

小結

進行微信支付，在小程序端我們主要做三件事：

注：服務端調用統一下單API、簽名算法不再本次分享討論範圍內，請期待胡哥的另外一次分享。

1. 使用wx.login獲取臨時登錄憑證code,發送到後端獲取openId

   wx.login({
     success (res) {
       if (res.code) {
         // 發起請求，換取openId
         wx.request({
           url: '',
           data: {
             code: res.code
           }
         })
       }
     }
   })

2. 將openId以及相應需要的商品信息發送到後端，換取服務端進行的簽名等信息

   wx.request({
     url: '',
     data: {
       openId: '',
       num: 1,
       id: '111'
     }
   })

3. 接收返回的信息（必須要包含發起微信支付wx.requestPayment的參數），發起微信支付

   wx.requestPayment({
     // 時間戳
     timeStamp: '',
     // 隨機字符串
     nonceStr: '',
     // 統一下單接口返回的 prepay_id 參數值
     package: '',
     // 簽名類型
     signType: '',
     // 簽名
     paySign: '',
     // 調用成功回調
     success () {},
     // 失敗回調
     fail () {},
     // 接口調用結束回調
     complete () {}
   })

   注意：以上信息中timeStamp、nonceStr 、prepay_id、signType、paySign各參數均建議必須都由服務端返回（這樣會盡最大可能性保證簽名數據一致性），小程序端不做任何處理

基於Taro的微信支付實例

import Taro, { Component } from '@tarojs/taro'
import { View, Text, Button } from '@tarojs/components'
import './index.scss'

export default class Index extends Component {

  config = {
    navigationBarTitleText: '首頁'
  }

  componentWillMount () { }

  async componentDidMount () { 
  }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  /**
   * sendOrderInfo()
   * @description 提交訂單信息，獲取支付憑證，喚起支付
   */
  async sendOrderInfo () {
    // 獲取臨時登錄憑證code
    let codeData = await Taro.login()
    // 換取openId
    let openId = ''
    if (codeData.code) {
      let res = await Taro.request({
        // 定義的後端換取openId的接口
        url: 'https://www.justbecoder.com/getLogin',
        data: {
          code: codeData.code
        }
      })
      if (res && res.code === 0) {
        openId = res.openId
      }
    }
    // 發送openId以及對應的商品信息
    let data = await Taro.requrest({
      url: 'https://www.justbecoder.com/createdOrder',
      data: {
        openId,
        // 實際情況的商品數量
        num: 1,
        // 實際情況的商品Id
        id: 111,
      }
    })
    // code === 0 表示提交訂單成功，返回需要的簽名信息等
    if (data && data.code === 0) {
      let {
        timeStamp,
        nonceStr,
        prepay_id,
        signType,
        paySign
      } = data.payInfo
      // 喚起支付，按小程序要求格式發送參數
      let payData = await Taro.requestPayment({
        timeStamp,
        nonceStr,
        package: 'prepay_id=' + prepay_id,
        signType,
        paySign
      })
      if (payData && payData.errMsg === 'requestPayment:ok') {
        Taro.showModal({
          title: '操作提示',
          content: '支付成功',
          showCancel: false,
          confirmText: '確定'
        })
      } else {
        Taro.showModal({
          title: '操作提示',
          content: '支付失敗，請重新嘗試',
          showCancel: false,
          confirmText: '確定'
        })
      }
    }
  }

  render () {
    return (
      <View className='index'>
        <Button onClick={this.sendOrderInfo}>立即下單</Button>
      </View>
    )
  }
}

效果圖

結語

在實際項目操作中，大家把接口換成自己的可用接口即可。

後記

以上就是胡哥今天給大家分享的內容，喜歡的小夥伴記得收藏、轉發、點擊右下角按鈕在看，推薦給更多小夥伴呦，歡迎多多留言交流...

胡哥有話說，一個有技術，有情懷的胡哥！京東開放平臺首席前端攻城獅。與你一起聊聊大前端，分享前端系統架構，框架實現原理，最新最高效的技術實踐！

長按掃碼關注，更帥更漂亮呦！關注胡哥有話說公衆號，可與胡哥繼續深入交流呦！