Custom Registration Component

Build a custom React component that calls your backend API after payment to handle user registration and account setup.

The Problem

You need to register users in your own system after they complete payment through a Zellify funnel. Standard components don't support calling your backend API with custom logic. You want to send payment and user data to your backend, receive credentials (like a token), and then route the user to your app.

---

How It Works

1. The end-user completes checkout via Stripe or Paddle

2. They land on your success page containing a custom registration component

3. The component accesses Zellify data: email, Stripe customer ID, Stripe checkout session ID (if using Stripe), and app_user_id

4. When triggered, it calls your backend API with this data

5. Your backend creates the user account, links it to the payment, and returns credentials

6. The component redirects the user to your app with the credentials

---

Example

This example shows a component that sends user data to your backend after payment, receives a token, and opens your app with the credentials.

The example focuses on logic — add your own UI (button, loading state, etc.) as needed.

import { tracker } from "@tracker";
import { useVariable } from "@variables";
import { useFunnelRouter } from "@primitives";
import { useState } from "react";

export default function RegisterAndOpenApp() {
  const funnelRouter = useFunnelRouter();

  // Zellify variables (available after payment)
  const [email] = useVariable("email");
  const [stripeCustomerId] = useVariable("_stripeCustomerId");
  const [stripeCheckoutSessionId] = useVariable("_stripeCheckoutSessionId");

  // Session identifier (same as app_user_id in payment metadata)
  const appUserId = tracker.sessionId;

  const [loading, setLoading] = useState(false);

  const handleRegister = async () => {
    setLoading(true);

    // 1. Call your backend to create the user account
    const res = await fetch("https://api.yourapp.com/register", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        app_user_id: appUserId,
        email: email,
        stripe_customer_id: stripeCustomerId,
        stripe_checkout_session_id: stripeCheckoutSessionId,
      }),
    });

    const { token } = await res.json();

    // 2. Redirect to your app with credentials
    const params = new URLSearchParams({
      token: token,
      user_id: appUserId,
    });

    funnelRouter.openExternal(`https://yourapp.onelink.me/abc?${params}`);
  };

  return (
    <button type="button" onClick={handleRegister} disabled={loading}>
      {loading ? "Setting up..." : "Open App"}
    </button>
  );
}

Page refresh support

If users are expected to be refreshing success page where this component is placed (rather than always arriving via redirect after payment), tracker.sessionId may be undefined on first render — it takes up to ~200ms to initialize.

Use this hook instead of reading tracker.sessionId directly:

import { useState, useEffect } from "react";
import { tracker } from "@tracker";

function useAppUserId() {
  const [id, setId] = useState(tracker.sessionId);

  useEffect(() => {
    if (id) return;
    const interval = setInterval(() => {
      if (tracker.sessionId) {
        setId(tracker.sessionId);
        clearInterval(interval);
      }
    }, 100);
    return () => clearInterval(interval);
  }, [id]);

  return id;
}

Then replace const appUserId = tracker.sessionId; with:

const appUserId = useAppUserId();

---

What Zellify Provides

Your custom component has access to:

Import	What it provides
useVariable("email")	User's email address
useVariable("_stripeCustomerId")	Stripe Customer ID (requires Stripe payment provider)
useVariable("_stripeCheckoutSessionId")	Stripe Checkout Session ID (requires Stripe payment provider)
useVariable("_paddleCustomerId")	Paddle Customer ID (requires Paddle payment provider)
useVariable("_paddleTransactionId")	Paddle Transaction ID (requires Paddle payment provider)
tracker.sessionId	Unique session ID (same as app_user_id in payment metadata)
funnelRouter.openExternal(url)	Navigate to external URL

---

What You Need to Set Up

1. Build your backend endpoint

Your API endpoint should:

• Accept POST requests with the user data

• Create or update the user account

• Link the account to the Stripe/Paddle customer using app_user_id

• Return credentials (token, user ID, etc.) for your app

• Handle CORS if your funnel domain differs from your API domain

2. Create the custom component in Zellify

In the funnel builder, create a custom component where you implement your registration logic (similar to the example above). Then drag and drop that component onto your success page — any page after the paywall where paid users land.

3. Handle the redirect

Use funnelRouter.openExternal() to send the user to your app with the credentials. For mobile apps, this is typically a deep link or universal link (AppsFlyer, Adjust, Branch, etc.).

---

The Linking Key

app_user_id (from tracker.sessionId) is the same identifier that Zellify sets in Stripe/Paddle metadata at checkout. Your backend can use this to match the registration request to the payment record.

---

Related

• Components

• Variables

• Mobile App with Custom Backend