Angular +Ionic实现支付功能

Angular +Ionic+axios实现第三方支付功能

1.下载axios

npm install axios -s

2.axios.service.ts配置

import { Injectable } from "@angular/core";
import axios from "axios"
@Injectable({
    providedIn: "root"
})
export class AxiosService {
    constructor() { }
    AxiosPost(postData) {
        return new Promise((resolve, reject) => {
            axios({
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8',
                    // dataType: 'json',
                    contentType: 'application/json;charset=UTF-8'
                },
                method: 'post',
                url: "/abc/v1/payment/unifiedorder",
                data: JSON.stringify(postData)
            }).then((res) => {
                resolve(res)
            })
        })
    }
}

3.调用第三方支付接口

ts文件中：

//获取H5支付链接
  public PayByh5={
    Paydata:null
  }

  payMoney() {
    console.log(this.orderMain)
    this.rest.apiPost({
      ordernumbers: this.orderMain.orderNumber,//订单编号
      gatewayType: 'H5'
    }, this.rest.ipsToPay)
      .subscribe((payRes) => {
        if (payRes.status === 200) {
          console.log(payRes.data)
          let reqObj ={
            "appId":payRes.data.appId,
            "appName":payRes.data.appName,
            "mchId":payRes.data.mchId,
            "outTradeNo":payRes.data.outTradeNo,
         
            "totalFee":payRes.data.totalFee,
            "notifyUrl":payRes.data.notifyUrl,
            "nonceStr":payRes.data.nonceStr,
            "profitSharing":"N",
            "body":payRes.data.body,
            "tradeType":payRes.data.tradeType,
            "signType":payRes.data.signType,
            "sign":payRes.data.sign,
            "unionId": payRes.data.unionId
        }
          this.$axios.AxiosPost(reqObj).then((data) => {
            console.log(data)
            //接收支付接口数据
            this.PayByh5.Paydata=data["data"];
            //跳转第三方支付页面
            window.location.href = this.PayByh5.Paydata["mwebUrl"]
          })
        } else {
          this.toastError(this.toastCtrl, payRes.msg);
        }
      }, (err) => {
        this.toastError(this.toastCtrl, '连接失败');
      });
  }

4,跳转成功页面及支付效果