Hyperwidget 集成指南

商户在统一仪表盘注册后，将获得其 API 密钥，并可以在结账页面上启用所需的 APM 与 PSP 组合。

Hyperswitch 提供了代码转换器，商户可以借助该工具在现有 PSP 或中间层集成的基础上，以最小改动调用 Hyperswitch 服务器。Hyperwidget 作为主要 APM 的统一封装器，简化了跨多个 PSP 扩展或缩减 APM 的流程。

✅ 统一仪表盘还提供了以下功能：

• 按 PSP 启用或禁用 APM
• 数据分析
• 运营管理
• 退款和拒付处理
• 对账功能

🌍 支持的 APM 功能：

✅ 注： 标注为 仅 SDK 流程 的地址功能仅在使用 SDK 集成时可用。

🚀 Hyperwidget 集成步骤

要在结账页面上启用您选择的 APM，请按照以下步骤操作：

1️⃣ 安装 Hyperwidgets SDK

参考官方文档进行安装：

👉 安装 Hyperwidgets SDK

2️⃣ 根据需求自定义集成

您可以根据商户需求选择集成 JS 或 React：

👉 JS 和 React 集成指南

⚙️ React 集成示例

✅ 第一步：安装依赖

npm install @juspay-tech/hyper-js
npm install @juspay-tech/react-hyper-js

✅ 第二步：实现集成逻辑

引入必要的包，并加载 Hyperwidget：

import React, { useState, useEffect } from "react";
import { loadHyper } from "@juspay-tech/hyper-js";
import { hyperElements } from "@juspay-tech/react-hyper-js";
const hyperPromise = loadHyper("YOUR_PUBLISHABLE_KEY", {
   customBackendUrl: "YOUR_BACKEND_URL",
   // 将该 URL 配置为 API 调用的端点，例如 session、支付和确认调用
});
useEffect(() => {
  // 页面加载时创建 PaymentIntent
  fetch("/create-payment", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ items: [{ id: "xl-tshirt" }], country: "US" }),
  })
    .then((res) => res.json())
    .then((data) => setClientSecret(data.clientSecret));
}, []);
<div className="App">
 {clientSecret && (
   <HyperElements options={options} hyper={hyperPromise}>
     <CheckoutForm />
   </HyperElements>
 )}
</div>

✅ 上述代码中：

• loadHyper()：加载 Hyperwidget 并指定 API 密钥和后端 URL
• useEffect()：在页面加载时调用后端接口创建支付意图（PaymentIntent）
• HyperElements：使用 clientSecret 将结账组件包裹在 HyperElements 中

✅ 第三步：添加到 PaymentElement

在结账组件中添加 UnifiedCheckout：

var unifiedCheckoutOptions = {
  wallets: {
    walletReturnUrl: "https://example.com/complete",
    // 必填参数，用于钱包支付方式（如 Google Pay、PayPal 和 Apple Pay）
  },
};
<UnifiedCheckout id="unified-checkout" options={unifiedCheckoutOptions} />

✅ 配置说明：

• walletReturnUrl：支付完成后的返回 URL
• 将 UnifiedCheckout 挂载在组件上即可完成集成

🔥 完成！

您现在已成功将 Hyperwidget 集成到您的 React 项目中，并能够在结账页面上启用多种替代支付方式（APM）。

✅ 如果您有其他定制需求或高级配置，可以参考官方文档或联系我们进行支持。