移動端中跳轉支付寶、微信

NO IMAGE

今兒在APPH5中遇到付款的場景:

  1. 首先用戶B成為商家,要賣“衣服”,並且提供了收款方式,比如銀行卡、微信和支付寶
  2. 用戶A看見商家B的衣服後,下單要買“衣服”
  3. 下單後,用戶A根據用戶B提供的銀行卡、微信和支付寶賬號進行轉賬。

具體的交互就是:

  1. 選擇銀行卡時,用戶A除了可以使用銀行APP或者銀行網站轉賬,也可以跳轉支付寶給銀行卡轉賬,如圖:
移動端中跳轉支付寶、微信

  1. 選擇支付寶時,可以保存收款二維碼,也可以直接轉賬給支付寶賬戶
移動端中跳轉支付寶、微信

  1. 選擇微信時,先保存收款二維碼,再打開微信
移動端中跳轉支付寶、微信

這裡都是在APP中通過點擊實現和支付寶和微信的交互,下面讓我們用a標籤來實現這個需求

1. 選擇支付寶,轉賬給支付寶賬戶

這個就比較簡單了:

<a
style="background: #01a6ea"
href="alipays://platformapi/startapp?appId=20000067&url=HTTPS://QR.ALIPAY.COM/XXXXXXXX"
>支付寶付款</a>

參數:

appId==20000067   // 應用ID - 默認
url=HTTPS://QR.ALIPAY.COM/XXXXXXXX    // 支付寶收款二維碼地址

當點擊a標籤時,就會跳到支付寶的轉賬頁面:

移動端中跳轉支付寶、微信

2. 選擇銀行卡,打開支付寶轉賬給銀行卡

這個就稍微難點,我嘗試了兩種方法:

第一種方式

使用下面的鏈接:

alipays://platformapi/startapp?appId=09999988&actionType=toCard&sourceId=bill&cardNo=6228480059016257871&bankAccount=xxx&money=0.01&amount=0.01&bankMark=ABC&bankName=xxx

參數:

appId=09999988   // 應用ID - 默認
actionType=toCard // 轉賬類型 toCard - 到銀行卡
sourceId=bill // ?
cardNo=6228480059016257871 // 銀行卡號
bankAccount=xxx // 銀行賬戶
money=0.01 // 轉賬金額
amount=0.01 // 轉賬額度
bankMark= ABC // 銀行代號
bankName=xxx // 銀行名稱

上面的鏈接,可以作為a標籤href的屬性值或生成二維碼:

移動端中跳轉支付寶、微信

但是呢,無論是作為a標籤的href屬性值還是生成二維碼掃描,都會被支付寶攔截:

移動端中跳轉支付寶、微信

後來發現去掉參數bankAccount就不會有警告了:

alipays://platformapi/startapp?appId=09999988&actionType=toCard&sourceId=bill&cardNo=6228480059016257871&money=0.01&amount=0.01&bankMark=ABC&bankName=xxx

生成二維碼如下:

移動端中跳轉支付寶、微信

如果直接掃描這個二維碼是沒問題的:

移動端中跳轉支付寶、微信

但是下面兩種情況還是不可行的:

  1. 作為a標籤的href屬性值
  2. 保存二維碼到相冊,通過支付寶掃一掃,從相冊選擇圖片(支付寶-相冊,在相冊中找不到這張圖片,但是從本地相冊中是可以看到這張圖片的~ _ ~)

也就是說在移動端打開支付寶轉賬到銀行卡使用下面的鏈接:

alipays://platformapi/startapp?appId=09999988&actionType=toCard&sourceId=bill&cardNo=6228480059016257871&money=0.01&amount=0.01&bankMark=ABC&bankName=xxx

就只能通過直接掃二維碼才有用,不能直接使用a標籤,而且這也不符合我們的場景。

第二種方式

第二種方式其實是受第一種方式的啟發,第一種方式是在掃描二維碼的情況下可行,那我們讓支付寶識別這個二維碼就可以啦

第二種方式分三步走:

第一步:設置二維碼內容

這一步其實就是第一種方式:

const qrcode = 'alipays://platformapi/startapp?appId=09999988&actionType=toCard&sourceId=bill&cardNo=6228480059016257871&money=0.01&amount=0.01&bankMark=ABC&bankName=xxx'

第二步:獲得二維碼地址

qrcode生成二維碼,並上傳到服務器,獲得到圖片的地址,比如:

const url = 'http://image.baidu.com/qrcode.jpg'

第三步:使用a標籤

<a
style="background: #01a6ea"
href="alipays://platformapi/startapp?saId=10000007&clientVersion=3.7.0.0718&qrcode=url"
>打開支付寶轉賬</a>

參數qrcode=url中的url就是第二步中的生成的url

結果如圖:

移動端中跳轉支付寶、微信

最後一個打開微信就簡單了

3. 打開微信

<a href="weixin://" style="background: #01d00e">打開微信</a>

4. 總結

  1. 轉給支付寶賬戶
<a
style="background: #01a6ea"
href="alipays://platformapi/startapp?appId=20000067&url=HTTPS://QR.ALIPAY.COM/XXXXXXXX"
>支付寶付款</a>
  1. 支付寶轉賬給銀行卡
  • 第一步:設置二維碼內容
const qrcode = 'alipays://platformapi/startapp?appId=09999988&actionType=toCard&sourceId=bill&cardNo=6228480059016257871&money=0.01&amount=0.01&bankMark=ABC&bankName=xxx'
  • 第二步:獲得二維碼地址

qrcode生成二維碼,並上傳到服務器,獲得到圖片的地址,比如:

const url = 'http://image.baidu.com/qrcode.jpg'
  • 第三步:使用a標籤
<a
style="background: #01a6ea"
href="alipays://platformapi/startapp?saId=10000007&clientVersion=3.7.0.0718&qrcode=url"
>打開支付寶轉賬</a>
  1. 打開微信
<a href="weixin://" style="background: #01d00e">打開微信</a>

相關文章

如何簡化網絡請求接口開發

如何讓交流代碼成文團隊文化

基於React的滾動條方案

基於React實現高度簡潔的Form表單方案