ismone-react

React entry components for launching hosted ISM One authentication and subscription flows.

Components

• ISMOneAuthButton
• ISMOneAuthCard
• ISMOneSubscriptionButton
• ISMOneSubscriptionCard

Both components:

• load the hosted ISM One browser SDK automatically
• use clean default styling out of the box
• support sdkUrl, ssoOrigin, and apiOrigin overrides when needed
• keep the actual auth and subscription UI hosted inside ISM One
• support unstyled when you want your own classes to fully control the button appearance
• support unstyled on the card components when you want full control of the outer surface as well
• support asChild when you want to attach ISM One behavior to your own element with no default trigger styling applied

Install

npm install ismone-react

Auth example

import { ISMOneAuthButton } from "ismone-react";

export function LoginButton() {
  return (
    <ISMOneAuthButton
      platformUuid="47f76fc8-2600-4de4-8b87-9069d7193c86"
      returnTo="https://product.example.com/auth/ism-one/callback"
      sdkUrl="https://one.christembassy-ism.com/ism-one.js"
      className="bg-black text-white rounded-xl px-5 py-3"
      unstyled
    />
  );
}

asChild example:

<ISMOneAuthButton
  platformUuid="47f76fc8-2600-4de4-8b87-9069d7193c86"
  returnTo="https://product.example.com/auth/ism-one/callback"
  asChild
>
  <a className="inline-flex items-center rounded-xl bg-black px-5 py-3 text-white">
    Continue with ISM One
  </a>
</ISMOneAuthButton>

Card override example:

<ISMOneSubscriptionCard
  platformUuid="47f76fc8-2600-4de4-8b87-9069d7193c86"
  planCode="classic"
  ssoToken="sso_xxxxxxxxxxxxxxxxx"
  className="bg-blue-600 text-white rounded-2xl px-5 py-3"
  surfaceStyle={{ padding: 0 }}
  unstyled
/>

Subscription example

import { ISMOneSubscriptionButton } from "ismone-react";

export function UpgradeButton() {
  return (
    <ISMOneSubscriptionButton
      platformUuid="47f76fc8-2600-4de4-8b87-9069d7193c86"
      planCode="classic"
      ssoToken="sso_xxxxxxxxxxxxxxxxx"
      sdkUrl="https://one.christembassy-ism.com/ism-one.js"
      label="Buy Classic"
    />
  );
}

Designed card example

import { ISMOneAuthCard, ISMOneSubscriptionCard } from "ismone-react";

export function BillingGate() {
  return (
    <div style={{ display: "grid", gap: 24, maxWidth: 960, margin: "0 auto", gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))" }}>
      <ISMOneAuthCard
        platformUuid="47f76fc8-2600-4de4-8b87-9069d7193c86"
        returnTo="https://product.example.com/auth/ism-one/callback"
      />
      <ISMOneSubscriptionCard
        platformUuid="47f76fc8-2600-4de4-8b87-9069d7193c86"
        planCode="classic"
        ssoToken="sso_xxxxxxxxxxxxxxxxx"
        label="Buy Classic"
      />
    </div>
  );
}

Build locally

cd ui/packages/ismone-react
npx tsc -p tsconfig.json

Publish

cd ui/packages/ismone-react
npm publish --access public