Antom, leading provider of tailored payment solutionsAntom, leading provider of tailored payment solutions

澳門錢包小程序

主頁

https://alipaymo-miniprogram.alipay.com/

1. 注冊

https://miniprogram.alipay.com/register

2. 登錄

https://miniprogram.alipay.com/login

3. 加入workspaces

https://miniprogram.alipay.com/gotoconsole

image

*** Workspace inteneded to join選alipaymo

image

4. 建立小程序

選擇workspace

image

5. 配置

測試商戶:MerchantID: 2182400000001037,ClientID: 5C5XSR3USG0CQJ05

image

授權

所有支付寶開放平台的用戶信息的讀寫均需要經過用戶的許可才允許開發者使用,用戶授權基於國際標準的 OAuth2.0 授權機制,基於此機制開發者可以獲取支付寶用戶信息。

業務流程

小程序授權的使用流程如下:

  1. 向用戶彈出授權咨詢
  2. 用戶同意授權,繼續;
  3. 用戶拒絕授權,異常處理

技術實現

image

1. getAuthCode

copy
my.getAuthCode({
  scopes: ['auth_base'], // 靜默授權:auth_base,手機號:auth_user_info_contact
  
  success: (res) => {
    if (res.authCode) { // 认证成功
      
      // 调用自己的服务端接口,让服务端进行后端的授权认证,并且利用session,需要解决跨域问题
      my.request({
        url: 'https://isv.com/auth', // 该url是您自己的服务地址,实现的功能是服务端拿到authcode去开放平台进行token验证
        data: {
          authcode: res.authCode,
        },
        success: () => {
          // 授权成功并且服务器端登录成功
        },
        fail: () => {
          // 根据自己的业务场景来进行错误处理
        },
      });
    }
  },
});

2. 獲取用戶UID

3. 獲取用戶手機號

支付

業務流程

小程序支付的使用流程如下:

  1. 用戶在小程序中選擇商品下單並確認購買,進入支付環節,用戶點擊確認支付;
  2. 進入到支付寶頁面後,小程序喚起支付寶支付,出現支付界面;
  3. 用戶確認收款方和金額,點擊 立即付款 後進行支付;
  4. 輸入正確支付密碼後,顯示支付成功頁;

image

點擊支付成功頁右上角 完成 按鈕,可跳轉到自定義頁面,開發者可根據付款結果個性化展示訂單處理結果,如下圖所示。

image

技術實現

image

1. 檢查版本,<10.2.3,提示用戶升級(可選,目前超過9成用戶在10.2.3以上)

2. 調用預下單:

3. 調用tradePay

copy
my.tradePay({
  // 調用預下單接口(alipay.intl.acquiring.offline.preCreate),獲取orderQrCode參數
  orderStr: 'https://qr.alipaymo.com/281003040099hsC15AZBA0chmc48uUA31LFE',
  success: (res) => {
    my.alert({
    content: JSON.stringify(res),
  });
  },
  fail: (res) => {
    my.alert({
    content: JSON.stringify(res),
  });
  }
});

發送請求到服務端

小程序可使用my.request發請求到服務端 https://opendocs.alipay.com/mini/api/owycmh

copy
// dataType 为 json 示例
my.request({
  url: 'https://httpbin.org/post',
  method: 'POST',
  data: {
    from: '支付宝',
    production: 'AlipayJSAPI',
  },
  headers:{
    'content-type':'application/json'  //默认值
  },
  dataType: 'json',
  success: function(res) {
    my.alert({content: 'success'});
  },
  fail: function(res) {
    my.alert({content: 'fail'});
  },
  complete: function(res) {
    my.hideLoading();
    my.alert({content: 'complete'});
  }
});

// dataType 为 base64 示例
my.request({
  url: 'https://gw.alipayobjects.com/mdn/miniapp_de/afts/img/A*G1kWSJbe2zEAAAAAAAAAAABjARQnAQ',
  method: 'GET',
  dataType: 'base64',
  success: (resp) => {
    console.log('resp data length', resp.data.length);
    console.log('resp data', resp.data); // 返回格式类似于:data:image/png;base64,iVBORw0KG...
  },
  fail: (err) => {
    console.log('error', err);
  },
});

版本檢查及升級

1. 獲取版本

https://opendocs.alipay.com/mini/api/system-info

copy
my.getSystemInfo({
  success: (res) => {
    this.setData({
      systemInfo: res
    })
  }
})