Embedded components

ArcenEmbed is a single React component that gives your customers a complete self-serve billing experience. Configure it in the dashboard, render it anywhere in your app.

What ArcenEmbed provides

View	What it does
Checkout	Plan selection, payment flow, and subscription activation.
Portal	Active subscription details, plan info, usage meters, and billing history.
Payment	Handle payment confirmation and token approval.
Unsubscribe	Self-serve cancellation flow with confirmation.
Success	Post-payment confirmation with next steps.

Rendering ArcenEmbed

import { ArcenEmbed } from "@arcenpay/react";

function BillingPage() {
  return (
    <ArcenEmbed
      mode="modal"
      initialView="portal"
    />
  );
}

Props

Prop	Type	Default	Description
`mode`	`"modal"` \	`"inline"`	`"modal"`	Render as a modal overlay or inline block.
`initialView`	View key	`"portal"`	Starting view: `"portal"`, `"checkout"`, `"payment"`, `"unsubscribe"`, `"success"`.
`accessToken`	string	—	Server-minted JWT for server-controlled sessions.
`componentId`	string	Provider default	Override the billing component ID.
`onViewChange`	`(view) => void`	—	Called whenever the embed switches views.
`onPlanChange`	`(planId) => void`	—	Called when the customer selects a different plan.
`hideBranding`	boolean	`false`	Hides the “Secured by ArcenPay” footer for white-label embeds.
`className`	string	—	Additional CSS classes.

Component configuration

Before rendering ArcenEmbed, create and publish a component in the dashboard under Components:

Give it a name (e.g., “Billing Center”).
Choose which views to include (checkout, portal, plans, etc.).
Publish the component.

The component’s ID (cmp_...) is used by ArcenPayProvider or passed directly to ArcenEmbed.

Server-issued tokens

For tighter security, mint an access token on your backend and pass it to ArcenEmbed:

import { ArcenClient } from "@arcenpay/node";

const client = new ArcenClient({
  apiKey: process.env.ARCENPAY_API_KEY!,
});

const session = await client.identify({
  company: { id: "company_123", wallet: "0xabc..." },
  user: { id: "user_123", wallet: "0xabc..." },
  expiresIn: 3600,
});

<ArcenEmbed
  accessToken={session.token}
  componentId="cmp_123"
  mode="modal"
/>

Custom components

Create fully custom billing surfaces via the Components API. Define a component with custom rendering behavior:

POST /api/v1/components

{
  "name": "Custom pricing page",
  "kind": "PLANS_TABLE",
  "config": {
    "showPrices": true,
    "showFeatures": true,
    "ctaText": "Upgrade now"
  }
}

Render a component by ID:

GET /api/v1/components/:id/render
Authorization: Bearer <embed-token>

Template rendering

For versioned, composable billing templates, use TemplateRenderer. It renders JSON blocks produced by the dashboard template library:

import { TemplateRenderer } from "@arcenpay/react";

<TemplateRenderer
  name="pricing-page"
  blocks={[
    { type: "heading", content: "Startups" },
    { type: "price", amount: "$49", interval: "/month" },
    { type: "feature-list", items: ["Unlimited scans", "PDF export"] },
    { type: "cta", content: "Upgrade", href: "/checkout?plan=pro" },
  ]}
/>

Block types: heading, text, price, feature-list, and cta. Templates are created in the dashboard under Templates and support versioning, block composition, and install/uninstall workflows.

Next steps

Customer portal guide — configure a self-serve billing portal
ArcenEmbed SDK reference — full component API reference
Sessions — understand when to use server-issued tokens

Get started

Core concepts

Guides

Integrations

Embedded components

What ArcenEmbed provides

Rendering ArcenEmbed

Props

Component configuration

Server-issued tokens

Custom components

Template rendering

Next steps

​What ArcenEmbed provides

​Rendering ArcenEmbed

​Props

​Component configuration

​Server-issued tokens

​Custom components

​Template rendering

​Next steps

What ArcenEmbed provides

Rendering ArcenEmbed

Props

Component configuration

Server-issued tokens

Custom components

Template rendering

Next steps