@keeganrelume / partner-embed
为remume合作伙伴提供的前端SDK。一个调用将重新构建器放在您的
页面;一些事件处理程序将其绑定到您的钱包。你永远不要碰那个框架
或者 postMessage.
临时包名。 这篇文章发表于
@keeganrelume/partner-embed直到@relume恢复NPM作用域，然后作为@relume/partner-embed. API不会改变；只有导入路径才会。
的浏览器端
重新启动合作伙伴协议v1 (部分4
和11)。搭配 @keeganrelume/partner-node 在你的后台，
它挂载这个SDK调用的会话路由。
安装
npm install @keeganrelume/partner-embed
import { Relume } from '@keeganrelume/partner-embed';
或者使用script标记，它定义 window.Relume：
<script src="https://cdn.jsdelivr.net/npm/@keeganrelume/[email protected]"></script>
没有运行时依赖项。缩小了大约6 KB。
快速入门
const relume = Relume.init('#relume', 'pk_live_…');
relume.onTopUp(async ({ required, balance }) => {
await openCheckout(required - (balance ?? 0)); // your checkout
relume.refreshCredits(); // the builder re-reads the balance
});
relume.onCreditsChanged(({ balance }) => setHeaderBalance(balance));
relume.onExport(({ siteId, downloadUrl }) => toast('Your site is ready'));
relume.onClose(() => router.back());
relume.onError(({ code, message }) => report(code, message));
建造者填充 #relume，所以给它一个大小(例如
height: calc(100vh - 64px)）. 在640px以下，它覆盖了整个视口
相反;通过 fullScreenOnMobile: false 把它放在容器里。你的
Page需要一个 <meta name="viewport" content="width=device-width"> 为手机
报告它们的实际宽度。
examples/index.html 是一个完整的合作伙伴页面。
它为你做了什么
- 上创建iframe
https://embed.relume.ai/?pk=…然后给它大小。 - 调用会话路由(
GET /relume/session，由@keeganrelume/partner-node)，当建造者问：什么时候开门，之前 会话过期，并在401之后。构建器无需重新加载即可更新。 - 仅从嵌入源上的构建器自己的窗口接受消息，并且 只发往那个原点。来自其他脚本或框架的消息将被忽略。
- 与构建器同意协议版本，因此任何一方都可以更改其 信息不破坏对方。
- 根据可发布键的允许起源检查页面的起源。这个
浏览器拒绝任何其他来源的帧，而帧不能说为什么，
SDK启动了
onError({ code: 'origin_not_allowed' })然后移除它。
Relume.init(target, publishableKey, options?)
target 是一个选择器或元素。抛出一个 TypeError 如果匹配
什么都没有，或者钥匙不是 pk_test_…/pk_live_… 关键。
| 选项 | 默认的 | 它是做什么的 |
|---|---|---|
sessionUrl | /relume/session 在你的页面上 | 会话路由。在另一个原点上，它是用凭据获取的，所以它的CORS必须完全允许您的页面的原点（永远不会） *）。 |
fullScreenOnMobile | true | 覆盖640像素以下的视口。 |
embedUrl | https://embed.relume.ai | 建造者的主人。remume为您提供分期(https://embed-staging.relume.ai）。 |
apiUrl | 推断出从 embedUrl | reume的API，用于允许的起源检查。以Relume的主机而闻名；如果没有，则跳过检查，并应用构建器自己的检查。 |
事件
每一个 on… 方法添加侦听器并返回删除侦听器的函数。
| 事件 | 有效载荷 | 当 |
|---|---|---|
onTopUp | { required, balance } | 一项指控被拒绝。 required 是行动的代价在你的信用。 |
onCreditsChanged | { balance } | 建造者表现出的平衡改变了。当你的钱包没接电话时，你不会被解雇。 |
onExport | { siteId, exportId, downloadUrl } | 导出准备好了。 |
onClose | 无 | 用户关闭了构建器。 |
onError | { code, message } | 建筑工人无法开工，也无法继续施工。当没有人监听时登录到控制台。 |
错误代码: session_failed， user_deactivated， user_suspended，
partner_suspended， origin_not_allowed， test_cap_reached 和
charge_failed （协议第11节）。
可能会增加新的代码；像对待一个不认识的人 session_failed.
抛出的处理程序将被记录下来，并且不会阻止其他处理程序。
方法
open({ site })打开用户的一个站点(asiteId来自合作伙伴 API或onExport）. 构建器在该站点上重新加载。refreshCredits()让建筑商从你的钱包里重新读取余额 （credits.get)，然后开火onCreditsChanged如果它改变了。以后再叫它。 充值。destroy()删除iframe和每个侦听器，并停止任何挂起 会话请求。实例之后什么都不做；呼叫Relume.init再次向建造者展示。
发展中
npm ci
npm run typecheck
npm test # unit tests (happy-dom) and the example's size
npm run test:dist # builds, then loads the ESM and script-tag output
这个 postMessage 信息存在于 src/protocol.ts 和
镜子 frontend/base/embed/embed_protocol.ts 在remume应用程序中，更改两者
在一起。
出版: npm publish --tag latest 从这个文件夹(它运行所有的
上面第一个)。