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.

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:

HTML

<!-- Configure Merchant Info -->
<script>
window.Apsdai = Object.assign(window.Apsdai || {}, { 
    name: 'your_merchant_code'  // Replace with your unique merchant code
});
</script>

<!-- Include APSDAI JS -->
<script src="https://i-cdn.softscdn.com/apsdai.min.js"></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.

Global Configuration Parameters

Configure global parameters through the 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>
window.Apsdai = Object.assign(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>
window.Apsdai = Object.assign(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)

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>

Multi-Site Configuration

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

HTML

<!-- Configure dual sites -->
<script>
window.Apsdai = Object.assign(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>
<script src="https://i-cdn.softscdn.com/apsdai.min.js"></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 configured in window.Apsdai.host_site will be used.

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: $99</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>
    window.Apsdai = Object.assign(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>
    <script src="https://i-cdn.softscdn.com/apsdai.min.js"></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