微信,支付宝如何唤起H5支付

你离开我真会死。 提交于 2019-11-27 19:28:05

微信,支付宝如何唤起H5支付

支付宝支付

// 请求后台时需要的数据
 this.userPay = {
          amount:  10,  // 支付金额
          rcharge_account: this.user.userPhone,  // 用户账号
          rcharge_type: "experience_volume",  // 请求自己后台接口时需要传的,具体传参数据看后台需要
          user_id: this.user.userId,  // 用户id
          source: "mobile"  // 手机端,
        };
        
// 请求成功会返回一个 from 表单信息,将该表单放在html中,即打开支付宝支付界面。
// 基于Vue框架做的,所以可以这样将 from表单信息放在html当中。

// html
 <div v-html="zfHtml"></div>

// script
export default {
  data() {
    return {
      zfHtml: "",
    };
  }
 }
 
 // 发起请求
 this.$axios.post("http://mp.csdn.net/eg-api/user/pay/aliPay", this.userPay)  // 请求地址为自己后台接口
        .then(res => {
          this.zfHtml = res.data.data;
        });
  1. 支付成功之后的回调:
    同步:return_url 支付成功后回调的页面逻辑,是同步执行的
    异步:notify_url 为异步请求,重要逻辑可在该回调撰写

    支付成功,该项目并没有什么重要逻辑,所以我使用的是 同步回调,支付成功后返回支付该项目中的支付成功页面。
    return_url,链接为一个网页即可,支付成功后,会自动执行的,该链接地址为后台撰写,将链接地址的给后台人员即可。

微信支付

第一步肯定还是向后台请求订单信息,在该项目中,微信支付参数和支付宝参数一样,参数同上。(根据后台需要填写参数)

// 请求后台成功后,会返回一个url,跳转该地址即是微信网页支付页面;

this.$axios
        .post(
          "http://mp.csdn.net/eg-api/user/pay/wxH5Pay",
          this.userPay
        )
        .then(res => {
          this.wxUrl = res.data.data.mweb_url;
        });
 
 //  + 上回调函数
 let url ="&redirect_url=" +encodeURIComponent("http://mp.csdn.net/Success");
 // 回调地址 需要  encodeURIComponent()
 // 最后将请求到的url + 回调url 即可
 window.location.href = this.wxUrl + url;

微信H5 支付只能在浏览器端使用,在微信App内并不支持微信H5支付。

  • 注意,在开发环境中可能会出现,商家缺少配置参数,换为线上环境。
  • 一定不要忘了在微信账号中配置 域名



// 一个月薪2500的狗头,只能记录+分享它的狗生了…

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!