Wasp•3w ago

Stripe Configs

When it comes to Stripe configuration, the defaults for open-saas in the .env.server are: PAYMENTS_HOBBY_SUBSCRIPTION_PLAN_ID=012345 PAYMENTS_PRO_SUBSCRIPTION_PLAN_ID=012345 PAYMENTS_CREDITS_10_PLAN_ID=012345 However, the payment.pricingpage.tsx has names such as: PaymentPlanId.Hobby PaymentPlanId.Pro PaymentPlanId.Credits10 When I link my own (existing) stripe, how do I define the variables in the .env.server? My instinct (in my case) was to take the enum PaymentPlanId.CorporateMembership, but the syntax is different in the variables in the context of: [PaymentPlanId.CorporateMembership]: { name: prettyPaymentPlanName(PaymentPlanId.CorporateMembership), price: getPlanPrice(PaymentPlanId.CorporateMembership), description: 'Corporate membership for businesses supporting SEVA', features: [ 'All General Member benefits', 'Corporate recognition on website', 'Business networking opportunities', 'Priority event booth placement', 'Quarterly business newsletter', 'Single voting right in SEVA elections', 'Corporate member directory listing', ], icon: <Users className="w-6 h-6" />, }, Any advice or documentation would be greatly apprecitated! I tried following the youtube tutorial, but that all assumes the default configuration.

3 Replies

kapa.ai•3w ago

Hi @Landyn. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To connect your own Stripe products/prices to OpenSaaS (or a Wasp-based app), you need to map your Stripe Price IDs to the environment variables expected by the app. The key is to ensure that the environment variable names in your .env.server file match what the backend code expects, and that the values are the actual Stripe Price IDs from your Stripe dashboard. How to Set Up Stripe Price IDs 1. Find the Expected Env Var Names:
The code uses variables like PAYMENTS_HOBBY_SUBSCRIPTION_PLAN_ID, PAYMENTS_PRO_SUBSCRIPTION_PLAN_ID, and PAYMENTS_CREDITS_10_PLAN_ID in .env.server. These correspond to the different payment plans in your app. 2. Get Your Stripe Price IDs:
In your Stripe dashboard, create the products and prices you want to use. Copy the Price ID (it looks like price_1OXkv5AHms7vVycMvx4PzB0N). 3. Map Enum to Env Var:
The enums in your frontend code (e.g., PaymentPlanId.CorporateMembership) are used to reference these plans in the UI and logic. You need to ensure that, in your backend (and possibly in a shared config/constants file), there is a mapping from the enum to the correct environment variable. For example, if you add a new plan called CorporateMembership, you should add a new env var in .env.server:

   PAYMENTS_CORPORATE_MEMBERSHIP_PLAN_ID=price_1OXkv5AHms7vVycMvx4PzB0N

   PAYMENTS_CORPORATE_MEMBERSHIP_PLAN_ID=price_1OXkv5AHms7vVycMvx4PzB0N

Then, in your backend code (or wherever the mapping happens), make sure that when PaymentPlanId.CorporateMembership is used, it looks up process.env.PAYMENTS_CORPORATE_MEMBERSHIP_PLAN_ID. 4. Update Your Code if Needed:
If the code does not already support your new plan, you may need to add a mapping in your server logic or constants file, such as:

   const planIdToStripePriceId = {
     [PaymentPlanId.Hobby]: process.env.PAYMENTS_HOBBY_SUBSCRIPTION_PLAN_ID,
     [PaymentPlanId.Pro]: process.env.PAYMENTS_PRO_SUBSCRIPTION_PLAN_ID,
     [PaymentPlanId.Credits10]: process.env.PAYMENTS_CREDITS_10_PLAN_ID,
     [PaymentPlanId.CorporateMembership]: process.env.PAYMENTS_CORPORATE_MEMBERSHIP_PLAN_ID, // Add this line
   }

   const planIdToStripePriceId = {
     [PaymentPlanId.Hobby]: process.env.PAYMENTS_HOBBY_SUBSCRIPTION_PLAN_ID,
     [PaymentPlanId.Pro]: process.env.PAYMENTS_PRO_SUBSCRIPTION_PLAN_ID,
     [PaymentPlanId.Credits10]: process.env.PAYMENTS_CREDITS_10_PLAN_ID,
     [PaymentPlanId.CorporateMembership]: process.env.PAYMENTS_CORPORATE_MEMBERSHIP_PLAN_ID, // Add this line
   }

