Предыстория: Все текущие проекты требуют оплаты, что неизбежно связано с платежами через Alipay или WeChat. Если это платеж Alipay, многие говорят, что это был 2202, и Alipay по-прежнему возвращает форму формы , а затем вызывает интерфейс Alipay.
Вообще говоря, Alipay делится на два типа: платеж, инициируемый внешним интерфейсом, и платеж, инициируемый фоном:
① Платеж, инициируемый внешним интерфейсом, сначала отправляет данные заказа в фоновый режим для создания заказа. Затем внешний интерфейс вызывает платеж мобильного телефона для осуществления платежа;
②Если метод инициирования платежа в фоновом режиме принят, возврат представляет собой html-структуру формы <form >< /form>, которая содержит <script> написано в теге Listen to the submit button event</script>;
проще говоря, платеж, инициированный фоном, вернет форму формы, а метод отправки в форме будет вызываться для вызова интерфейса Alipay.
1. Идеи реализации
Прежде всего, уточним бизнес-логику, должен быть процесс отправки информации о заказе [post] до скачка оплаты, а вся наша платежная форма возвращает результат после [post]. Возвращаемый строковый результат выглядит следующим образом:
Чтобы разобраться, весь процесс оплаты (этот процесс только для бизнеса компании, только для справки):
①Сгенерировать токен, createToken;
②Создать заказ createOrder, сгенерировать orderCoder (пс: вам нужно использовать его позже, чтобы получить детали заказа);
③H5 вызывается через почтовый интерфейс и возвращает форму формы (большинство случаев в Интернете относятся к этому шагу);
④H5 и шаг ③ инициируются одновременно, чтобы получить детали заказа, опросить результат платежа и, наконец, вернуть результат успешного или неудачного платежа (ps: в этом процессе фоновый вызов вызывает интерфейс и не может получить обратный вызов после платежа.В настоящее время опрос используется для вызова фонового платежа интерфейса к состоянию).
2. Связанные коды
Интерфейсный код:
2.1 方法一：使用document.forms[0].submit()，提交表单操作
(1) Сначала поместите содержимое формы на страницу:
<div class="aliform" v-html="aliform"></div>
(2) Получите первое представление формы текущей страницы через document.forms[0].submit():
<script>
export default {
data() {
return {
aliform: "",
};
},
methods: {
async iosAlipay(orderCode) {
let data = await requestAlipay(orderCode);
if (data.code == 20000) {
this.aliform = data.data; //data.data就是支付宝返回给你的form,获取到的表单内容,具体样子可见上面的图片
this.$nextTick(() => {
// 获取订单详情来轮询支付结果
this.getOrderDetail();
console.log(document.forms); //跳转之前,可以先打印看看forms,确保后台数据和forms正确,否则，可能会出现一些奇奇怪怪的问题 ╮(╯▽╰)╭
document.forms[0].submit(); //重点--这个才是跳转页面的核心,获取第一个表单并提交
});
}
},
// 轮询结果
getOrderDetail() {
//轮询方法,因为支付是跳转到第三方支付宝,我们无法获知用户是否支付成功,或者用户支付成功后是否跳转回来。轮询方法,在一定时间内
clearTimeout(this.timer);
this.timer = setTimeout(() => {
let initTime = +new Date();
let loop = () => {
getOrderDetail({
orderCode: this.orderCode}).then((res) => {
if (res.code == 20000 && res.data && res.data.payStatus == 30) {
//支付成功的相关操作
} else {
let now = +new Date();
if (now - initTime < 45000) {
loop();
} else {
// 超时按照失败处理
//支付失败的结果
}
}
});
};
loop();
}, 500);
},
}
}
</script>
<style lang="less" scoped >
.aliform {
width: 1px;
height: 1px;
opacity: 0;
}
</style>
(3) Отступление — взгляните на метод document.forms, предоставляемый js:
(1)document.forms //表示获取当前页面的所有表单；
(2)document.forms[0] //表示获取当前页面的第一个表单；
(3)document.forms['exportServlet'] //表示获取当前页面的name="exportServlet"的表单
(4)submit() //表示提交函数
2.2 方法二：使用document.write()，就是重定向，覆盖原始页面
\\ 假设result是后端返回的from字符串
const newWindow = window.open('', '_self');
newWindow.document.write(result);
newWindow.focus();
или,直接使用document.write(xxx)，来进行支付跳转
await postUserinfo('接口入参').then(res=>{
document.write(res.data.result)
})
Если он обрабатывается на стороне ПК, с этим методом проблем нет, но необходимо обратить внимание на три момента:
①window.open() срабатывает в обратном вызове интерфейса, что может быть перехвачено браузером;
②Если адрес самой страницы https, а действие возвращаемой формы – http, то браузер также выведет запрос безопасности ③ Окно среды WeChat .open() не
действует.
2.3 方法三：动态创建div容器，将form渲染进去，js触发form提交
Несмотря на то, что за пределами формы, возвращаемой в результат, находится html-пакет, можно динамически создать контейнер div, и тогда результат, содержащий <html>, будет отрендерен в него, а отправка формы формы будет инициирована через js.
const div = document.createElement('formdiv');
div.innerHTML = result;
document.body.appendChild(div);
document.forms['cashierSubmit'].setAttribute('target', '_self');
document.forms['cashierSubmit'].submit();
div.remove();
Для H5 это решение более совместимо.нужно знать, это:
Вначале установка цели формы на _blank делала невозможным отправку формы браузерами на ios (среда WeChat, Safari, UC). После смены на _self проблема решена.
В качестве альтернативы это также работает:
let divForm = document.getElementsByTagName('divform')
if (divForm.length) {
document.body.removeChild(divForm[0])
}
const div = document.createElement('divform')
div.innerHTML = res.data // res.data就是支付宝返回给你的form
document.body.appendChild(div)
// document.forms[0].setAttribute('target', '_blank') // 加了_blank可能出问题所以我注释了
document.getElementById('alipay_submit').submit()
Или попробуйте следующее:
//将接口返回的Form表单显示到页面
document.querySelector('body').innerHTML = res.data; // res.data就是支付宝返回给你的form
//调用submit 方法
document.forms[0].submit()
Справочный блог:
UNI-APP анализирует форму FORM, возвращаемую Alipay, и вызывает интерфейс Alipay https://www.freesion.com/article/6241970398/
Vue прекрасно решает проблему формы, возвращаемую Alipay, что может быть наиболее эффективным решением https:// blog .zixutech.cn/archives/324
Форма Alipay, возвращенная бэкэндом в проекте vue, как реализовать скачок оплаты? https://blog.csdn.net/qq_45934004/article/details/126156546
После того, как Vue автоматически отправит форму формы, он автоматически перейдет на стороннюю страницу https://www.jianshu.com/p/e2323b4e2cf9
Заметки о разработке форма возврата платежа uniapp Alipay форма решение http://blog.haiya360.com/archives/766.html
vue URL возврата Alipay новое окно открыть https://blog.csdn.net/wax9092/article/details/86631151
H5 обработка интерфейс Alipay Форма возврата https://www.jianshu.com/p/8c5375671495
Форма Alipay, возвращенная бэкэндом в проекте vue, как реализовать скачок оплаты? https://blog.csdn.net/qq_45934004/article/details/126156546
Vue отлично решает проблему формы, возвращаемой Alipay, что может быть наиболее эффективным решением https://blog.zixutech.cn/archives/324