乐趣 JavaScript SDK

Fungies JavaScript SDK为Fungies在您网络应用程序中的取出提供了方便的集成.

安装

npm install @fungies/fungies-js

yarn add @fungies/fungies-js

pnpm add @fungies/fungies-js

使用量

JavaScript 初始化

import { Fungies } from "@fungies/fungies-js";

// Initialize Fungies
Fungies.Initialize({
  // Optional: Disable data attribute support
  // enableDataAttributes: false
});

// Open a checkout programmatically
Fungies.Checkout.open({
  checkoutUrl: "https://store.example.com/checkout-element/my-checkout-id",
  settings: {
    mode: "overlay", // 'overlay' | 'embed'
    frameTarget: "target-element-id", // Optional, for embed mode
  },
});

// Close the checkout
Fungies.Checkout.close();

收听退出事件

SDK 监听出账iframe中的信息,并发送 DOM 事件 document。这在您拨打电话时自动发生 Fungies.Initialize() 或使用 data-auto-init 脚本属性——不需要额外的设置.

使用这些事件在购买后运行自己的逻辑(方向,显示感谢页,刷新权限等).

import { DOM_CHECKOUT_EVENTS, Fungies } from "@fungies/fungies-js";

Fungies.Initialize();

document.addEventListener(DOM_CHECKOUT_EVENTS.COMPLETE, () => {
  // Payment succeeded — e.g. redirect to a thank-you page
  window.location.href = "/thank-you";
});

document.addEventListener(DOM_CHECKOUT_EVENTS.CLOSE, () => {
  // Checkout overlay/embed was dismissed
  console.log("Checkout closed");
});

Fungies.Checkout.open({
  checkoutUrl: "https://store.example.com/checkout-element/my-checkout-id",
  settings: { mode: "overlay" },
});

在使用 CDN 脚本标记时, 在 SDK 负载后注册听众 :

<script
  src="https://cdn.jsdelivr.net/npm/@fungies/fungies-js@CURRENT_VERSION"
  defer
  data-auto-init
></script>
<script>
  document.addEventListener("fungies:checkout:complete", () => {
    window.location.href = "/thank-you";
  });
</script>

在反应中,附加听器在 a useEffect 并清理他们上山去

import { useEffect } from "react";
import { DOM_CHECKOUT_EVENTS, Fungies } from "@fungies/fungies-js";

function App() {
  useEffect(() => {
    Fungies.Initialize();

    const onComplete = () => {
      window.location.href = "/thank-you";
    };

    document.addEventListener(DOM_CHECKOUT_EVENTS.COMPLETE, onComplete);
    return () => {
      document.removeEventListener(DOM_CHECKOUT_EVENTS.COMPLETE, onComplete);
    };
  }, []);

  return <button onClick={() => Fungies.Checkout.open({ /* ... */ })}>Buy</button>;
}

更新付款方法

让订阅者替换已过期的卡片而不离开您的页面 。 薄荷会话  服务器 与 POST /v0/subscriptions/{subscriptionIdOrNumber}/paymentMethodSession (密钥) 然后把SDK交给 sessionToken 财务报告和审定财务报表 url 从这个反应。 这个 向元素移动符号 postMessage 只有——它从未被放入URL,饼干或存储.

import { DOM_PAYMENT_METHOD_EVENTS, Fungies } from "@fungies/fungies-js";

document.addEventListener(DOM_PAYMENT_METHOD_EVENTS.UPDATED, () => {
  // The card on file changed; in overlay mode the element has already closed itself.
});
document.addEventListener(DOM_PAYMENT_METHOD_EVENTS.FAILED, () => {
  // The session can no longer be used (expired, already used, invalid). Mint a new one to retry.
});
document.addEventListener(DOM_PAYMENT_METHOD_EVENTS.CLOSE, () => {
  // The customer dismissed the overlay (X, ESC or backdrop). The session is still valid.
});

const { sessionToken, url } = await fetch("/api/payment-method-session", { method: "POST" }).then((r) => r.json());

Fungies.PaymentMethod.update({
  sessionToken,
  url,
  settings: {
    mode: "overlay", // 'overlay' | 'embed'
    frameTarget: "target-element-id", // Required with 'embed', ignored by 'overlay'
  },
});

// Close it programmatically (dispatches no event)
Fungies.PaymentMethod.close();

倒卡点火无所事事:表格保持开放,顾客可以再试一张.

您的页面从不导航: 元素完成卡片在自己的框内更改, 而 框上挂着一个 sandbox 没有 allow-top-navigation,所以没有装入里面 可以替换标签.

