指南
状态页面Dashboard预约演示
开始键入搜索...

Full SDK （网络）


👍

推荐的 SDK

我们建议使用WebSeamless SDK，以获得流畅的集成体验。该选项提供了灵活的支付解决方案，预置了用户界面组件和自定义选项。

欢迎阅读 YunoFull Web SDK 指南。本指南将帮助您开始使用 Yuno 支付解决方案。无论您是要实施首个支付集成，还是要增强现有设置，本指南都将为您提供所需的全部信息，以便为您的用户创建无缝的支付体验。

📘

最新版本文档

本指南涵盖我们最新版本的Full Web SDK。若需了解旧版本信息，请查阅相关链接或访问变更日志。

选择集成方法

让我们帮助您选择最适合您需求的集成方法。每种方法都有特定的优势，选择正确的方法取决于您的开发环境、技术要求和偏好。

  • 方法 1 (HTML):在 HTML 文件中添加一个脚本标签。这是最简单的方法，适用于基本实现和快速原型
  • 方法 2（动态 JavaScript）:通过自定义错误处理和加载状态，以编程方式加载 SDK。最适合需要对集成进行更多控制的应用程序
  • 方法 3（国家预防机制）:在现代 JavaScript 应用程序中使用我们的 NPM 软件包。这是我们推荐的方法，具有依赖管理、树状结构和 TypeScript 支持功能

1.在 HTML 中直接添加 SDK 脚本

集成 Yuno SDK 的最简单方法是添加一个 <script> 标签到 HTML 文件中。这种方法既能快速实现，又能保持适当的异步加载。SDK 公开了一个事件，在完全加载时发出通知，确保您能在正确的时间安全地initialize 并使用其功能。

📘

重要

虽然 defer 属性确保脚本在 HTML 解析后执行，但并不保证 SDK 脚本总是最后加载。在某些情况下，如果 SDK 的加载速度比预期的快，而事件监听器是在加载之后声明的，则 yuno-sdk-ready 事件可能已经触发，而您的监听器不会捕捉到它。为避免出现这种情况，请在加载 SDK 脚本之前定义监听器。

首先，设置事件监听器，然后加载 SDK：

<script>
  window.addEventListener('yuno-sdk-ready', () => {
    console.log('SDK loaded');
    const yuno = await Yuno.initialize(PUBLIC_API_KEY);
  });
</script>

<script defer src="https://sdk-web.y.uno/v1.5/main.js"></script>

2.使用 JavaScript 动态注入 SDK

动态 JavaScript 注入方法增强了对 SDK 加载和初始化的控制。通过这种方法，您可以

  • 在需要时以编程方式加载 SDK
  • 实施自定义加载状态和错误处理
  • 精确控制 SDK 的可用时间
  • 将 SDK 初始化与应用程序逻辑同步
  • 为您的使用案例量身定制错误处理方法

当您需要对 SDK 的加载过程进行细粒度控制，并希望精确处理各种情况时，这种方法非常理想。

创建一个动态注入 SDK 的函数：

export const injectScript = async (): Promise<boolean> => {
  const head = document.getElementsByTagName('head')[0];
  const js = document.createElement('script');
  js.src = "https://sdk-web.y.uno/v1.5/main.js";
  js.defer = true;

  return new Promise((resolve, reject) => {
    window.addEventListener('yuno-sdk-ready', () => {
      resolve(true);
    });

    js.onerror = (error) => {
      const event = new CustomEvent('yuno-sdk-error', { detail: error });
      window.dispatchEvent(event);
      reject(new Error(`Failed to load script: ${js.src} - ${error.message}`));
    };

    head.appendChild(js);
  });
};

使用该函数注入 SDK：

await injectScript()；
const yuno = await YunoinitializePUBLIC_API_KEY)；

3.使用 NPM 模块

对于使用 NPM 软件包管理的项目，您可以通过 NPM 将 SDK 作为模块安装。这种方法提供了更好的依赖关系管理、版本控制以及与现代 JavaScript 构建工具和框架的无缝集成。这对使用 webpack、Rollup 或 Vite 等捆绑程序的应用程序尤其有利。

npm install @yuno-payments/sdk-web

然后，按如下步骤加载并initialize SDK：

import { loadScript } from '@yuno-payments/sdk-web';

const yuno = await loadScript();
const yuno = await Yuno.initialize(PUBLIC_API_KEY);

使用以下方法提高性能 preconnect

为优化性能和减少延迟，我们建议添加 preconnect 尽早在 <head> 标记。这些链接允许浏览器在实际请求资源之前快速连接到我们的服务器。这种积极主动的方法可以大大缩短加载时间，尤其是在初始 SDK 设置和后续 API 调用时。

<link rel="preconnect" href="https://sdk-web.y.uno" />
<link rel="preconnect" href="https://api.y.uno" />
<link rel="preconnect" href="https://sdk-web-card.prod.y.uno" />

Full SDK 实施

使用上述方法之一集成 SDK 后，请按照以下步骤实现完整的结账功能：

Full SDK 实施

保持更新

请访问更新日志，了解最新的 SDK 更新和版本历史。

19 天前已更新