@archetypeapi/portals

Archetype Portals

The Archetype Portals provides customer and pricing portals

About Archetype

Archetype is the revenue infrastruce that make API monetization quick and painless. It works by integrating powerful, reliable purchase server with cross-platform support. Our open-source framework provides a backend and a wrapper around payment processors like Stripe to save engineers months from having to build custom billing infrastructure for their APIs.

Whether you are building a new API or already have millions of customers, you can use Archetype to:

• Fetch products, make purchases, and check subscription status with our native SDKs.
• Host add configure products remotely from our dashboard.
• Analyze the most important metrics for your app business in one place.
• See customer transaction histories, chart lifetime value, and grant promotional subscriptions.

Sign up to get started.

Documentation

If looking to use our APIs directly, the API reference is here.

With Archetype, you can keep track of all your app transactions in one place — whether your customers are charged through iOS, Android, or the web. As the single source of truth for your API business, we make sure your customers' subscription status is always up to date.

Installation

Explore the docs and view the quickstart guide

Install the package from NPM, @archetypeapi/portals

npm i @archetypeapi/portals

Requirements

react: "^18.1.0",

Usage

After installing the NPM package we can import the Customer Portal react component and then utelize it.

import { CustomerPortal } from "@archetypeapi/portals";

export default function Home() {
  return (
    <div>
      <CustomerPortal token={"token_from_sdk"} />
    </div>
  );
}

The archetpye web token is important in authentication a user and this can be genereated using the Archetype Python SDK or Archetype Node SDK on you backend servers. Please do no reveal the archetype app_id or api keys anywhere on the frontend.

We will also need to import css files, This would be the root file in your react application or on the app.js file in your next.js application

import "@archetypeapi/portals/dist/styles.css";
import "@archetypeapi/core/dist/styles.css";

Custom configs

We can customize the UI and the logo on the sidebar by passing in a config object with the customer portal

eg:

const config = {
  primary: "#1c1c1c",
  secondary: "#525252",
  tertiary: "#383838",
  accent: "#05a36a",
  textDarkPrimary: false,
  textDarkSecondary: false,
  textDarkTertiary: false,
  logo: <Archetypelogo className="h-20 " />,
  returnHref: "/",
};

return <CustomerPortal token={token} defaultView={"billing"} config={config} />;

• Primary : Main color, affects sidebar and buttons
• Secondary : Background color of the seperate tabs
• Tertiary : Background color of different cards in tabs
• textDarkPrimary : choose between black and white text color for the text on bg color primariy
• textDarkSecondary : choose between black and white text color for the text on bg color secondary
• textDarkTertiary : choose between black and white text color for the text on bg color tertiary
• Return

We can also choose what the initial view screen should be between the dashboard, invoices and the billing page. Default is dashboard

defaultView = { defaultView };

Setting up backend server

The library needs to be configured with your account's app_id and secret key which is available in your Archetype Dashboard. Set archetype.app_id and archetype.secret_key to their values:

import archetypesdk from "@archetypeapi/node";

const appId = process.env.APP_ID; // find in your Archetype Dashboard
const secretKey = process.env.SECRET_KEY; // find in your Archetype Dashboard

const Archetype = archetypesdk(appId, secretKey);

// create customer
const customer = Archetype.Customer.create("CUSTOM_UID");

// list customers
const customers = Archetype.Customer.all();

// log the first customer's email
console.log(customers[0]["email"]);

// retrieve specific Customer
customer = Archetype.Customer.retrieve("CUSTOM_UID");

// log that customer's email
console.log(customer["email"]);

// Track a Metered Usage

Archetype.BillableMetric.LogUsage(
  (custom_ud = "YOUR_CUSTOMER_ID"),
  (billable_metric_id = "BILLABLE_METRIC_ID"),
  (amount = 100) // Float
);

// Authorize an Express Request with Archetype Middelware
const express = require("express");
const { Auth } = require("@archetypeapi/node");
const app = express();

const ArchetypeAuth = Auth(appId, appSecret);

app.get("/a", ArchetypeAuth, (req, res) => {
  res.send("Success!");
});