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

時間 2019-12-08

標籤微信程序支付功能流程實踐简体版

原文原文鏈接

前言

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

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

舉個栗子🌰：

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

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

小結

進行微信支付，在小程序端咱們主要作三件事：前端

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

使用wx.login獲取臨時登陸憑證code,發送到後端獲取openIdjava

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

將openId以及相應須要的商品信息發送到後端，換取服務端進行的簽名等信息算法
```
wx.request({
  url: '',
  data: {
    openId: '',
    num: 1,
    id: '111'
  }
})
```

接收返回的信息（必需要包含發起微信支付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>
    )
  }
}