Collecting payments upfront

The Makerkit template is based on the model where users pay at the moment when they get value from the service: i.e., they're free to sign-up without friction but will be able to subscribe to a plan once in the application. So you can restrict your users from the primary value of the service until they subscribe, and it's totally up to you when that is.

It's also possible you could want your users to subscribe and pay for your service upfront: this can be valuable, for example, if you're offering a one-off service, like generating a logo or something similar that could involve operational costs to you.

In this recipe, I want to show you how we can accept a one-off payment with Stripe during the onboarding flow, such that you can receive a payment before the user is redirected to the private area of your application.

How to accept payments upfront with Makerkit and Stripe

To do so, we need to add this main change: update with-app-props to redirect users to checkout if they don't have a valid subscription or payment in their organization.

We will add the following lines of code before returning the props:

if (!organization) {
  return redirectToOnboarding();
}
 
if (!organization.subscription) {
  try {
    const organizationId = organization.id;
    const customerId = organization.customerId;
 
    // for simplicity, we will use the first price ID in the configuration
    const priceId = configuration.stripe.plans[0].stripePriceId;
 
    // return to the app home after checkout
    const returnUrl
       = `${ctx.req.headers.origin}/${configuration.paths.appHome}`;
    
    const { url } = await createStripeCheckout({
      returnUrl,
      organizationId,
      priceId,
      customerId,
    });
    
    return {
      redirect: {
        destination: url,
      }
    };
  } catch {
    return {
      redirect: {
        destination: '/500',
      }
    };
  }
}

Additionally, we want to change the mode to payment. To do so, open the file `` and edit the following line:

const mode: Stripe.Checkout.SessionCreateParams.Mode = 'subscription';

And change it into the following:

const mode: Stripe.Checkout.SessionCreateParams.Mode = 'payment';

For more information check out the Stripe documentation.

If you go this route, you may also want to hide or remove the subscription settings page since the payment is one-off.

With that said, always provide a link for users to go to their Stripe portal to download their receipts and manage their accounts.