Customer portal

The customer portal is a self-serve billing center rendered by ArcenEmbed. Customers view their active plan, explore upgrade options, manage payment methods, and handle cancellations — all without contacting support.

Enabling the portal

The portal is a view inside ArcenEmbed. Render it with initialView="portal":

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

export function CustomerBillingPage() {
  return (
    <div className="max-w-3xl mx-auto p-6">
      <h1>Billing & Plan</h1>
      <ArcenEmbed mode="inline" initialView="portal" />
    </div>
  );
}

What customers can do in the portal

Action	Description
View current plan	See active plan name, price, billing interval, and next renewal date.
View usage	See metered usage against plan limits (e.g., “150 / 500 scans used”).
Upgrade plan	Select a higher-tier plan, preview prorated pricing, and confirm.
Downgrade plan	Schedule a downgrade at the end of the current billing period.
Cancel subscription	Cancel at period end — access continues until the current term expires.
Resume subscription	Re-activate a scheduled cancellation before it takes effect.
View add-ons	See active add-ons and purchase new ones.
View invoices	See issued invoices with download links.
Pay invoice	Pay an outstanding invoice via payment link.
Update payment wallet	Change the wallet address used for subscription payments.

Modal — opens as a full-screen overlay, good for “Manage Billing” buttons:

<button onClick={() => setShowBilling(true)}>Manage Billing</button>
{showBilling && <ArcenEmbed mode="modal" />}

Inline — renders as part of the page layout, good for dedicated billing pages:

<div className="billing-layout">
  <Sidebar />
  <ArcenEmbed mode="inline" initialView="portal" />
</div>

Plan change flow

When a customer upgrades or downgrades from the portal:

They select a new plan.
For upgrades, the portal shows the prorated amount due immediately.
For downgrades, the portal shows that the change takes effect at period end.
After confirmation, the change is reflected in both the portal and your entitlement checks.

Your app receives company.plan.changed webhook events to update its state.

Customizing the portal

The portal’s appearance inherits from your team’s provider profile (name, logo). Configure these in Settings → Provider Profile or via API:

PUT /api/v1/provider/profile

{
  "name": "My SaaS",
  "logoUrl": "https://mysaas.com/logo.png",
  "supportEmail": "[email protected]"
}

Adding a billing link to your app

A common pattern is adding a “Billing” link in your app’s navigation that opens the portal:

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

export function AppLayout() {
  const [showBilling, setShowBilling] = useState(false);

  return (
    <>
      <nav>
        <button onClick={() => setShowBilling(true)}>Billing</button>
      </nav>
      {showBilling && (
        <ArcenEmbed mode="modal" initialView="portal" />
      )}
    </>
  );
}

Email billing links

For offline or email-based billing interactions, use payment links instead of the portal. Create a payment link for a specific invoice or add-on and include the URL in emails:

Pay your invoice here: https://app.arcenpay.com/pay/inv-00042

Next steps

Embedded components — full ArcenEmbed configuration reference
Payment links guide — create hosted payment pages
Subscription lifecycle — understand the states behind portal actions

Get started

Core concepts

Guides

Integrations

Enabling the portal

What customers can do in the portal

Plan change flow

Customizing the portal

Adding a billing link to your app

Email billing links

Next steps

​Enabling the portal

​What customers can do in the portal

​Modal vs. inline portal

​Plan change flow

​Customizing the portal

​Adding a billing link to your app

​Email billing links

​Next steps

Enabling the portal

What customers can do in the portal

Modal vs. inline portal

Plan change flow

Customizing the portal

Adding a billing link to your app

Email billing links

Next steps