Scenario-oriented payment options is a solution that allows you to support both local acquiring type and cross-border acquiring type in a mini program. You can apply either of the two acquiring types in a specific payment scenario, allowing end users to make payments with either local payment methods or Alipay+ (cross-border) payment methods. The payment scenario is defined in the following two aspects:

• When your mini program is released to multiple super apps, the payment scenario is a specific super app, such as TNG eWallet. For example, you can apply local acquiring type when your mini program is released to TNG eWallet, and apply cross-border acquiring type when the same mini program is released to GCash.
• When your mini program runs within a specific super app, the payment scenario is a concrete situation, such as the way the end user visits your mini program. For example, when your mini program runs within TNG eWallet, you can apply local acquiring type when the end user visits your mini program by searching, and apply cross-border acquiring type when the end user visits your mini program by scanning a QR code.

This solution can be implemented in mini programs released to the following super apps: AlipayCN, TNG eWallet, TrueMoney Wallet, GCash, and DANA. For a detailed super app list, contact Alipay MiniProgram Service technical support at this email: overseas_support@service.alibaba.com.

To implement this solution, you need to introduce a new request parameter called flowType in the my.tradePay JSAPI. This topic guides you on how to specify the flowType parameter in the my.tradePay JSAPI.

Before you start

Before you learn more about the flowType parameter, ensure that you are familiar with how to start a payment transaction with the my.tradePay JSAPI. For more information, see my.tradePay.

Procedures

To implement scenario-oriented payment options, you need to complete the following two steps:

• Step 1: Import the bridge.js file
• Step 2: Call the my.tradePay JSAPI

Step 1: Import the bridge.js file

To call the my.tradePay JSAPI with the flowType parameter, update the API bridge by importing the same or higher version of bridge.js file 2.10.0 via the following two methods:

• Method 1: Via the HTML <script> element
• Method 2: Via the JavaScript import statement

For different mini program types, different methods can be used. Refer to the following table to choose a method:

Method 1: Via the HTML <script> element

You can import the bridge.js file via the HTML <script> element using the following sample code:

<script src="https://cdn.marmot-cloud.com/npm/hylid-bridge/2.10.0/index.js"></script>

Method 2: Via the JavaScript import statement

You can also import the bridge.js file via the JavaScript import statement using the following code:

import my from 'hylid-bridge';

Step 2: Call the my.tradePay JSAPI

After importing the bridge.js file, you need to call the my.tradePay JSAPI and specify the flowType parameter in the JSAPI to start a payment transaction. Refer to the following section to learn about how the my.tradePay JSAPI with the flowType parameter works.

Processing logic

When calling the my.tradePay JSAPI with the flowType parameter, you need to specify the following request parameters properly:

How to specify tradeNO, orderStr, and paymentUrl

When your mini program is released to multiple super apps, or the flowType parameter is specified with different values, different parameters are used to call the my.tradePay JSAPI. See the following table to choose a parameter that suits your needs:

Sample

The following sample shows how to call the my.tradePay JSAPI with the flowType parameter specified:

my.tradePay({

  paymentUrl: 'https://www.alipay.com',

  flowType: 'a+',

  success: function (res) {

    my.alert({

        content: JSON.stringify(res),

    });

  },

  fail: function (res) {

    my.alert({

        content: JSON.stringify(res),

    });

  }

});