Web/WAP integration guide

The following sections introduce how to integrate the Alipay+ ACQP Web/WAP SDK in your project.

1. Requirements

The following requirements must be met:

Use iOS version 8 or higher
Use Android version 4.2 or higher
Use Internet Explorer 11 or higher

2. Getting started

Step 1. Add SDK to your project

Choose one of the following methods to add the SDK to your project.

Install the SDK npm package (recommended).

copy

npm install --save alipayplus-sdk-acqp-web

Embed the SDK script into your HTML file.

copy

<!doctype html>
<html>
  <head>
      <script src="https://g.alipayplus.com/sdk/acqp/v1/index.js"></script>
  </head> 
<html>

Step 2. Set up the SDK

If you install the npm package, call the loadAlipayPlus API to set up the SDK as follows:

copy

import { loadAlipayPlus } from 'alipayplus-sdk-acqp-web';

loadAlipayPlus().then((AlipayPlus) => {
  const config = {
    acquirerId: 'acquirerId', // acquirer ID
    merchantId: 'merchantId', // merchant ID
    envType: 'SANDBOX', // Change to 'PROD' for the online.
    language: 'en_US',
  };
  const alipayPlus = AlipayPlus.create(config);
}, (error) => {
    // handle error
});

If you embed the SDK script, configure the following parameters to set up the SDK:

copy

const config = {
  acquirerId: 'acquirerId', // acquirer ID
  merchantId: 'merchantId', // merchant ID
  envType: 'SANDBOX', // Change to 'PROD' for the online.
  language: 'en_US',
};

const alipayPlus = AlipayPlus.create(config);

3. Using SDK APIs (ACQP App -> ACQP SDK)

3.1 inquirePaymentOption

Note: This API is used only in the Cashier Payment scenario.

The inquirePaymentOption API is used to inquire whether the Alipay+ payment method is available and if so, related data about the Alipay+ payment method, such as the Alipay+ logo, brand name, and promotion information.

You can directly render the payment method page based on the data about the Alipay+ payment method. Alternatively, you can process the data about the Alipay+ payment method and append the processing result to the data about your existing payment methods, and then render the payment method page accordingly.

Note the following things:

If the value of the enabled parameter is false in the response, you can check the disableReason parameter to understand the reason for failure. Generally, you do not need to display the reason to the user.
If the value of the enabled parameter is true in the response, the SDK returns the logo based on the following rules:

If no aggregated logo is preconfigured, the SDK returns the default Alipay+ logo.
If aggregated logos are preconfigured, the SDK returns one or more aggregated logos based on the currency. If no aggregated logo matches the currency, the default aggregated logo is returned. You can use the logoPattern parameter to specify the logo that you want to use.

The array of the promotion information currently contains only one element. The priority of the language that is used to display the promotion information is as follows: the language that you specified in the AlipayPlus.create(config) method > the language set on the device > English.

For more information about this API, see inquirePaymentOption.

3.2 inquireAuthorizationOption

Note: This API is used only in the Auto Debit scenario.

The inquireAuthorizationOption API is used to inquire whether the Alipay+ payment method is available and if so, related data about the Alipay+ payment method, such as the Alipay+ logo, brand name, and promotion information.

You can directly render the payment method page or add payment method page based on the data about the Alipay+ payment method. Alternatively, you can process the data about the Alipay+ payment method and append the processing result to the data about your existing payment methods, and then render the payment method page or add payment method accordingly.

Note the following things:

If the value of the enabled parameter is false in the response, you can check the disableReason parameter to understand the reason for failure. Generally, you do not need to display the reason to the user.
If the value of the enabled parameter is true in the response, the SDK returns the logo based on the following rules:

If no aggregated logo is preconfigured, the SDK returns the default Alipay+ logo.
If aggregated logos are preconfigured, the SDK returns one or more aggregated logos based on the currency. If no aggregated logo matches the currency, the default aggregated logo is returned. You can use the logoPattern parameter to specify the logo that you want to use.

The array of the promotion information currently contains only one element. The priority of the language that is used to display the promotion information is as follows: the language that you specified in the AlipayPlus.create(config) method > the language set on the device > English.

For more information about this API, see inquireAuthorizationOption.