uniapp h5支付宝支付

发布于:2025-02-26 ⋅ 阅读:(13) ⋅ 点赞:(0)

 第1种,创建个div插入到body中

const div = document.createElement('div');
div.innerHTML = 后端返回的form表单字符串;
document.body.appendChild(div);
document.forms[0].submit();
div.remove();

第2种

<template>
<view v-html="formAliPay"></view>
</template>

<script>
this.formAliPay = 后端返回的form表单字符串;
this.$nextTick(() => {
	document.forms['punchout_form'].submit(); //punchout_form是支付宝表单的name
});
</script>

发现一个问题。在公众号中打开支付页,跳转到支付宝支付直接显示出url地址,而通过聊天中发的链接在微信中打开是跳到中转页面。可以参考下支付宝给的解决方案小程序文档 - 支付宝文档中心,中间加个跳转页面而不使用官方默认的跳转。

* 官方例子中有个参数bizcontent,名称有误,应该是biz_content

将支付宝demo中的ap.js和pay.htm复制到项目中,在b.pay()中改下路径。

如果在vue中使用import导入需要改下ap.js

//ap_vue.js
export function alipay() {
	var b = {};
	var a = {};
	var c = "abc123";
	a.PADCHAR = "=";
	a.ALPHA = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
	a.makeDOMException = function() {
		var f, d;
		try {
			return new DOMException(DOMException.INVALID_CHARACTER_ERR)
		} catch (d) {
			var c = new Error("DOM Exception 5");
			c.code = c.number = 5;
			c.name = c.description = "INVALID_CHARACTER_ERR";
			c.toString = function() {
				return "Error: " + c.name + ": " + c.message
			};
			return c
		}
	};
	a.getbyte64 = function(e, d) {
		var c = a.ALPHA.indexOf(e.charAt(d));
		if (c === -1) {
			throw a.makeDOMException()
		}
		return c
	};
	a.decode = function(f) {
		f = "" + f;
		var j = a.getbyte64;
		var h, e, g;
		var d = f.length;
		if (d === 0) {
			return f
		}
		if (d % 4 !== 0) {
			throw a.makeDOMException()
		}
		h = 0;
		if (f.charAt(d - 1) === a.PADCHAR) {
			h = 1;
			if (f.charAt(d - 2) === a.PADCHAR) {
				h = 2
			}
			d -= 4
		}
		var c = [];
		for (e = 0; e < d; e += 4) {
			g = (j(f, e) << 18) | (j(f, e + 1) << 12) | (j(f, e + 2) << 6) | j(f, e + 3);
			c.push(String.fromCharCode(g >> 16, (g >> 8) & 255, g & 255))
		}
		switch (h) {
			case 1:
				g = (j(f, e) << 18) | (j(f, e + 1) << 12) | (j(f, e + 2) << 6);
				c.push(String.fromCharCode(g >> 16, (g >> 8) & 255));
				break;
			case 2:
				g = (j(f, e) << 18) | (j(f, e + 1) << 12);
				c.push(String.fromCharCode(g >> 16));
				break
		}
		return c.join("")
	};
	a.getbyte = function(e, d) {
		var c = e.charCodeAt(d);
		if (c > 255) {
			throw a.makeDOMException()
		}
		return c
	};
	a.encode = function(f) {
		if (arguments.length !== 1) {
			throw new SyntaxError("Not enough arguments")
		}
		var g = a.PADCHAR;
		var h = a.ALPHA;
		var k = a.getbyte;
		var e, j;
		var c = [];
		f = "" + f;
		var d = f.length - f.length % 3;
		if (f.length === 0) {
			return f
		}
		for (e = 0; e < d; e += 3) {
			j = (k(f, e) << 16) | (k(f, e + 1) << 8) | k(f, e + 2);
			c.push(h.charAt(j >> 18));
			c.push(h.charAt((j >> 12) & 63));
			c.push(h.charAt((j >> 6) & 63));
			c.push(h.charAt(j & 63))
		}
		switch (f.length - d) {
			case 1:
				j = k(f, e) << 16;
				c.push(h.charAt(j >> 18) + h.charAt((j >> 12) & 63) + g + g);
				break;
			case 2:
				j = (k(f, e) << 16) | (k(f, e + 1) << 8);
				c.push(h.charAt(j >> 18) + h.charAt((j >> 12) & 63) + h.charAt((j >> 6) & 63) + g);
				break
		}
		return c.join("")
	};
	b.pay = function(d) {
		var c = encodeURIComponent(a.encode(d));
		location.href = "./static/pay.htm?goto=" + c
	};
	b.decode = function(c) {
		return a.decode(decodeURIComponent(c));
	}
	
	return b;
}
import {alipay} from '@/static/ap_vue.js';

if(判断在微信浏览器中){
    this.$nextTick(() => {
        var gotoUrl = document.getElementsByName('punchout_form')[0].getAttribute('action') + '&biz_content=' + encodeURIComponent(document.getElementsByName('biz_content')[0].value);
        alipay().pay(gotoUrl)
    });
}