Seamless SDK （网络支付）

请按照本分步指南在您的应用程序中实施并启用 Yuno 的无缝 Web SDK 支付功能。

👍

推荐的 SDK

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

📘

我应该使用 Lite 还是 FullSeamless SDK？

使用 FullSeamless SDK 自动列出付款方式并单独显示付款按钮（如 PayPal）。LiteSeamless SDK 可让您对支付方式的显示和组织方式进行更多控制。

第 1 步：在项目中加入程序库

集成指南提供了三种灵活的方法：

1. 直接包含 HTML 脚本
2. 动态 JavaScript 注入
3. 安装 NPM 模块

选择最适合您的开发工作流程和技术要求的集成方法。完成 SDK 集成后，您可以继续执行以下步骤来实现无缝功能。

📘

TypeScript 库

如果您使用的是 TypeScript，Yuno 提供了一个库，可以访问 Yuno Web SDK 中的所有可用方法。

步骤 2：使用公钥Initialize SDK

在 JavaScript 应用程序中Initialize Yuno SDK，提供一个有效的 PUBLIC_API_KEY:

const yuno = await YunoinitializePUBLIC_API_KEY)；

📘

证书

更多信息，请参阅全权证书页面： https://docs.y.uno/reference/authentication

步骤 3：创建结账会话

📘

如果您的工作流程需要发送 additional_data 对象，它可以作为结账会话的一部分发送。

要initialize 支付流程，请创建一个新的 checkout_session 使用 创建结账会话 endpoint。

• 首先，创建一个客户或检索现有客户 ID
• 在创建 checkout_session

💳

为控制授权和卡片捕获，请包含 payment_method.detail.card.capture 在结账会话中：设置 false 仅授权， true 立即捕捉。

关键参数

📘

onPaymentMethodSelect 活动

适用于所有 APM，包括 Google Pay、Apple Pay 和 PayPal、 onPaymentMethodSelected 会在客户选择payment 方式后立即触发（在payment 流程开始前）。定义 onPaymentMethodSelected 于 startSeamlessCheckout 之前 mountSeamlessCheckout.

📘

谷歌支付和 Apple 支付显示屏

从 SDK 1.5 版开始，Google Pay 和 Apple Pay 在支付方式列表中显示为直接按钮，而不是单选按钮。它们与其他支付方式分开显示。

步骤 4：开始结账

使用以下配置，为客户提供无缝和用户友好的支付体验：

yuno.startSeamlessCheckout({
  checkoutSession: "438413b7-4921-41e4-b8f3-28a5a0141638",
  elementSelector: "#root",
  countryCode: "US",
  language: "en-US",
  showLoading: true,
  issuersFormEnable: true,
  showPaymentStatus: true,
  onLoading: (args) => console.log(args),
  renderMode: {
    type: "modal",
    elementSelector: {
      apmForm: "#form-element",
      actionForm: "#action-form-element",
    },
  },
  card: {
    type: "extends",
    styles: "",
    cardSaveEnable: false,
    texts: {},
    cardNumberPlaceholder: "Enter card number", // Optional: Custom placeholder text
    hideCardholderName: false, // Optional: Set to true to hide cardholder name field
  },
  texts: {},
  async yunoCreatePayment(oneTimeToken, tokenWithInformation) {
    await createPayment({ 
      oneTimeToken, 
      checkoutSession,
      vault_on_success: true 
    });
    yuno.continuePayment({ showPaymentStatus: true });
  },
  yunoPaymentMethodSelected(data) {
    console.log("Payment method selected:", data);
  },
  yunoPaymentResult(data) {
    console.log("Payment result:", data);
    yuno.hideLoader();
  },
  yunoError(error, data) {
    console.error("An error occurred:", error);
    yuno.hideLoader();
  },
});

使用时 startSeamlessCheckout，指定处理付款的回调。您还可以使用 texts 物件

参数

使用以下选项配置无缝结账：

📘

客户和商家发起的交易

付款可以由客户（CIT）或商家（MIT）发起。有关其特点的更多信息，请参阅 "存储凭证"。

本页的分步步骤指的是客户发起的不带重复选项的交易。通常用于一次性网上购物、店内购物、ATM 取款等。

步骤 5：安装 SDK

要根据所选支付方式显示结账流程，请使用 yuno.mountSeamlessCheckout() 功能。此步骤可确保 SDK 正确安装在所选的 HTML 元素上。

yuno.mountSeamlessCheckout({
  paymentMethodType: PAYMENT_METHOD_TYPE,
  vaultedToken: VAULTED_TOKEN,
});

请参阅支付类型页面，查看安装 SDK 时可使用的支付方式类型的完整列表。

"(《世界人权宣言》) vaultedToken 是可选项。它代表以前注册的付款方式。如果您提供 vaultedToken由于用户已在之前的交易中提供了付款信息，因此无需再次提供付款信息。

安装后，必须通过调用 yuno.startPayment().如果跳过此呼叫，则不会打开付款表。

步骤 6：启动付款流程（必填）

致电 yuno.startPayment() 紧随 yuno.mountSeamlessCheckout() 打开所选支付方式的用户界面：

yuno.mountSeamlessCheckout({
  paymentMethodType: PAYMENT_METHOD_TYPE,
  vaultedToken: VAULTED_TOKEN,
});

yuno.startPayment();

或者，也可以通过用户操作（如点击按钮）触发启动：

const payButton = document.querySelector('#button-pay');
payButton.addEventListener('click', () => {
  yuno.startPayment();
});

📘

演示应用程序

除提供的代码示例外，您还可以访问演示应用程序，了解 Yuno SDK 的完整实现。演示应用程序包含所有 Yuno SDK 的工作示例，可从GitHub 存储库中克隆。

安装外部按钮

您可以使用 mountExternalButtons 方法，在用户界面的自定义位置显示 Google Pay 和 Apple Pay 按钮。这样您就可以控制这些按钮的显示位置。

await yuno.mountExternalButtons([
  {
    paymentMethodType: 'APPLE_PAY',
    elementSelector: '#apple-pay',
  },
  {
    paymentMethodType: 'GOOGLE_PAY',
    elementSelector: '#google-pay',
  },
]);

参数

卸载按钮

您可以按付款方式类型卸载单个外部按钮：

yuno.unmountExternalButton('APPLE_PAY')；

或者一次性卸载所有外部按钮：

yuno.unmountAllExternalButtons()；

在无缝流程中注册支付方式

您可在无缝支付流程中直接设置支付方式（存储卡片以备将来使用）。 payment_method.vault_on_success = true 在 创建结账会话.

何时 vault_on_success 设置为 true:

• 若付款状态为，则付款方式将自动注册。 SUCCEEDED
• 若付款未成功，则不会发生任何存储操作
• 付款响应将包含一个 vaulted_token 可用于未来交易的

例如

{
    "account_id": "...",
    ...
    "payment_method": {
        "vault_on_success": true
    }
}

📘

跳马要求

生成和接收 vaulted_token 当 vault_on_success = true付款必须通过以下方式引用 Yuno 现有客户 customer_payer.id 在结账环节中，若在支付请求内直接创建或发送客户数据，则不会在我们系统中创建客户，因此不会触发保险库存储操作。

有关注册支付方式的更多信息，请参阅注册支付方式。

随时掌握最新动态

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