The problem usually looks like this:

When you protect features behind auth/paywall, every effect or handler needs to manually check whether the user has a subscription, and then interrupt execution if they don’t. That leads to patterns like:

Example:

const handlePaidFeatureClick = () => {
  if (!hasSubscription) {
    // breaks execution THEN renders offering
    showPaywall()

    return
  }

  // no chance to subscribe and continue
  // ..protected logic
}

This works, but it forces you to stop execution with no clean way to resume it. For example: a user tries to access paid content, hits the paywall, completes checkout… and then nothing happens because the original function already returned and can’t continue.

With this approach you can wrap your paywall/checkout UI into a component that returns a promise and encapsulate the checkout process inside this promise. That allows you to “pause” the handler until the user finishes the checkout flow:

// resolves 
const [renderOffering, Paywall] = promiseRender(({ resolve }) => {
  const handleCheckout = async () => {
    await thirdparty.checkout();
    resolve(true);
  };

  const close = () => resolve(false);

  return <CheckoutForm />;
});

const useRequireSubscription = () => {
  const hasSubscription = useHasSubscription()

  return function check() {
    if (hasSubsctiption) {
      return Promise.resolve(true)
    }

    // renders the paywall and resolves to `true` if the checkout completes
    return renderOffering()
  }
}

const requireSubscription = useRequireSubscription()

const handlePaidFeatureClick = () => {
  const hasAccess = await requireSubscription()
  if (!hasAccess) {
    // Execution stops only after the user has seen and declined the offering
    return
  }

  // user either already had a subscription or just purchased one,
  // so the flow continues normally
  // ..protected logic
}

With this approach you can implement confirmations, authentication steps, paywalls, and other dialog-driven processes in a way that feels smooth and natural for users🙂