js调微信支付支付宝支付

Posted 2021-03-26 adolfvicto

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js调微信支付支付宝支付相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="btn">点击click</div>

function setupWebViewjavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
window.WVJBCallbacks = [callback];
var WVJBIframe = document.createElement(‘iframe‘);
WVJBIframe.style.display = ‘none‘;
WVJBIframe.src = ‘wvjbscheme://__BRIDGE_LOADED__‘;
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)

}

var u = navigator.userAgent;
var isandroid = u.indexOf(‘Android‘) > -1 || u.indexOf(‘Adr‘) > -1 //android终端
var isios = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
// console.log(item)
if(isAndroid){
window.AndroidWebView.OnClickMethod(‘wechat_pay‘,JSON.stringify({
appid:"wx78c2dc9c01b80aa4",//移动应用的appid
noncestr:"nurd5ac5vfdsujmh0v2s7dmm7w7kxu34",//生成签名的随机串
package:"Sign=WXPay",//订单详情扩展字符串
partnerid:"1534243971",//商户号
prepayid:"wx28182123435578cdcec9be991021847700",//统一下单接口返回的 prepay_id
timestamp:"13589200697",//生成签名的时间戳
sign:"21BE66D5CDAE3F6DB9CF7E7865541D8E",//签名
url:‘http://www.goumaijie.com/?mod=appapi&act=vue_jump&ctrl=share_app_mem‘//要跳转的url
}),‘‘)
}else if(isiOS){
setupWebViewJavascriptBridge((bridge)=> {
var params = {"wechat_pay": ‘jump_SkipUIIdentifier‘,"comFrom":JSON.stringify({
appid:"wx78c2dc9c01b80aa4",//移动应用的appid
noncestr:"nurd5ac5vfdsujmh0v2s7dmm7w7kxu34",//生成签名的随机串
package:"Sign=WXPay",//订单详情扩展字符串
partnerid:"1534243971",//商户号
prepayid:"wx28182123435578cdcec9be991021847700",//统一下单接口返回的 prepay_id
timestamp:"13589200697",//生成签名的时间戳
sign:"21BE66D5CDAE3F6DB9CF7E7865541D8E",//签名
url:‘http://www.goumaijie.com/?mod=appapi&act=vue_jump&ctrl=share_app_mem‘//要跳转的url
}),"identifier":‘wechat_pay‘}
bridge.callHandler(‘WebViewJavascriptBridge‘,params,()=>{})
// setTimeout(()=>{
// if(this.$cookies.isKey(‘SpecialShopMoreOpen‘)){
// this.$cookies.remove(‘SpecialShopMoreOpen‘)
// }else{
// if(typeof(callback)=="function"){
// callback()
// }
// }
// },3000)
})

}

}, false);

//支付宝支付js交互
/*
document.getElementById("btn").addEventListener(‘click‘, function () {
console.log(777)

}

var u = navigator.userAgent;
var isAndroid = u.indexOf(‘Android‘) > -1 || u.indexOf(‘Adr‘) > -1 //android终端
var isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
// console.log(item)
if(isAndroid){
window.AndroidWebView.OnClickMethod(‘alipay_topay‘,JSON.stringify({
//参数code为签名字符串 url是要跳转的url
code:‘biz_content=%7B%22body%22%3A%222017%E6%98%A5%E5%AD%A3%E6%96%B0%E6%AC%BE%E4%BF%AE%E8%BA%AB%22%2C%22out_trade_no%22%3A%2210881566987772%22%2C%22subject%22%3A%22%E5%97%A8%E5%A6%82%E6%84%8F%22%2C%22timeout_express%22%3A%2230m%22%2C%22total_amount%22%3A%220.01%22%7D&version=1.0&method=alipay.trade.app.pay&format=json&app_id=2016120103683451&sign_type=RSA×tamp=2019-08-28+18%3A22%3A52&charset=utf-8¬ify_url=http%3A%2F%2Fwww.goumaijie.com%2Fpayapi.php&sign=bcsnLQJy5uWhM7yBPjkxmqjHe%2FI%2BfJiVJDsGoEk0kwI%2BYIQ52bHQVNuijPOdfDCw9OEq0OnRPKRf4q58F9tZZ4Fzx8XuJTdopN4v7y1%2FJCo1CTP%2FcmzlNzOw7V6SfWwEqXuV7nwJCEpofk1Q0qWE2gewyzQPr7InmJlNELAKC9U%3D‘,
url:‘http://www.goumaijie.com/?mod=appapi&act=vue_jump&ctrl=share_app_mem‘//要跳转的url
}),‘‘)
}else if(isiOS){
setupWebViewJavascriptBridge((bridge)=> {
var params = {"alipay_topay": ‘jump_SkipUIIdentifier‘,"comFrom":JSON.stringify({
//参数code为签名字符串 url是要跳转的url
code:‘biz_content=%7B%22body%22%3A%222017%E6%98%A5%E5%AD%A3%E6%96%B0%E6%AC%BE%E4%BF%AE%E8%BA%AB%22%2C%22out_trade_no%22%3A%2210881566987772%22%2C%22subject%22%3A%22%E5%97%A8%E5%A6%82%E6%84%8F%22%2C%22timeout_express%22%3A%2230m%22%2C%22total_amount%22%3A%220.01%22%7D&version=1.0&method=alipay.trade.app.pay&format=json&app_id=2016120103683451&sign_type=RSA×tamp=2019-08-28+18%3A22%3A52&charset=utf-8¬ify_url=http%3A%2F%2Fwww.goumaijie.com%2Fpayapi.php&sign=bcsnLQJy5uWhM7yBPjkxmqjHe%2FI%2BfJiVJDsGoEk0kwI%2BYIQ52bHQVNuijPOdfDCw9OEq0OnRPKRf4q58F9tZZ4Fzx8XuJTdopN4v7y1%2FJCo1CTP%2FcmzlNzOw7V6SfWwEqXuV7nwJCEpofk1Q0qWE2gewyzQPr7InmJlNELAKC9U%3D‘,
url:‘http://www.goumaijie.com/?mod=appapi&act=vue_jump&ctrl=share_app_mem‘//要跳转的url
}),"identifier":‘alipay_topay‘}
bridge.callHandler(‘WebViewJavascriptBridge‘,params,()=>{})
// setTimeout(()=>{
// if(this.$cookies.isKey(‘SpecialShopMoreOpen‘)){
// this.$cookies.remove(‘SpecialShopMoreOpen‘)
// }else{
// if(typeof(callback)=="function"){
// callback()
// }
// }
// },3000)
})

}

}, false);
*/

