H5の支払いをドッキング

プロジェクトの要件

要件分析

当初は、決済環境の多様性や消費者主導型決済の多様な運用可能性から、直接的なコードは検討されず、プロジェクト要件の単純なプロセス分析が行われました。

コードの実装

注文ページから支払いページへ

• ブラウザの識別を取得

const ua = window.navigator.userAgent.toLowerCase();

// created 
const ua = window.navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i) == 'micromessenger'){
 this.getCode(); 
}

• ユーザは認証に同意し、openIdを取得します。

getCode() {
 const openId = this.GetUrlParam('code') // あなたはすでにopenIdを取得する背景に直接コードを取得している場合、権限がない場合は、パスのコードを傍受する
 const local = window.location.href
 const appid = 'wxxxxxxx' // サービスID
 if (openId == null || openId === '') {
 window.location.href =
 'https://...com/connect/oauth2/authorize?appid=' + appid + '&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_base&state=#_redirect'
 } else {
 this.openId = openId
 }
}

• openIdがない場合、ユーザのopenIdを取得します。

GetUrlParam(code) {
 var reg = new RegExp('(^|&)' + code + '=([^&]*)(&|$)')
 let url = window.location.href.split("#")[0]
 let search = url.split('?')[1]
 if (search) {
 var r = search.substr(0).match(reg)
 if (r !== null) return unescape(r[2])
 return null
 } else {
 return null
 }
}

支払いページに移動し、支払い方法を選択し、支払いを送信します。

/**
 * buttonDisabled繰り返し提出を避けるために、コマンドを無効にバインドボタンの状態である
 * radioOptions別のオプション値の支払いは、アリペイの支払いのための1、支払いのための2である
 * openId内蔵ブラウザで取得したユーザーのopenIdである
 */
payMoney() {
 this.buttonDisabled = true
 if(this.radioOptions === '') {
 this.buttonDisabled = false
 return this.$toast('お支払い方法を選択してください')
 } else if(this.radioOptions === '1' && this.openId !== '' && this.openId !== null) {
 this.buttonDisabled = false
 return this.$toast('選択してください ')
 } else if(this.radioOptions === '1' && this.openId === '') {
 return this.getOrderNumber(this.radioOptions)
 } else if(this.radioOptions === '2') {
 return this.getOrderNumber(this.radioOptions)
 }
}

ユーザーが適切な支払い方法を選択し、支払い送信ボタンをクリックすると、主観的にユーザーが支払う意思を持っていると仮定することができますので、選択した製品の情報に基づいて、ここで対応する注文番号を取得することができます、ユーザーが支払いページに入ったときに取得することを選択しない理由は、支払いについて一定の不確実性があるためです。

• 注文番号を取得

getOrderNumber(val) {
 /**
 * これは、データの正当性を確保するために、商品データのフロントチェック処理でなければならない
 */
 // 注文のインターフェイスを作成する
 createOrderNumber({
 // パラメータを渡すために順序を作成する
 }).then(res => {
 const orderInfo= sessionStorage.getItem('orderInfo') // セッションに格納されている注文情報を取得する
 if(res.code === 0) { // これは、生成された新しい注文番号があることを示している
 sessionStorage.removeItem('orderInfo') // かどうかに関係なく、セッション内の古い注文情報をクリアする
 sessionStorage.setItem('orderInfo', res.orderNum) // セッションに新しい注文番号を保存する
 } else if (res.code === 1 && orderInfo !== null) { // 新しい注文番号が生成されず、注文情報が空ではありません。
 sessionStorage.getItem('orderInfo') // セッションから注文番号を取得する
 } else if (res.code === 1 && orderInfo === null){ // 新しい注文番号はなく、注文情報は空である。
 this.buttonDisabled = false
 return this.$toast(res.msg) // このような商品が売り切れ、席が占有し、他の情報などの情報を返すためのヒント
 }
 // コード内のため、操作をクリアするために注文番号のセッションがあるかもしれないので、最新の注文番号を取得する必要がある
 const orderNumber = sessionStorage.getItem('orderInfo')
 if (orderNumber && val === '1') { // 注文番号の情報は、アリペイの支払いパラメータのパラメータを渡す
 return this.getApplyAliPay(orderNumber) // アリペイの支払い方法
 } else if(orderNumber && val === '2' && this.openId !== '' ) { // 注文番号の情報があり、支払いのためのパラメータを渡すが、ユーザーopenIdは空ではない。
 // 内蔵ブラウザの支払い
 const status = 1
 return this.getWxPay(orderNum, status) // これは、パラメータは、注文番号、支払い決済パラメータのデータである渡され、異なる値を返すようにサーバーにパラメータを渡すことになる
 } else if(orderNumber && val === '2' && this.openId === '') { // 注文番号の情報があり、支払いのためのパラメータを渡すが、ユーザーopenIdは空である。
 // h5 
 const status = 2
 return this.getWxPay(orderNumber, status)
 } else { 
 this.buttonDisabled = false
 return this.$toast('カスタマイズされたヒントはここにある')
 }
 }).catch(err => {
 console.log(err)
 })
}

アリペイ決済コールの方法

getApplyAliPay(orderNumber) {
 getApplyAliPay({
 // 他のパラメータが渡される
 orderNumber: orderNumber,
 paysuccessUrl: 'xxx' // アドレスのリダイレクト後の支払いの成功
 }).then(res => {
 const div = document.createElement('div')
 div.id = 'alipay'
 div.innerHTML = res
 document.body.appendChild(div)
 document.querySelector('#alipay').children[0].submit() // 実装後にアリペイを呼び起こすだろう
 }).catch(err => {
 console.log(err)
 })
}

• div.innerHTML の値は、バックエンドから返される値によって決まります。

<form name="punchout_form" method="post" action="xxx">
<input type="hidden" name="biz_content" value="xxx">
<input type="submit" value="今すぐ支払う "スタイル="display:none" >
</form>
<script>document.forms[0].submit();</script>