Payment API Custom Parameters - Help Center

This documentation details the custom parameter configuration for the APSDAI payment API, helping you achieve a personalized payment experience. Through these parameters, you can customize payment language, payment methods, automatic coupon application, and more, and you can also query product price information through the JS API.

Quick Start

Embedding the APSDAI payment system in your website requires just two steps:

1. Include the JS Code

Add the following code before the <head> or <body> closing tag: load the script first, then initialize your merchant info.

HTML

<!-- Step 1: load the APSDAI JS -->
<script src="https://i-cdn.softscdn.com/apsdai.min.js"></script>

<!-- Step 2: initialize merchant info -->
<script>
window.APSDAI({ name: 'your_merchant_code' });  // replace with your merchant code
</script>

2. Add Payment Button

Add the data-apsdai-checkout attribute to the element that triggers payment:

HTML

<button data-apsdai-checkout="your_product_path">Buy Now</button>

Get Merchant Code

Log in to the APSDAI Merchant Dashboard, go to "Settings" → "Configuration" → "View Example" to copy your exclusive JS code.

Two Initialization Modes

APSDAI JS supports two initialization forms. They are functionally identical, so please pick one and do not mix them:

Option	Usage	Notes
Option 1: Instantiation (recommended)	Call `window.APSDAI({ ... })` after loading the script	Clearer to read, and it returns an instance you can use to call the JS API (for example, to query product prices)
Option 2: Declarative (legacy, still supported)	Declare the `window.Apsdai` config object before loading the script	The legacy form; existing integrations keep working and do not need to be changed

Option 1: Instantiation (recommended)

Call window.APSDAI() with your configuration after the script is loaded. If you need to call the JS API, save the returned instance in a variable:

HTML

<script src="https://i-cdn.softscdn.com/apsdai.min.js"></script>
<script>
// Initialization only
window.APSDAI({ name: 'your_merchant_code' });

// Save the instance when you need to call the JS API
const example = window.APSDAI({ name: 'your_merchant_code' });
</script>

Option 2: Declarative (legacy, still supported)

Declare the config object before loading the script; the script reads it automatically once loaded:

HTML

<script>
window.Apsdai = Object.assign(window.Apsdai || {}, {
    name: 'your_merchant_code'  // replace with your merchant code
});
</script>
<script src="https://i-cdn.softscdn.com/apsdai.min.js"></script>

Do not mix the two forms

When instantiating with window.APSDAI({ ... }), you must not also pass configuration through window.Apsdai. The configuration can only be passed in the instantiation parameters, otherwise it will cause a configuration conflict.

Global Configuration Parameters

The parameters below can be passed either as window.APSDAI({ ... }) instantiation parameters, or through the legacy declarative window.Apsdai object:

Parameter	Type	Required	Description
`name`	String	Yes*	China site unique merchant code (required for China site)
`hk_name`	String	Yes*	Hong Kong/International site unique merchant code (required for International site)
`host_site`	String	No	Default site, options: `cn` (China) or `hk` (Hong Kong). Default is `cn`
`language`	String	No	Interface language, options: `zh-cn` (Simplified Chinese), `zh-tw` (Traditional Chinese), `en` (English). Auto-detects browser language by default
`open_type`	String	No	Window type, options: `pay` (payment) or `cart` (shopping cart). Default is `pay`

JavaScript

<script src="https://i-cdn.softscdn.com/apsdai.min.js"></script>
<script>
window.APSDAI({
    name: "your_cn_merchant_code",      // China site merchant code
    hk_name: "your_hk_merchant_code",   // International site merchant code
    host_site: "cn",                     // Default to China site
    language: "zh-cn",                   // Default Simplified Chinese
    open_type: "pay"                     // Default to payment window
});
</script>

Ticket System Configuration

APSDAI has a built-in ticket system that displays a ticket entry point in the bottom right corner of the page for users to submit issues. Configure through the work_order object:

