@creem io/反应

反应组件 + SDK 以嵌入 克里姆语 直接在您的应用程序中检查, 作为模式上线或内线 .

安装

npm install @creem_io/react

获取退出 URL

以您的 API 密钥创建一个退出会话服务器侧( C)检查出 API和通过返回 checkout_url 这些组件。 URL可以安全曝光;通过webhook确认完成服务器侧.

1. 声明

环绕任意可点击元素——点击打开取出复数.

import { CreemCheckout } from "@creem_io/react";

export function Pricing() {
  return (
    <CreemCheckout
      checkoutUrl="https://www.creem.io/checkout/<productId>/<checkoutId>"
      theme="light"
      onComplete={(detail) => console.log("paid!", detail)}
    >
      <button>Subscribe</button>
    </CreemCheckout>
  );
}

2. 方案

import { CreemEmbedCheckout } from "@creem_io/react";

const checkout = await CreemEmbedCheckout.create({
  checkoutUrl,
  theme: "dark",
  onComplete: (detail) => {
    // detail = { checkoutId, orderId, orderNo }
    checkout.close();
  },
});

或钩曰:

import { useCreemCheckout } from "@creem_io/react";

const openCheckout = useCreemCheckout();
openCheckout({ checkoutUrl, onComplete });

3. 内在内容

import { CreemCheckoutInline } from "@creem_io/react";

<CreemCheckoutInline
  checkoutUrl={checkoutUrl}
  onComplete={(detail) => unlock(detail.orderId)}
  style={{ width: 460, height: 820 }}
/>;

选项

所有组件接受 theme (单位:千美元)'light' | 'dark'和 locale (BCP47标签,例如:. 'pt-BR',以强制退出语言)。 他们也发出一个 ready 活动(onReady) 一旦UI的退票完成。 完成后, 如果产品有返回 URL, 页面会自动导航到那里 — handle onComplete 习惯行为.

onComplete 有效载数

{ checkoutId: string; orderId?: string; orderNo?: string; redirect?: boolean; redirectUrl?: string }

嵌入式取出成功完成时被解除. SDK只接受取出自自取出处的完成事件.