@indiegateway/client

Browser SDK for IndieGateway merchants. Talks to your billing API only — never to IndieGateway with secrets.

Full integration guide is provided with your IndieGateway merchant onboarding.

import {
  indieGatewayClient,
  CheckoutReason,
  NativeCryptoNetwork,
  AccessType,
  AccessDurationUnit,
} from '@indiegateway/client';

const api = indieGatewayClient.createBillingApi({
  request: async ({ method, path, body }) =>
    fetch(`${baseUrl}${path}`, {
      method,
      credentials: 'include',
      headers: {
        Accept: 'application/json',
        ...(body !== undefined ? { 'Content-Type': 'application/json' } : {}),
      },
      body: body !== undefined ? JSON.stringify(body) : undefined,
    }),
});

const config = await api.fetchPaywallConfig();
const plans = indieGatewayClient.deriveNativeCryptoOneTimePlans(config);

const checkout = await api.startNativeCryptoCheckout({
  planKey: 'pro',
  network: NativeCryptoNetwork.Bsc,
  accessType: AccessType.FixedTerm,
  accessDurationValue: 1,
  accessDurationUnit: AccessDurationUnit.Months,
  reason: CheckoutReason.UserInitiated,
});

const phase = indieGatewayClient.mapCheckoutToUiPhase(checkout);

| | | |--|--| | createBillingApi | merchant BFF: config, checkout, abandon, recover, payment-status | | createCheckoutSessionStore | localStorage hints for restore (configurable key) | | mapCheckoutToUiPhase / session restore helpers | payment UI state | | deriveNativeCryptoOneTimePlans / access-period helpers | plan catalog | | applyPaywallTheme | --ig-* CSS variables | | native-crypto copy / timers / clipboard helpers | payment step |

Drop-in UI: @indiegateway/vue.