Parameter	Type	Description
`open`	Number	`1` Show ticket entry, `2` Hide (can be opened via API)
`theme_color`	String	Theme color, e.g., `#16B8F3`
`icon`	String	Badge icon URL
`icon_width`	String	Badge width (pixels)
`icon_height`	String	Badge height (pixels)
`icon_right`	String	Badge distance from right edge (pixels)
`icon_bottom`	String	Badge distance from bottom (pixels)
`header`	String	Ticket window header text
`title`	String	Ticket window title
`description`	String	Ticket window description
`copyright`	String	Copyright information
`collect_info`	Array	Additional information fields to collect

JavaScript

<script src="https://i-cdn.softscdn.com/apsdai.min.js"></script>
<script>
window.APSDAI({
    name: "your_merchant_code",
    work_order: {
        open: 1,                          // Show ticket entry
        theme_color: "#16B8F3",           // Theme color
        icon: "https://example.com/icon.png",
        icon_width: "55",
        icon_height: "55",
        icon_right: "40",
        icon_bottom: "40",
        header: "Customer Support",
        title: "Submit Ticket",
        description: "⚡️ We will resolve your issue ASAP!",
        copyright: "Powered by APSDAI",
        collect_info: [
            { name: "Phone" },
            { name: "Order ID" }
        ]
    }
});
</script>

Manually Open Ticket

When open is set to 2, you can call ApsdaiInstance().openTickets() to manually open the ticket window.

HTML Attribute Parameters

In addition to global configuration, you can use data-* attributes on HTML elements to configure individual payment button behavior:

Attribute	Description	Options
`data-apsdai-checkout`	Product PATH (required)	Unique product identifier path
`data-apsdai-language`	Specify payment interface language	`zh-cn` (Simplified), `zh-tw` (Traditional), `en` (English)
`data-apsdai-pay`	Specify payment method	`weChat` - WeChat Pay `pWeChat` - Service Provider WeChat Pay `alipay` - Alipay `pAlipay` - Service Provider Alipay `paypal` - PayPal `stripe` - Credit Card `shouMoneyBaUnionPay` - UnionPay QuickPass
`data-apsdai-coupon`	Auto-apply coupon code	Coupon code string
`data-apsdai-open-type`	Window type to open	`pay` (payment), `cart` (shopping cart)
`data-apsdai-site`	Specify payment site	`cn` (China site), `hk` (Hong Kong/International site)
`data-apsdai-currency`	Default currency for the payment window	`cny` (CNY), `usd` (USD), `twd` (TWD), `hkd` (HKD)

Usage Examples

HTML

<!-- Basic payment button -->
<button data-apsdai-checkout="product_path">Buy Now</button>

<!-- Specify Simplified Chinese interface -->
<button data-apsdai-checkout="product_path" data-apsdai-language="zh-cn">
    Chinese Payment
</button>

<!-- Specify Alipay payment -->
<button data-apsdai-checkout="product_path" data-apsdai-pay="alipay">
    Pay with Alipay
</button>

<!-- Auto-apply coupon code -->
<button data-apsdai-checkout="product_path" data-apsdai-coupon="SAVE20">
    Buy with Coupon
</button>

<!-- Open shopping cart -->
<button data-apsdai-checkout="product_path" data-apsdai-open-type="cart">
    Add to Cart
</button>

<!-- International site payment -->
<button data-apsdai-checkout="product_path" data-apsdai-site="hk">
    International Payment
</button>

<!-- Default USD payment -->
<h2 data-apsdai-checkout="test" data-apsdai-currency="usd">Pay in USD</h2>

Multi-Site Configuration

If you use both China site and International site, you can configure multi-site support:

HTML

<!-- Configure dual sites -->
<script src="https://i-cdn.softscdn.com/apsdai.min.js"></script>
<script>
window.APSDAI({
    name: 'cn_merchant_code',      // China site code
    hk_name: 'hk_merchant_code',   // International site code
    host_site: 'cn'                // Default to China site
});
</script>

<!-- China site payment button -->
<button data-apsdai-checkout="product" data-apsdai-site="cn">
    Domestic Payment
