{"id":1603,"date":"2023-03-25T20:10:57","date_gmt":"2023-03-25T12:10:57","guid":{"rendered":"https:\/\/www.appblog.cn\/?p=1603"},"modified":"2023-04-27T21:23:24","modified_gmt":"2023-04-27T13:23:24","slug":"jssdk-of-alipay-and-wechat-payment","status":"publish","type":"post","link":"https:\/\/www.appblog.cn\/index.php\/2023\/03\/25\/jssdk-of-alipay-and-wechat-payment\/","title":{"rendered":"\u652f\u4ed8\u5b9d\u548c\u5fae\u4fe1\u7684JSSDK\u53d1\u8d77\u652f\u4ed8"},"content":{"rendered":"

\u652f\u4ed8\u5b9d<\/h2>\n

\uff081\uff09\u5f15\u5165alipay\u7684jsapi\u6587\u4ef6<\/strong><\/p>\n

<script src="https:\/\/a.alipayobjects.com\/g\/h5-lib\/alipayjsapi\/3.0.6\/alipayjsapi.min.js"><\/script><\/code><\/pre>\n
<\/p>\n
\uff082\uff09\u70b9\u51fb\u652f\u4ed8\u6309\u94ae\u8c03\u7528\u7684\u540e\u53f0\u521b\u5efa\u4ea4\u6613\u7684\u63a5\u53e3\uff0c\u8fd4\u56detradeNO<\/strong><\/p>\n
this.API.trade_create({\n  total_amount: 0.01,\n  subject: localStorage.tablename+'\u70b9\u9910',\n  buyer_id: localStorage.user_id,\n  shop_id: localStorage.shop_id,\n  seller_id: localStorage.seller_id,\n  out_trade_no: this.orderdetail['pos_reference'],\n  payment: 'CODEPAY'\n}).then((response) => {\n  \/\/\u8be5\u63a5\u53e3\u4e3b\u8981\u662f\u4e3a\u4e86\u62ff\u5230tradeNO,\u524d\u7aef\u53ea\u9700\u62ff\u5230tradeNO\u5373\u53ef\n  this.alipayPay(response);\n}, (response) => {\n  mui.toast('\u7f51\u7edc\u9519\u8bef');\n});\n\n\/\/\u4f20\u5165tradeNO\nalipayPay: function (response) {\n  this.tradePay(response);\n}\n\n\/\/\u53d1\u8d77\u652f\u4ed8\ntradePay: function (tradeNO) {\n  let that = this;\n  this.alipayReady(function() {\n    \/\/ \u901a\u8fc7\u4f20\u5165\u4ea4\u6613\u53f7\u5524\u8d77\u5feb\u6377\u8c03\u7528\u65b9\u5f0f(\u6ce8\u610ftradeNO\u5927\u5c0f\u5199\u4e25\u683c)\n    AlipayJSBridge.call("tradePay", {\n      tradeNO: tradeNO\n    }, function (data) {\n      \/\/\u652f\u4ed8\u6210\u529f\u540edata.resultCode\u662f900\n      if ("9000" == data.resultCode) {\n        that.processActionLog(tradeNO);\n        \/\/\u8fd9\u662f\u626b\u7801\u70b9\u9910\u7684\u6570\u636e\u56de\u6d41\u7ed9\u652f\u4ed8\u5b9d\u7684\u4ee3\u7801\uff0c\u6ca1\u7528\u5230\u53ef\u4ee5\u76f4\u63a5\u53bb\u6389\n        that.$store.dispatch('user_record',{\n          orderid: that.orderdetail['id'],\n          shop_id: localStorage.shop_id,\n          user_id: localStorage.user_id,\n          merchant_pid: localStorage.seller_id,\n          tablename:  localStorage.tablename,\n          i: localStorage.i,\n          status: 14,\n          statusDesc: '\u5df2\u652f\u4ed8',\n          action_type: 'order_dishes'\n        });\n        that.$router.push({path:'\/orderinfo'});\n      }\n    });\n  });\n}<\/code><\/pre>\n
\u5fae\u4fe1<\/h2>\n
\uff081\uff09\u9996\u5148\u5b89\u88c5\u4e0bjssdk<\/strong><\/p>\n
npm i -S weixin-js-sdk<\/code><\/pre>\n
\uff082\uff09main.js\u5f15\u5165<\/strong><\/p>\n
import wx from 'weixin-js-sdk'\nVue.prototype.$wx = wx;<\/code><\/pre>\n
\uff083\uff09\u70b9\u51fb\u652f\u4ed8\u6309\u94ae\u53d1\u8d77\u652f\u4ed8<\/strong><\/p>\n
this.API.toPay({\n  \/\/\u53c2\u6570\u6839\u636e\u540e\u53f0\u9700\u8981\n  ordersn:this.orderdetail['pos_reference'],\n  amount:this.orderdetail['amount_total'],\n  user_id:localStorage.user_id,\n  payment:'CODEPAY'\n}).then((response) => {\n  \/\/\u83b7\u53d6\u540e\u53f0\u8fd4\u56de\u7684\u652f\u4ed8\u7684\u6570\u636e\uff0c\u8c03\u7528jssdk\u53d1\u8d77\u652f\u4ed8\n  this.weixinPay(response);\n}, (response) => {\n  mui.toast('\u7f51\u7edc\u9519\u8bef');\n});\n\n\/\/\u53d1\u8d77\u652f\u4ed8\u7684\u65b9\u6cd5\nweixinPay: function (response) {\n  let that = this;\n\n  this.$wx.config({\n    debug: false, \n    appId: response['sdk_appid'],\n    timestamp: response['sdk_timestamp'],\n    nonceStr: response['sdk_noncestr'],\n    signature: response['sign'],\n    jsApiList: ['chooseWXPay']\n  });\n\n  this.$wx.ready(function(){\n    that.$wx.chooseWXPay({\n      timestamp: response['sdk_timestamp'],\n      nonceStr: response['sdk_noncestr'],\n      package: response['sdk_package'],\n      signType: response['sdk_signtype'],\n      paySign: response['sdk_paysign'],\n      success: function(res) {\n        that.$router.push({path:'\/orderinfo'});\n      },\n      fail: function(res){\n        console.log(JSON.stringify(res));\n      }\n    });\n  });\n\n  this.$wx.error(function(res) {\n    console.log(JSON.stringify(res));\n  });\n}<\/code><\/pre>\n
\u53e6\u4e00\u79cd\u53d1\u8d77\u5fae\u4fe1\u652f\u4ed8\u65b9\u5f0f\uff0c\u4e0d\u4f7f\u7528jssdk<\/p>\n
\/\/\u62ff\u5230\u540e\u53f0\u8fd4\u56de\u7684\u652f\u4ed8\u4fe1\u606f\uff0c\u8c03\u7528onBridgeReady\nonBridgeReady: function (response) {\n  this.initWeixinReady(response);\n},\ninitWeixinReady: function (response) {\n  WeixinJSBridge.invoke(\n    'getBrandWCPayRequest', {\n      "appId":response['sdk_appid'],  \/\/\u516c\u4f17\u53f7\u540d\u79f0\uff0c\u7531\u5546\u6237\u4f20\u5165\n      "timeStamp":response['sdk_timestamp'],  \/\/\u65f6\u95f4\u6233\uff0c\u81ea1970\u5e74\u4ee5\u6765\u7684\u79d2\u6570\n      "nonceStr":response['sdk_noncestr'],  \/\/\u968f\u673a\u4e32\n      "package":response['sdk_package'],\n      "signType":response['sdk_signtype'],  \/\/\u5fae\u4fe1\u7b7e\u540d\u65b9\u5f0f\n      "paySign":response['sdk_paysign'] \/\/\u5fae\u4fe1\u7b7e\u540d\n    },\n    function(res) {\n      if(res.err_msg == "get_brand_wcpay_request:ok" ) {\n        mui.toast('\u652f\u4ed8\u6210\u529f');\n      } else {\n        mui.toast('\u652f\u4ed8\u5931\u8d25');\n      }\n    });\n\n  if (typeof WeixinJSBridge == "undefined") {\n    if (document.addEventListener) {\n      document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false);\n    } else if (document.attachEvent) {\n      document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady);\n      document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady);\n    }\n  }\n}<\/code><\/pre>\n
\u9644\u52a0\u64cd\u4f5c<\/h2>\n
\u652f\u4ed8\u5b9d\u652f\u4ed8\u5b8c\u6210\u540e\u5173\u95ed\u7a97\u53e3\uff1a<\/p>\n
AlipayJSBridge.call('closeWebview');<\/code><\/pre>\n
\u5fae\u4fe1\u652f\u4ed8\u5b8c\u6210\u540e\u5173\u95ed\u7a97\u53e3\uff1a<\/p>\n
that.$wx.closeWindow();<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
\u652f\u4ed8\u5b9d \uff081\uff09\u5f15\u5165alipay\u7684jsapi\u6587\u4ef6 <script src="https:\/\/a. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[371,372],"tags":[399],"class_list":["post-1603","post","type-post","status-publish","format-standard","hentry","category-wechat-pay","category-alipay","tag-jssdk"],"_links":{"self":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/1603","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/comments?post=1603"}],"version-history":[{"count":0,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/1603\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/media?parent=1603"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/categories?post=1603"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/tags?post=1603"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}