如何在WooCommerce WordPress网站结账环节配置JS SDK支付API

前置准备 #

先整理好商户门户获取的所有信息并妥善保存：

• 商户ID：LC13106
• API密钥
• 商户密钥
• 确认端点
• 常规端点
• 私钥文件（本地留存，后续上传到服务器指定目录）
• 服务器公钥文件（本地留存，后续上传到服务器指定目录）
• 公钥文件（本地留存，后续上传到服务器指定目录）
• 已安装官方WordPress插件

第一步：安装代码管理插件（避免手动修改主题文件） #

在WordPress后台插件市场搜索并安装「Code Snippets」插件，启用后进入插件管理页面，通过该插件添加配置代码，无需修改主题核心文件。

第二步：配置基础密钥与端点 #

1. 在Code Snippets中新建PHP代码片段，命名为「DirectPay IPG 基础配置」
2. 粘贴以下代码，将占位内容替换为你从商户门户获取的真实信息：

// DirectPay IPG 全局基础配置
define('DIRECTPAY_MERCHANT_ID', 'LC13106');
define('DIRECTPAY_API_KEY', '你的API密钥');
define('DIRECTPAY_MERCHANT_KEY', '你的商户密钥');
define('DIRECTPAY_ENDPOINT', '你的常规端点');
define('DIRECTPAY_CONFIRM_ENDPOINT', '你的确认端点');

// 密钥文件存储路径：先在服务器wp-content/uploads/目录下手动创建secure文件夹，设置权限为600
define('DIRECTPAY_PRIVATE_KEY_PATH', WP_CONTENT_DIR . '/uploads/secure/你的私钥文件名.pem');
define('DIRECTPAY_SERVER_PUB_KEY_PATH', WP_CONTENT_DIR . '/uploads/secure/服务器公钥文件名.pem');
define('DIRECTPAY_PUB_KEY_PATH', WP_CONTENT_DIR . '/uploads/secure/你的公钥文件名.pem');

3. 点击「保存并激活」该代码片段，随后将本地留存的三个密钥文件上传到服务器的wp-content/uploads/secure/目录中。

第三步：实现支付链接功能 #

1. 在Code Snippets中新建HTML代码片段，命名为「DirectPay IPG 支付按钮加载」
2. 粘贴以下代码：

<!-- 加载DirectPay IPG JS SDK -->
<script src="https://unpkg.com/directpay-ipg-js@latest/dist/directpay-ipg.min.js"></script>

<!-- 支付按钮：可复制此代码到产品页、结账页等需要的位置（用页面编辑器的自定义HTML块插入） -->
<button id="directpay-pay-btn">使用DirectPay支付</button>

<script>
// 初始化SDK实例
const directpay = new DirectPayIPG({
  merchantId: 'LC13106',
  apiKey: '你的API密钥',
  endpoint: '你的常规端点',
  confirmEndpoint: '你的确认端点'
});

// 绑定支付按钮点击事件
document.getElementById('directpay-pay-btn').addEventListener('click', async () => {
  try {
    // 替换为实际订单信息，可结合WordPress订单动态获取
    const paymentParams = {
      amount: '100.00', // 订单金额（示例值）
      orderId: 'WP-' + Date.now(), // 自动生成唯一订单号，也可使用WordPress订单ID
      currency: 'USD' // 结算货币（根据你的商户配置修改）
    };
    // 生成支付链接并跳转
    const paymentResult = await directpay.createPaymentLink(paymentParams);
    window.location.href = paymentResult.paymentUrl;
  } catch (err) {
    alert('支付初始化失败：' + err.message);
  }
});
</script>

3. 点击「保存并激活」，之后将代码中的<button id="directpay-pay-btn">使用DirectPay支付</button>复制到需要展示支付按钮的页面，通过编辑器的「自定义HTML」块插入即可。

第四步：配置用户卡片管理功能（可选） #

若需为登录用户提供支付卡片管理功能，按以下操作：

1. 在Code Snippets中新建HTML代码片段，命名为「DirectPay IPG 卡片管理加载」
2. 粘贴以下代码：

<script src="https://unpkg.com/directpay-ipg-js@latest/dist/directpay-ipg.min.js"></script>

<!-- 卡片管理容器：可复制此代码到用户中心页面（用自定义HTML块插入） -->
<div id="directpay-card-manager"></div>

<script>
const directpay = new DirectPayIPG({
  merchantId: 'LC13106',
  apiKey: '你的API密钥',
  endpoint: '你的常规端点'
});

// 加载卡片管理界面
directpay.loadCardManager({
  containerId: 'directpay-card-manager',
  userId: '<?php echo get_current_user_id(); ?>' // 自动获取当前登录用户ID
});
</script>

3. 点击「保存并激活」，将代码中的<div id="directpay-card-manager"></div>插入到用户中心页面的合适位置即可。

第五步：验证配置有效性 #

1. 测试支付流程：访问插入支付按钮的页面，点击按钮检查是否能正常跳转到DirectPay支付页面
2. 测试卡片管理：登录用户账号，查看用户中心的卡片管理区域是否正常加载
3. 若出现错误，优先检查：
   • 代码中的密钥、端点信息是否与商户门户一致
   • 服务器上密钥文件的路径是否正确，文件权限是否为600
   • 订单金额、货币是否符合商户配置要求

内容的提问来源于stack exchange，提问作者NW.