Полная практика использования платежной функции апплета WeChat

предисловие

Мини-программы WeChat — это мини-программы электронной коммерции, которые предоставляют очень полные, отличные и безопасные платежные функции. В апплете можно вызвать WeChat API для завершения платежной функции, что удобно и быстро. Когда разработчики небольших программ разрабатывают небольшие программы, процесс оплаты обязательно будет раскрыт.Сегодня брат Ху подробно объяснит весь процесс оплаты небольших программ, чтобы мелкие партнеры могли быстро понять платежные возможности небольших программ и не наступать на них. ямы. !

Знание себя и своего врага может помочь вам выиграть сотню сражений - блок-схема мини-программы

Возьмите каштан 🌰:

Пользователь Сяомин купил кусок мыла в апплете электронной коммерции. Какой процесс он прошел от просмотра, размещения заказа до оплаты?

Откройте апплет электронной коммерции, найдите и перейдите к определенному резному мылу, щелкните, чтобы просмотреть детали, и обнаружите, что размер и шелковистость очень подходят, щелкните, чтобы разместить заказ напрямую
wx.login получает временные учетные данные пользователя и отправляет их на внутренний сервер в обмен на openId.
При размещении заказа апплет должен передать на сервер идентификатор товара, количество товара, купленного Сяо Мином, и openId пользователя Сяо Мин.
После получения идентификатора продукта, количества продукта и openId сервер формирует данные заказа в течение периода обслуживания и отправляет запрос в WeChat Pay через определенный алгоритм подписи для получения информации о заказе с предоплатой (prepay_id), и в то же время , полученные данные снова обрабатываются по соответствующим правилам.
После получения соответствующих параметров апплет вызывает wx.requestPayment() для инициации платежа WeChat, активирует инструментальные средства оплаты и производит платеж.

резюме

Для оплаты WeChat мы в основном делаем три вещи на стороне апплета:

Примечание. Сервер вызывает унифицированный API заказов, и алгоритм подписи больше не входит в рамки этого обсуждения обмена. Ожидайте еще одного сообщения от Brother Hu.

использовать**wx.login** Получите временный код для входа в систему и отправьте его на серверную часть, чтобы получить openId.
```
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'
  }
})
```
Получите возвращенную информацию (должна включать инициацию платежа WeChat**wx.requestPayment的参数**), инициировать оплату WeChat
```
wx.requestPayment({
  // 时间戳
  timeStamp: '',
  // 随机字符串
  nonceStr: '',
  // 统一下单接口返回的 prepay_id 参数值
  package: '',
  // 签名类型
  signType: '',
  // 签名
  paySign: '',
  // 调用成功回调
  success () {},
  // 失败回调
  fail () {},
  // 接口调用结束回调
  complete () {}
})
```
Примечание: в приведенной выше информацииtimeStamp,nonceStr,prepay_id,signType,paySignРекомендуется, чтобы все параметры возвращались сервером (это обеспечит максимально возможную согласованность данных подписи), а апплет ничего делать не будет.

Пример платежа WeChat на основе 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.request({
      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>
    )
  }
}

визуализация

Эпилог

В реальной работе проекта вы можете заменить интерфейс своим доступным интерфейсом.

постскриптум

Вышеизложенное — это содержание, которым брат Ху поделился с вами сегодня, и друзья, которым оно понравилось, помнят**收藏,转发, нажмите кнопку в правом нижнем углу在看**, порекомендуйте большему количеству друзей, добро пожаловать, чтобы оставить сообщение для обмена...

Брату Ху есть что сказать, брату Ху с навыками и чувствами! Главный осадный лев открытой платформы Jingdong. Поговорите с вами о большом фронтенде, поделитесь архитектурой фронтенд системы, принципами реализации фреймворка и последними и наиболее эффективными техническими практиками!

Нажмите и удерживайте и отсканируйте код, чтобы следовать, красивее и красивее! Обратите внимание на то, что брат Ху говорит в официальном аккаунте, и вы сможете продолжить подробное общение с братом Ху!