需要不装入 SDK 的事件名称—— 服务器侧捆绑, 或装入一个 不同的 SDK 构建 <script>从 @fungies/fungies-js/events,用于安装 没什么 window。 。 。 .

settings.mode 必须是 'overlay' 或者说 'embed'; 以控制台警告拒绝其他任何值 什么都没有打开 和失踪一样 sessionToken 无效 url最多一个 updated 编号 : failed 每个会话的起火;一个在两个会话之后再次发出信号的框架不转发.

故意没有 data-* 此流的属性变量: DOM 属性中的会话符号 可被您页面上的每个第三方脚本读取,并被会话重放工具捕获,同时 在 JavaScript 中持有的值不是。 在代码中保留符号并打电话 PaymentMethod.update()。 。 。 .

您的页面来源必须位于工作空间的授权域中, 或者浏览器拒绝设定 键。 一个被拒绝的相框从不回答握手,所以SDK在加载后取出15 s 火灾 failed 内 overlay 模式中清除将吞入点击的全视图端口框架 embed 模式中它会空出你给它的容器,而不是离开浏览器的错误页.

HTML 数据属性支持

您也可以使用 HTML 数据属性来创建不写入 JavaScript 的取出按钮 :

<!-- Basic checkout button -->
<button
  data-fungies-checkout-url="https://store.example.com/checkout-element/my-checkout-id"
  data-fungies-mode="overlay"
>
  Open Checkout
</button>

<!-- Script tag to initialize the SDK -->
<script
  src="https://cdn.jsdelivr.net/npm/@fungies/fungies-js@CURRENT_VERSION"
  defer
  data-auto-init
></script>

<!-- Embed checkout with target element -->
<div id="target-element-id"></div>

<!-- Script tag to initialize and display checkout automatically -->
<script
  src="https://cdn.jsdelivr.net/npm/@fungies/fungies-js@CURRENT_VERSION"
  defer
  data-auto-init
  data-auto-display-checkout
  data-fungies-checkout-url="https://demo.dev.fungies.net/checkout-element/a85d8c76-bc30-48a3-9861-be68952a1eca"
  data-fungies-mode="embed"
  data-fungies-frame-target="target-element-id"
></script>

手动 DOM 扫描

如果您在加载页面后动态地添加了取出元素,您可以手动触发 DOM 扫描 :

// Scan the page for new checkout elements
Fungies.ScanDOM();

数据属性参考

• data-fungies-checkout-url: (需要新格式) 检出 URL
• data-fungies-mode: (可选) 退出模式( “ 覆盖” 或 “ 覆盖” )
• data-fungies-frame-target: (可选) 嵌入式取出的目标元素ID
• data-fungies-discount-code: (可选)将适用的贴现代码
• data-fungies-customer-email: (可选)客户邮件预填(过期,使用数据fungies-billing-email)
• data-fungies-billing-email: (可选) 计费电子邮件预填
• data-fungies-billing-first-name: (可选) 记账首名预填
• data-fungies-billing-last-name: (可选) 计费姓预填
• data-fungies-billing-country: (可选) 计费国家代码(ISO 3166-1 α-2) 预填
• data-fungies-billing-state: (可选) 计费州/省预填
• data-fungies-billing-city: (可选) 计费城市预填
• data-fungies-billing-zip-code: (可选) 计费拉链/邮戳代码以预填
• data-fungies-quantity: (可选) 退出的默认数量
• data-fungies-items: (可选) JSON 系列要购买的物品
• data-fungies-custom-fields: (可选) JSON 字符串自定义字段
• data-fungies-button: (Legacy格式)包含诸如"https://STORE URL/checkout-element/:checkoutID"或"https://STORE URL/overlay/:checkoutID"的取出URL

类型脚本支持

此包包括了TypeScript定义. 您可以在支持的编辑器中利用类型检查和IntelliSense:

import { DOM_CHECKOUT_EVENTS, Fungies } from "@fungies/fungies-js";
import type { DomCheckoutEvent, InitialCheckoutOpenOptions } from "@fungies/fungies-js";

const onComplete = (event: Event) => {
  const checkoutEvent = event.type as DomCheckoutEvent;
  if (checkoutEvent === DOM_CHECKOUT_EVENTS.COMPLETE) {
    window.location.href = "/thank-you";
  }
};

document.addEventListener(DOM_CHECKOUT_EVENTS.COMPLETE, onComplete);

// TypeScript will validate all parameters
const openOptions: InitialCheckoutOpenOptions = {
  checkoutUrl: "https://store.example.com/checkout-element/my-checkout-id",
  settings: {
    mode: "overlay",
    // frameTarget is optional and only used with embed mode
    frameTarget: "container-id",
  },
};

Fungies.Checkout.open(openOptions);