</button>

<!-- International site payment button -->
<button data-apsdai-checkout="product" data-apsdai-site="hk">
    International Payment
</button>

Note

When data-apsdai-site attribute is not specified, the default site specified by the host_site parameter passed at initialization will be used.

Product Price Query API

With the instance method Product.Prices(), you can retrieve the title, SKU, description, image and price information of the products in your dashboard, so you can dynamically render product cards and promotional prices on your own pages.

Method Signature

JavaScript

instance.Product.Prices(path, currency?) => Promise

Parameter	Type	Required	Description
`path`	String \| Array	Yes	The PATH value of the product in your dashboard. Pass a single string or an array of multiple PATHs
`currency`	String	No	Specify the currency. The International site supports `cny`, `usd`, `twd` and `hkd`; the China site supports `cny` only. If omitted, the currency is selected automatically

Usage Examples

JavaScript

<script src="https://i-cdn.softscdn.com/apsdai.min.js"></script>
<script>
// Note: when using the instantiation mode, do not pass configuration through window.Apsdai
const example = window.APSDAI({ name: 'your_merchant_code' });

// Example 1: automatic currency selection (PATH1 is the product PATH in your dashboard)
example.Product.Prices('PATH1')
    .then(res => { console.log(res); })
    .catch(err => { console.log(err); });

// Example 2: specify the currency
example.Product.Prices('PATH1', 'usd');

// Example 3: query multiple products at once
example.Product.Prices(['PATH1', 'PATH2', 'PATH3'], 'cny');
</script>

Response Example

JSON

{
    "code": 0,
    "data": {
        "PATH1": {
            "title": "Sample Product",
            "sku": "SKU",
            "desc": "Software description",
            "images": "url",
            "original_price": 12,
            "price": 2,
            "is_promotion": true
        },
        "PATH2": {
            "title": "Sample Product",
            "sku": "SKU",
            "desc": "Software description",
            "images": "url",
            "original_price": 12,
            "price": 2,
            "is_promotion": true
        }
    },
    "msg": ""
}

Field	Type	Description
`code`	Number	`0` means success; any other value means failure, see `msg` for the reason
`data`	Object	A collection of product information keyed by product PATH
`data[path].title`	String	Product name
`data[path].sku`	String	Product SKU
`data[path].desc`	String	Product description
`data[path].images`	String	Product image URL
`data[path].original_price`	Number	Original product price
`data[path].price`	Number	Current selling price (the promotional price during a promotion)
`data[path].is_promotion`	Boolean	Whether the product is currently on promotion
`msg`	String	Message text, an empty string on success

Best Practice

When rendering a product list, pass an array of PATHs in a single query to avoid multiple requests. Prices are maintained centrally in the dashboard, so there is no need to hard-code them on the front end.

Complete Example

Here is a complete integration example including global configuration, ticket system, and various payment buttons:

HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>My Software Store</title>
</head>
<body>
    <h1>Pro Software</h1>
    <p>Price: $</p>
    
    <!-- Payment button -->
    <button data-apsdai-checkout="pro-software">Buy Now</button>
    
    <!-- Button with coupon code -->
    <button data-apsdai-checkout="pro-software" data-apsdai-coupon="WELCOME10">
        New User Discount
    </button>

    <!-- APSDAI system configuration -->
    <script src="https://i-cdn.softscdn.com/apsdai.min.js"></script>
    <script>
    window.APSDAI({
        name: 'your_merchant_code',
        language: 'zh-cn',
        work_order: {
            open: 1,
            theme_color: "#16B8F3",
            icon_width: "55",
            icon_height: "55",
            icon_right: "40",
            icon_bottom: "40",
            header: "Support",
            title: "Need Help?",
            description: "We are here to help!"
        }
    });
    </script>
</body>
</html>

URL Parameter Method

You can also quickly specify products through URL hash parameters:

URL

# Add #apsdai-xxx to the URL (xxx is the product path value)
https://www.yoursite.com#apsdai-xxx

Back to Help Center