Skip to main content

Webview Template Feature

Background#

If you have a Mobile Web Application(H5) and want to migrate it to the Binance mini program, you have to rewrite all the code. To help developers build mini programs more quickly, we create an H5 mini program template. With this template, you can build a mini program from your own web page even without changing any code.

Quick Start#

Before getting started, you should create an application in the Mini Program Management Platform.

Then go to the application detail page, click the upload button and choose Use a template

img

Input the version, H5 Application Link, description and click submit.

img

That’s all. After being approved by the Mini Program Auditor, you can publish your application.

You may need to add the web view host to the white list if you never do that before.

img

For more details about the Mini Program Management Platform, you can refer to Management Portal document.

Calling the Mini Program API Even though your code is running on the web page, you can still call the mini program API. In order to do this, you must import the SDK file to your page first

<scriptsrc="https://public.bnbstatic.com/static/js/mp-webview-sdk/webview-v1.0.1.min.js"></script>

Note: it is recommended that developers put the SDK file on their own CDN so that they can provide users with an uniform and controlled speed experience.

<script>  // PostMessage from web page to mini-programfunction requestPayment({ payload }) { if (window.__NEZHA_BRIDGE__) {      // it's inside the mini program webviewbn.miniProgram.postMessage({ action: 'requestPayment', payload }) } else {      // do the payment for the desktop web} }
// Receive messages from mini-program.bn.onMessage = function ({data}) {  console.log(data) // { action: 'requestPayment', payload: { status: '0'} }}</script>

bn is a global object injected by the SDK. The request and response have the same format

Interface Message {  action: string  payload: any}

When sending a request, action is the API name and payload is the API argument if needed. When receiving a response, action is the API name and payload is the API response.

Because we are using postMessage, we can’t get the response immediately. So we have to listen to the API we called.

Please refer to the mini program API documentation to see which API you can use.

Example How to Integrate Binance Pay On Webview feature#

img

Integrate with Binance Pay#

Please refer to the document of Binance Pay, and integrate with your backend server to create an order.

The Create Order API will return your server with the parameter prepayId. A sample response looks like this:

{  "status": "SUCCESS",  "code": "000000",  "data": {    "prepayId": "29383937493038367292",    "terminalType": "APP",    "expireTime": 121123232223,    "qrcodeLink": "https://qrservice.dev.com/en/qr/dplkb005181944f84b84aba2430e1177012b.jpg",    "qrContent": "https://qrservice.dev.com/en/qr/dplk12121112b",    "checkoutUrl": "https://pay.binance.com/checkout/dplk12121112b",    "deeplink": "bnc://app.binance.com/payment/secpay/xxxxxx",    "universalUrl": "https://app.binance.com/payment/secpay?_dp=xxx=&linkToken=xxx"  },  "errorMessage": ""}

Calculate the payment signature for mini program#

The backend needs to calc a signature for the mini program, by the prepareId from the previous step, which follows the same rules of create a new order:

Example:

String payload = "certSn=317c110ebf7baf641e8f49ab6851331737dbe98541947c53b9dbba27f8c8414f" + "&" + "merchantId=98765987" + "&" + "noncestr=5K8264ILTKCH16CQ2502SI8ZNMTM67VS" + "&" + "prepayId=98765987" + "&"+ "timeStamp=1618302830073"; String signature = hex(hmac("sha512", payload, secretKey)).toUpperCase();

A sample code in node js will be like:

import { createHmac } from 'crypto'
export function sign(payload: string, apiKeySecret: string) {  return createHmac('sha512', apiKeySecret)    .update(payload)    .digest('hex')    .toUpperCase()}
export function signPaymentOption(option: PaymentOptions, apiKeySecret: string): PaymentOptionsWithSign {  const { certSn, merchantId, noncestr, prepayId, timeStamp } = option  const signature = sign(    certSn=${certSn}&merchantId=${merchantId}&noncestr=${noncestr}&prepayId=${prepayId}&timeStamp=${timeStamp},    apiKeySecret,  )  return { ...option, paySign: signature }}

Return everything to your mini program app

Evoke the payment process from mini program#

Call the api requestPayment({}), like

const { certSn, merchantId, timeStamp, nonceStr, paySign } = resp // from step 2
const payload = {    certSn,    merchantId,    timeStamp,    nonceStr: resp.noncestr,    package: `prepay_id=${resp.prepayId}`,    paySign: paySign,   }
function requestPayment({ payload }) {     if (window.__NEZHA_BRIDGE__) {      // it's inside the mini program webview
      bn.miniProgram.postMessage({ action: 'requestPayment', payload })    } else {      // do the payment for the desktop web    }  }
bn.onMessage = function ({data}) {    console.log(data) // { action: 'requestPayment', payload: { status:  '0'} } if(data.action === 'requestPayment') {      if(data.payload.status === ‘0’){       // success, be notice, it's a string '0'     }  }}

Notice

  • The api requestPayment needs special permission. Please check with the Binance Supporter whether your mini program appid has the permission.
  • The timeStamp to requestPayment is a string

How To Debug It on Real Devices#

  1. Create the experience qrcode

Refer to Mini Program Experience Version

  1. Scan the qrcode

  2. Get the logs on the real devices

img