Documentation & Examples - The OpenSaaS template expects you to define these variables in .env.server with the actual Stripe Price IDs. The mapping between the enum and the env var is typically handled in a constants or config file, which you may need to update if you add new plans or change naming conventions. - If you want to see how this is done in OpenSaaS, you can check the open-saas repository for examples of how constants and env vars are managed.
- If you add a new plan, just follow the pattern: add the env var, update the mapping, and ensure your frontend and backend reference the correct enum and env var. Note: The knowledge sources do not provide a step-by-step guide for adding a new plan, but the pattern above is consistent with how existing plans are handled in OpenSaaS and Wasp projects. If you need to support a new plan, you must add the corresponding env var and update the mapping in your code accordingly. If you run into issues, double-check that the env var names and values are correct and that your code references them properly. For more on environment variables in Wasp, see the official docs: Wasp Env Vars and Defining Env Vars in Development. If you need to see a concrete example of how to credit a user for a one-time payment, see this code reference: Crediting a user with a product payment as mentioned in the community discussion<source>https://discord.com/channels/686873244791210014/1205328655300038766</source.> If you need more specific help, please provide the relevant code snippet where the mapping happens, and I can help you adapt it! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Landyn, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

LandynOP•3w ago

Where do I do the variable mapping?

toticozeni•3w ago

Hey @Landyn , the most important thing is link the PaymentPlanId enum to stripe environment variables which hold their respective Stripe price id. In open-saas template we map those values directly inside of the paymentPlans object:

export const paymentPlans = {
  [PaymentPlanId.Hobby]: {
    getPaymentProcessorPlanId: () => requireNodeEnvVar('PAYMENTS_HOBBY_SUBSCRIPTION_PRICE_ID'),
    effect: { kind: 'subscription' },
  },
  [PaymentPlanId.Pro]: {
    getPaymentProcessorPlanId: () => requireNodeEnvVar('PAYMENTS_PRO_SUBSCRIPTION_PRICE_ID'),
    effect: { kind: 'subscription' },
  },
  [PaymentPlanId.Credits10]: {
    getPaymentProcessorPlanId: () => requireNodeEnvVar('PAYMENTS_CREDITS_10_PRICE_ID'),
    effect: { kind: 'credits', amount: 10 },
  },
} as const satisfies Record<PaymentPlanId, PaymentPlan>;

export const paymentPlans = {
  [PaymentPlanId.Hobby]: {
    getPaymentProcessorPlanId: () => requireNodeEnvVar('PAYMENTS_HOBBY_SUBSCRIPTION_PRICE_ID'),
    effect: { kind: 'subscription' },
  },
  [PaymentPlanId.Pro]: {
    getPaymentProcessorPlanId: () => requireNodeEnvVar('PAYMENTS_PRO_SUBSCRIPTION_PRICE_ID'),
    effect: { kind: 'subscription' },
  },
  [PaymentPlanId.Credits10]: {
    getPaymentProcessorPlanId: () => requireNodeEnvVar('PAYMENTS_CREDITS_10_PRICE_ID'),
    effect: { kind: 'credits', amount: 10 },
  },
} as const satisfies Record<PaymentPlanId, PaymentPlan>;

In example you've sent you have

  price: getPlanPrice(PaymentPlanId.CorporateMembership),

  price: getPlanPrice(PaymentPlanId.CorporateMembership),

You just need to do the same inside of the function getPlanPrice. e.g.

const planIdToStripePriceId = {
  [PaymentPlanId.CorporateMembership]: process.env.PAYMENTS_CORPORATE_MEMBERSHIP_PRICE_ID,
  // ... your other payment plans
}

const planIdToStripePriceId = {
  [PaymentPlanId.CorporateMembership]: process.env.PAYMENTS_CORPORATE_MEMBERSHIP_PRICE_ID,
  // ... your other payment plans
}

NOTE: I've renamed all _PLAN_ID suffixes for env vars to _PRICE_ID since they are called prices in newer Stripe version. We still have to update that on open-saas but it should be done soon. You can have the function inside of the same file as the paymentPlans

Gaming

Programming

Stripe Configs

Did you find this page helpful?