Terms of Service Element

The Terms of Service element renders a customizable TOS acceptance UI, including a consent message with links to Frame's Terms of Service, Privacy Policy, and Platform Agreement, and an accept button. When the user accepts, a signed token is generated that can be used to prove acceptance.

The Terms of Service element can be created without full SDK initialization using Frame.createTermsOfService(), which skips loading Evervault, Fingerprint, and Sift for faster page loads.

Quick start

FULL EXAMPLE

<body>
  <div id="tos-element"></div>
  <script src="https://js.framepayments.com/v1/index.js"></script>
  <script>
    (async () => {
      const tos = await Frame.createTermsOfService("<PUBLISHABLE_KEY>");

      tos.on("ready", () => console.log("TOS ready"));
      tos.on("accepted", ({ token }) => console.log("Accepted:", token));
      tos.on("error", (err) => console.error(err.message));

      await tos.mount("#tos-element");
    })();
  </script>
</body>

Creating the element

There are two ways to create a Terms of Service element:

Standalone (recommended)

Use Frame.createTermsOfService() for a lightweight integration that only verifies your API key without initializing the full SDK.

STANDALONE CREATION

const tos = await Frame.createTermsOfService("<PUBLISHABLE_KEY>", {
  buttonColor: "#6C63FF",
  customActionCopy: "Agree & Continue",
});

Via createElement

If you've already initialized the SDK, you can create it through createElement.

CREATE VIA ELEMENT

const frame = await Frame.init("<PUBLISHABLE_KEY>");
const tos = await frame.createElement("termsOfService", {
  buttonColor: "#6C63FF",
});

Customization options

Parameter	Type	Description
fontFamily	`String`	Google Font family name to load and apply (e.g., `"Inter"`, `"Playfair Display"`).
fontWeight	`String \| Number`	Font weight for the component text (e.g., `500`, `"bold"`).
fontSize	`String`	Font size for the component (e.g., `"16px"`). Minimum enforced size is `10px`.
textColor	`String`	Color of the body text (e.g., `"#333333"`).
linkColor	`String`	Color of the Terms of Service and Privacy Policy links. Defaults to `#4C8788`.
backgroundColor	`String`	Background color of the component wrapper.
buttonColor	`String`	Background color of the accept button. Defaults to `#4C8788`.
customActionCopy	`String`	Custom text for the accept button. Defaults to `"I accept"`.
hideButton	`Boolean`	Hides the built-in accept button so you can trigger acceptance programmatically with `tos.accept()`. When `true`, the consent text reads "By proceeding, you agree…" instead of "By clicking {action}, you agree…".

CUSTOMIZATION EXAMPLE

const tos = await Frame.createTermsOfService("<PUBLISHABLE_KEY>", {
  fontFamily: "Poppins",
  fontWeight: 500,
  fontSize: "14px",
  textColor: "#1a1a2e",
  linkColor: "#e94560",
  backgroundColor: "#f0f0f0",
  buttonColor: "#e94560",
  customActionCopy: "I agree to the terms",
});

API Reference

tos.mount(selector)

Mounts the component to a specified DOM node. The selector can be a CSS selector string or an HTMLElement.

MOUNT TOS ELEMENT

tos.on("ready", () => { /* ... */ });
await tos.mount("#tos-element");

tos.on("ready")

Fires once the component has mounted and the TOS token has been created successfully.

TOS READY HANDLER

tos.on("ready", () => {
  console.log("Terms of Service component is ready");
});

tos.on("accepted")

Fires when the user clicks the accept button and the acceptance has been recorded successfully.

TOS ACCEPTED HANDLER

tos.on("accepted", ({ token }) => {
  console.log("User accepted TOS, token:", token);
  // Send the token to your server or proceed with the flow
});

payload

	Type	Description
token	`String`	The TOS acceptance token that can be used to verify the user accepted the terms.

tos.on("error")

Fires if the component fails to create a token or if acceptance fails.

TOS ERROR HANDLER

tos.on("error", (err) => {
  console.error("TOS error:", err.message);
});

tos.accept()

Programmatically triggers TOS acceptance. Use this when hideButton is true and you want to control when acceptance happens, such as on form submission.

PROGRAMMATIC ACCEPT

const tos = await Frame.createTermsOfService("<PUBLISHABLE_KEY>", {
  hideButton: true,
});

tos.on("accepted", ({ token }) => {
  console.log("Accepted:", token);
});

await tos.mount("#tos-element");

document.getElementById("my-form").addEventListener("submit", (e) => {
  e.preventDefault();
  tos.accept();
});

tos.unmount()

Removes the component from the DOM and clears the TOS token.

UNMOUNT TOS ELEMENT

tos.unmount();