基於Ionic3實現微信支付和支付寶支付

轉載
當下開發中更多采用Hybrid APP進行快速開發，使用Cordoava的不在少數。下邊的文章內容，對於新入開發做支付口的同學有極大的參考價值。

---

在Ionic應用裏實現支付並不難，但是有的坑真是不爬不知道。

1. 支付寶支付

網上關於支付寶支付cordova插件真是非常多，但是大多會報一些讓你很無語的錯誤。比如sdk早已過時不是最新的，或者沒有出來效果。我也是經過大量試錯，最終選擇了以下這個。

安裝cordova支付寶支付插件：

ionic cordova plugin add cordova-plugin-alipay-v2 --variable APP_ID=xxxxxxxxxxx

讓用戶選擇支付方式

openPayActionSheet(data) {
    this.actionSheetCtrl.create({
      buttons: [
        {
          text: "支付寶支付",
          handler: () => {
            this.aliPay(data);
          }
        },
        {
          text: "微信支付",
          handler: () => {
            this.weiXinPay(data);
          }
        },
        {
          text:"取消",
          role: 'cancel'
        }
      ]
    }).present();
  }

調用後臺的簽名方法，返回給你簽名字符串，這個後臺如果不知道怎麼簽名的話，阿里官方文檔有詳細的介紹。

unescapeHTML(a){
  let aNew = "" + a;
     return aNew.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&quot;/g, '"').replace(/&apos;/g, "'");
 }


aliPay(sn){
    $.post('http://www.uhunche.cn/index.php?c=api&a=index',{
      api:'alipay',
      order_sn:sn
    },(data)=>{
      let payInfo=this.unescapeHTML(data);
      cordova.plugins.alipay.payment(payInfo,(success)=>{
        success.resultStatus==="9000"?this.paySuccess(sn): this.payFailed();
        //支付成功
        this.paySuccess();
      },(error)=>{
        //支付失敗
        this.payFailed();
      });
    });
  }

這個unescapeHTML方法就是我在此坑了兩天的成果，因爲我們後臺返回的簽名字符串裏面的&符號默認是實體字符串的，但是安卓和ios的sdk會默認對其格式化成&符號，而我們的js插件代碼並沒有做這個事情，所以我直接上傳的簽名字符串一直是實體字符串，所以傳上去的不是&符號，一直調起不了支付寶。而把我們的簽名字符串給支付寶的客服測試，是可以通過的，就因爲他們是用原生應用demo測試的，默認做了這件事情。
這樣支付成功之後就會調後臺寫的回調方法，訂單的狀態就會改變了。

2. 微信支付

是的，又是經過大量的試錯，我選擇了這個cordova插件，我們只是使用其中的微信支付方法，像微信分享等其他功能在這個插件也能實現的。

安裝cordova支付寶支付插件：

ionic cordova plugin add cordova-plugin-wechat --variable wechatappid=xxxxxxxxxx

我們稍微對這個插件的方法簡單封裝一下

declare var Wechat: any;  // 此處聲明plugin.xml中clobbers對應的值
export interface WechatPayParam {
  partnerid: string;
  prepayid: string;
  noncestr: string;
  timestamp: string;
  sign: string;
}

export class WechatPlugin {

  public static isInstalled() {
    return new Promise((resolve, reject) => {
      Wechat.isInstalled(result => {
        resolve(result);
      }, error => {
        reject(error);
      });
    });
  }

  public static sendPaymentRequest(params: WechatPayParam) {
    return new Promise((resolve, reject) => {
      Wechat.sendPaymentRequest(params, result => {
        resolve(result);
      }, error => {
        reject(error);
      });
    });
  }
}

調用後臺的簽名方法

 weiXinPay(sn){
    this.httpService.postPHPWithLoading({
      api:'wxpay',
      order_sn:sn
    }).subscribe(
      payResult=>{
        console.log(payResult);

        var params = {
          partnerid:payResult.partnerid, // merchant id
          prepayid: payResult.prepayid, // prepay id
          noncestr: payResult.noncestr, // nonce
          timestamp: payResult.timestamp+"", // timestamp
          sign: payResult.sign // signed string
        };
        WechatPlugin.sendPaymentRequest(params).then((result)=>{
          //支付成功
          this.paySuccess()
        },(error)=>{
         //支付失敗
          this.payFailed()
        })
      }
    )
  }

這裏的一個坑就是插件要求時間戳timestamp必須是字符串類型，但是一般後臺返回的時間戳都是number類型。所以要對其處理一下。另外微信支付要求每次支付的支付訂單號都是不同的，那麼當我們使用用戶下單的訂單號作爲支付訂單號的時候，如果進行支付並沒有支付而取消了，下次再對這筆訂單進行支付是會失敗的，所以後臺應該在每次支付都保證支付訂單號是唯一的。