Installation

Install the Package

Install the Renumerate JS library using your preferred package manager:

npm install @renumerate/js

Or with yarn:

yarn add @renumerate/js

Or with pnpm:

pnpm add @renumerate/js

Backend Setup

The SDK uses HMAC-signed handshake tokens for secure authentication. You need to create a backend endpoint that generates these tokens for authenticated users.

Node.js / Express

import crypto from 'crypto';

const publicKey = process.env.RENUMERATE_PUBLIC_KEY;   // pk_live_xxx
const privateKey = process.env.RENUMERATE_PRIVATE_KEY; // sk_live_xxx

function createHandshakeToken(subscriberId: string): string {
  const payload = {
    brandPub: publicKey,
    subscriberId,
    timestamp: Date.now(),
    nonce: crypto.randomBytes(16).toString('hex'),
  };

  const payloadBase64 = Buffer.from(JSON.stringify(payload))
    .toString('base64url');
  const signature = crypto
    .createHmac('sha256', privateKey)
    .update(Buffer.from(payloadBase64, 'base64url'))
    .digest('base64url');

  return `${payloadBase64}.${signature}`;
}

// Express endpoint
app.get('/api/renumerate-token', (req, res) => {
  const subscriberId = req.user.stripeCustomerId;
  res.json({ token: createHandshakeToken(subscriberId) });
});

Python / Flask

import os
import hmac
import hashlib
import base64
import json
import time
import secrets

public_key = os.environ.get('RENUMERATE_PUBLIC_KEY')
private_key = os.environ.get('RENUMERATE_PRIVATE_KEY')

def create_handshake_token(subscriber_id: str) -> str:
    payload = {
        "brandPub": public_key,
        "subscriberId": subscriber_id,
        "timestamp": int(time.time() * 1000),
        "nonce": secrets.token_hex(16),
    }

    payload_bytes = json.dumps(payload).encode()
    payload_b64 = base64.urlsafe_b64encode(payload_bytes).rstrip(b'=').decode()

    signature = hmac.new(
        private_key.encode(),
        base64.urlsafe_b64decode(payload_b64 + '=='),
        hashlib.sha256
    ).digest()
    signature_b64 = base64.urlsafe_b64encode(signature).rstrip(b'=').decode()

    return f"{payload_b64}.{signature_b64}"

@app.route('/api/renumerate-token')
def get_token():
    subscriber_id = current_user.stripe_customer_id
    return jsonify({"token": create_handshake_token(subscriber_id)})

Frontend Setup

Once your backend is ready, initialize the SDK in your frontend:

React

import { RenumerateProvider, SubscriptionHub } from '@renumerate/js/react';

async function getAuthToken() {
  const response = await fetch('/api/renumerate-token');
  const { token } = await response.json();
  return token;
}

function App() {
  return (
    <RenumerateProvider config={{ getAuthToken }}>
      <SubscriptionHub />
    </RenumerateProvider>
  );
}

Vanilla JavaScript

import { Renumerate } from '@renumerate/js';

const renumerate = new Renumerate({
  getAuthToken: async () => {
    const response = await fetch('/api/renumerate-token');
    const { token } = await response.json();
    return token;
  }
});

await renumerate.mountSubscriptionHub('container-id');