//余额支付js交互
/*
document.getElementById("btn").addEventListener(‘click‘, function () {
console.log(777)

}

}),‘‘)
}else if(isiOS){
setupWebViewJavascriptBridge((bridge)=> {
var params = {"jump_SkipUIIdentifier": ‘jump_SkipUIIdentifier‘,"comFrom":JSON.stringify({
//其他不用动只需要传url
is_need_login: "1",
SkipUIIdentifier: "pub_wailian",
show_type_str: "",
url: "",//余额支付只要传这个
jsonInfo: `{"outlink_style":"0","outlink_check_fontcolor":"000000","outlink_check_bgcolor":"FFFFFF","outlink_pull_onoff":"0","outlink_navhide_onoff":"0","wl_type":"0","outlink_returnimg":"http://www.goumaijie.com/View/index/img/appapi/comm/outlink_checkreturnimg.png","outlink_checkreturnimg":"http://www.goumaijie.com/View/index/img/appapi/comm/outlink_checkreturnimg.png","outlink_closeimg":"http://www.goumaijie.com/View/index/img/appapi/comm/outlink_checkcloseimg.png","outlink_checkcloseimg":"http://www.goumaijie.com/View/index/img/appapi/comm/outlink_checkcloseimg.png"}`

}),"identifier":‘jump_SkipUIIdentifier‘}
bridge.callHandler(‘WebViewJavascriptBridge‘,params,()=>{})
// setTimeout(()=>{
// if(this.$cookies.isKey(‘SpecialShopMoreOpen‘)){
// this.$cookies.remove(‘SpecialShopMoreOpen‘)
// }else{
// if(typeof(callback)=="function"){
// callback()
// }
// }
// },3000)
})

}

}, false);
*/

//交互跳转标识的
function pay_doing(obj){
var senddata={};

senddata[‘appid‘]="wx78c2dc9c01b80aa4";
senddata[‘noncestr‘]="nurd5ac5vfdsujmh0v2s7dmm7w7kxu34";
senddata[‘package‘]="Sign=WXPay";
senddata[‘partnerid‘]="15342471";
senddata[‘prepayid‘]="wx28182123435578cdcec9be991021847700";
senddata[‘timestamp‘]="13589200697";
senddata[‘sign‘]="21BE66D5CDAE3F6DB9CF7E7865541D8E";
senddata[‘url‘]=‘http://www.goumaijie.com/?mod=appapi&act=vue_jump&ctrl=share_app_mem‘;

senddata=JSON.stringify(senddata);
js_repl("wechat_pay",senddata,‘wechat_pay‘,‘‘);
return;
}

function pay_doing1(obj){
var senddata={};
senddata[‘code‘]=‘biz_content=%7B%22body%22%3A%222017%E6%98%A5%E5%AD%A3%E6%96%B0%E6%AC%BE%E4%BF%AE%E8%BA%AB%22%2C%22out_trade_no%22%3A%2210881566987772%22%2C%22subject%22%3A%22%E5%97%A8%E5%A6%82%E6%84%8F%22%2C%22timeout_express%22%3A%2230m%22%2C%22total_amount%22%3A%220.01%22%7D&version=1.0&method=alipay.trade.app.pay&format=json&app_id=2016120103683451&sign_type=RSA×tamp=2019-08-28+18%3A22%3A52&charset=utf-8¬ify_url=http%3A%2F%2Fwww.goumaijie.com%2Fpayapi.php&sign=bcsnLQJy5uWhM7yBPjkxmqjHe%2FI%2BfJiVJDsGoEk0kwI%2BYIQ52bHQVNuijPOdfDCw9OEq0OnRPKRf4q58F9tZZ4Fzx8XuJTdopN4v7y1%2FJCo1CTP%2FcmzlNzOw7V6SfWwEqXuV7nwJCEpofk1Q0qWE2gewyzQPr7InmJlNELAKC9U%3D‘;
senddata[‘url‘]=‘http://www.goumaijie.com/?mod=appapi&act=vue_jump&ctrl=share_app_mem‘;
senddata=JSON.stringify(senddata);

js_repl("alipay_topay",senddata,‘alipay_topay‘,‘‘);
return;
}

</script>
</body>
</html>

以上是关于js调微信支付支付宝支付的主要内容，如果未能解决你的问题，请参考以下文章

zhifuweb开发中的支付宝支付和微信支付

判断客户端是微信，还是支付宝

微信支付宝淘宝客户端内 h5 js唤起支付

微信上可以用支付宝支付接口吗

Node.js 整合 Express 框架实现微信支付和支付宝支付