Why should we encapsulate payment and wechat mini program payment

Why encapsulate payments

• Remember the rule: never encapsulate for the sake of encapsulating.
• In the process of wechat pull up payment, repeated clicks will pull up payment for many times. Usually, we will control users’ multiple clicks to trigger payment through shackles.
• However, in this case, it is not enough to operate in the differential network environment only with shackles, and a period of waiting loading is often needed to accompany users through this boring waiting process.
• If we are using payments in multiple places, each with the same shackle loading, the payment method will be encapsulated in a unified way.
• The above foreword nonsense too much, directly on the code (for you greatNew generation of migrant workersFor reference)

  import Taro from '@tarojs/taro'
  declare namespace Pay {
      interface WeChatPayOptin {
          timeStamp: string,
          nonceStr: string,
          package: string,
          signType: 'MD5' | 'HMAC-SHA256'.paySign: string
      }
      interface LoadingOption {
          animation: boolean, title? : string } }/ * * * *@param option* Payment parameters: * + timeStamp - the number of seconds since 00:00:00, January 1, 1970, i.e. the current time * + nonceStr - random string, * + package - The value of the prepay_id parameter returned by the unified single interface. The submission format is as follows: Prepay_id =*** * + signType - Signature algorithm * + paySign - signature, Specific see/pay little program interface document for signature scheme (https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_7&index=3)@param Lodading * using Taro. ShowLoading is optional and recommended to prevent other operations during payment. * + animation - Mandatory Whether to enable * + title - Title Optional Default: 'Paying... '*@returns 
  * @example* ```tsx * weChatPay({ * timeStamp: '', * nonceStr: '', * package: '', * signType: '', * paySign: '', * },{ animation: True}). Then ((res: any) = > {* pay successfully processed *}). The catch ((err: any) = > {* payment failure handling *}) * ` ` ` * /
  constweChatPay = (option: Pay.WeChatPayOptin, loading? : Pay.LoadingOption):Promise<any> => {
      if(loading? .animation) { Taro.showLoading({title: loading? .title ||'Is paying... '.mask: true})}return new Promise<void> ((resolve, reject) = >{ Taro.requestPayment({ ... option,complete: () = > {
                  if(loading? .animation) Taro.hideLoading() },success: (res: any) = > {
                  resolve(res)
              },
              fail: (err: any) = > {
                  reject(err)
              }
          })
      })
  }
  
  export {
      weChatPay
  }
  Copy the code

• I believe that many familiar ts students have understood my packaging ideas and the use of the method, of course, notes also indicated the call method, write so much is not bad these two nonsense introduced the following method of use
  1. Import methods in the use page

  import { weChatPay } from '@/utils/pay'
  Copy the code

  2. A method is called

  weChatPay({
      timeStamp: ' '.nonceStr: ' '.package: ' '.signType: ' '.paySign: ' '}, {animation: true }).then((res:any) = > {
      // Payment processed successfully
  }).catch((err:any) = > {
      // Payment failed processing
  })
  Copy the code

• By the way, this is the content of the Taro3.0 version of the small program template in the author’s previous post, which is the business explanation bar, and at the same time reserved to extend the package export of other payment methods.