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,跳转成功页面及支付效果