Wasp•4w ago

Stripe: Coupon codes at checkout

How to set Coupon codes at checkout?

34 Replies

Hi @NEROX. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hmm, I do not have enough information to answer your question about setting up coupon codes at checkout with Stripe in Wasp. The provided knowledge sources don't contain specific details about implementing coupon codes in the Stripe integration for Wasp projects. To get accurate information on this topic, you may want to consult the Stripe documentation (https://stripe.com/docs) directly or ask the Wasp community for guidance on implementing custom Stripe features beyond the basic integration provided in the OpenSaaS template. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @NEROX, 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?

Killshot•4w ago

weirdly stripe calls it promotion codes @NEROX but they are in dashboard > Products > Coupons it will show your live coupons and also give option to create new ones For now it's only for subscriptions as far as i know.

Sven•4w ago

did you get it to work i am also trying

NEROXOP•4w ago

I'm checking this but I don't understand how to acomplish it https://docs.stripe.com/payments/checkout/discounts

Add discounts for one-time payments with Checkout

Discounts in Checkout allow you to reduce the amount charged to a customer for one-time payments by discounting their subtotal with coupons and promotion codes.

Sven•4w ago

i tried als and i couldnt even fill a code in n checkout on

NEROXOP•4w ago

NEROXOP•4w ago

But idk how to acomplish with wasp because this is for other thing @kapa.ai How can I modify the part that calls Stripe for the purchase plan in PricingPage.tsx of the SaaS template?

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To modify the part that calls Stripe for the purchase plan in PricingPage.tsx of the SaaS template, you'll need to focus on the stripePayment action. Here's how you can approach this: 1. First, locate the stripePayment action in your actions.ts file. This is where the Stripe payment logic is implemented. 2. In the PricingPage.tsx file, you'll find a function that calls this action when a user selects a plan. It might look something like this:

const handlePurchase = async (priceId: string) => {
  try {
    const { checkoutUrl } = await stripePayment(priceId);
    if (checkoutUrl) {
      window.location.href = checkoutUrl;
    }
  } catch (error) {
    // Handle error
  }
};

const handlePurchase = async (priceId: string) => {
  try {
    const { checkoutUrl } = await stripePayment(priceId);
    if (checkoutUrl) {
      window.location.href = checkoutUrl;
    }
  } catch (error) {
    // Handle error
  }
};

3. To modify this, you can update the stripePayment action in your actions.ts file. For example, if you want to add support for different types of products (like one-time payments for credits), you might modify the action to handle different scenarios:

// in actions.ts
export const stripePayment = async (priceId: string, paymentType: 'subscription' | 'credits') => {
  // ... existing code

  if (paymentType === 'subscription') {
    // Handle subscription payment
  } else if (paymentType === 'credits') {
    // Handle credits payment
  }

  // ... rest of the code
};

// in actions.ts
export const stripePayment = async (priceId: string, paymentType: 'subscription' | 'credits') => {
  // ... existing code

  if (paymentType === 'subscription') {
    // Handle subscription payment
  } else if (paymentType === 'credits') {
    // Handle credits payment
  }

  // ... rest of the code
};

4. Then, in your PricingPage.tsx, you would update the call to stripePayment to include the payment type:

const handlePurchase = async (priceId: string, paymentType: 'subscription' | 'credits') => {
  try {
    const { checkoutUrl } = await stripePayment(priceId, paymentType);
    if (checkoutUrl) {
      window.location.href = checkoutUrl;
    }
  } catch (error) {
    // Handle error
  }
};

const handlePurchase = async (priceId: string, paymentType: 'subscription' | 'credits') => {
  try {
    const { checkoutUrl } = await stripePayment(priceId, paymentType);
    if (checkoutUrl) {
      window.location.href = checkoutUrl;
    }
  } catch (error) {
    // Handle error
  }
};

Remember to also update your Stripe product configuration in the Stripe dashboard to match any changes you make in the code. For more detailed information on implementing different payment types, you can refer to the OpenSaaS Stripe webhook handler (https://github.com/wasp-lang/open-saas/blob/main/app/src/server/webhooks/stripe.ts), which shows examples of handling different types of Stripe events. If you're looking to implement a credits system, there's an example in the Discord thread about Payment for Credits / Credit Balance System (https://discord.com/channels/686873244791210014/1205328655300038766) that might be helpful. Always ensure that your modifications align with Stripe's best practices and terms of service. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @NEROX, 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?

NEROXOP•4w ago

@kapa.ai ok and based on Stripe docs that says: Use a coupon! If you want to create a session with an applied discount, pass the coupon ID in the coupon parameter of the discounts array. Checkout currently supports up to one coupon or promotion code. server.js Node

// Set your secret key. Remember to switch to your live secret key in production.
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = require('stripe')('sk_test_51NmdMPCUece7yGOWwVsjgZ2G1SicOrZ6RfdtsaIYHVEb5xXbOlytCnpC7RzNdONL6sVOTrbfjVMSPkzywKooI1Og00TmnREQlk');

const session = await stripe.checkout.sessions.create({
  line_items: [
    {
      price: '{{PRICE_ID}}',
      quantity: 1,
    },
  ],
  discounts: [
    {
      coupon: '{{COUPON_ID}}',
    },
  ],
  mode: 'payment',
  success_url: 'https://example.com/success',
  cancel_url: 'https://example.com/cancel',
});

// Set your secret key. Remember to switch to your live secret key in production.
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = require('stripe')('sk_test_51NmdMPCUece7yGOWwVsjgZ2G1SicOrZ6RfdtsaIYHVEb5xXbOlytCnpC7RzNdONL6sVOTrbfjVMSPkzywKooI1Og00TmnREQlk');

const session = await stripe.checkout.sessions.create({
  line_items: [
    {
      price: '{{PRICE_ID}}',
      quantity: 1,
    },
  ],
  discounts: [
    {
      coupon: '{{COUPON_ID}}',
    },
  ],
  mode: 'payment',
  success_url: 'https://example.com/success',
  cancel_url: 'https://example.com/cancel',
});

Configure a coupon Coupons have the following parameters that you can use for one-time payments: - id, a unique identifier for the coupon - currency - percent_off or amount_off - max_redemptions - redeem_by, the latest date customers can apply the coupon - applies_to, limits the products that the coupon applies to Use a promotion code Enable customer-redeemable promotion codes using the allow_promotion_codes parameter in a Checkout Session. This enables a field in Checkout to allow customers to input promotion codes. server.js Node

// Set your secret key. Remember to switch to your live secret key in production.
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = require('stripe')('sk_test_51NmdMPCUece7yGOWwVsjgZ2G1SicOrZ6RfdtsaIYHVEb5xXbOlytCnpC7RzNdONL6sVOTrbfjVMSPkzywKooI1Og00TmnREQlk');

const session = await stripe.checkout.sessions.create({
  line_items: [
    {
      price_data: {
        unit_amount: 2000,
        product_data: {
          name: 'T-shirt',
        },
        currency: 'usd',
      },
      quantity: 1,
    },
  ],
  mode: 'payment',
  allow_promotion_codes: true,
  success_url: 'https://example.com/success',
  cancel_url: 'https://example.com/cancel',
});

// Set your secret key. Remember to switch to your live secret key in production.
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = require('stripe')('sk_test_51NmdMPCUece7yGOWwVsjgZ2G1SicOrZ6RfdtsaIYHVEb5xXbOlytCnpC7RzNdONL6sVOTrbfjVMSPkzywKooI1Og00TmnREQlk');

const session = await stripe.checkout.sessions.create({
  line_items: [
    {
      price_data: {
        unit_amount: 2000,
        product_data: {
          name: 'T-shirt',
        },
        currency: 'usd',
      },
      quantity: 1,
    },
  ],
  mode: 'payment',
  allow_promotion_codes: true,
  success_url: 'https://example.com/success',
  cancel_url: 'https://example.com/cancel',
});

How can I setup my coupon codes with wasp? I have already created one coupon code.

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To set up coupon codes with Wasp using Stripe, you'll need to modify the Stripe checkout session creation in your Wasp project. Based on the Stripe documentation you've provided and the Wasp context, here's how you can implement this: 1. First, locate the stripePayment action in your actions.ts file. This is where the Stripe checkout session is created. 2. Modify the stripePayment action to include the coupon code functionality. You'll need to update the stripe.checkout.sessions.create call. Here's an example of how you might do this:

// in actions.ts
export const stripePayment = async (args: { priceId: string, couponId?: string }) => {
  // ... existing code

  const sessionConfig: Stripe.Checkout.SessionCreateParams = {
    line_items: [
      {
        price: args.priceId,
        quantity: 1,
      },
    ],
    mode: 'subscription', // or 'payment' for one-time payments
    success_url: `${DOMAIN}/checkout?success=true`,
    cancel_url: `${DOMAIN}/checkout?canceled=true`,
    automatic_tax: { enabled: true },
    customer_update: {
      address: 'auto',
    },
    customer: customer.id,
  };

  if (args.couponId) {
    sessionConfig.discounts = [
      {
        coupon: args.couponId,
      },
    ];
  }

  const session: Stripe.Checkout.Session = await stripe.checkout.sessions.create(sessionConfig);

  // ... rest of the code
};

// in actions.ts
export const stripePayment = async (args: { priceId: string, couponId?: string }) => {
  // ... existing code

  const sessionConfig: Stripe.Checkout.SessionCreateParams = {
    line_items: [
      {
        price: args.priceId,
        quantity: 1,
      },
    ],
    mode: 'subscription', // or 'payment' for one-time payments
    success_url: `${DOMAIN}/checkout?success=true`,
    cancel_url: `${DOMAIN}/checkout?canceled=true`,
    automatic_tax: { enabled: true },
    customer_update: {
      address: 'auto',
    },
    customer: customer.id,
  };

  if (args.couponId) {
    sessionConfig.discounts = [
      {
        coupon: args.couponId,
      },
    ];
  }

  const session: Stripe.Checkout.Session = await stripe.checkout.sessions.create(sessionConfig);

  // ... rest of the code
};

3. If you want to allow customers to enter promotion codes during checkout, you can add the allow_promotion_codes parameter:

sessionConfig.allow_promotion_codes = true;

sessionConfig.allow_promotion_codes = true;

4. Update your PricingPage.tsx to pass the coupon ID when calling the stripePayment action:

const handlePurchase = async (priceId: string, couponId?: string) => {
  try {
    const { checkoutUrl } = await stripePayment({ priceId, couponId });
    if (checkoutUrl) {
      window.location.href = checkoutUrl;
    }
  } catch (error) {
    // Handle error
  }
};

const handlePurchase = async (priceId: string, couponId?: string) => {
  try {
    const { checkoutUrl } = await stripePayment({ priceId, couponId });
    if (checkoutUrl) {
      window.location.href = checkoutUrl;
    }
  } catch (error) {
    // Handle error
  }
};

5. You might also want to add a field in your UI for users to enter a coupon code, and then pass that code to the handlePurchase function. Remember, you need to have already created the coupon in your Stripe dashboard. The couponId you pass should correspond to the ID of a coupon you've created in Stripe. Please note that this implementation is not directly provided in the Wasp documentation or the OpenSaaS template, so you'll need to test it thoroughly to ensure it works correctly with your specific setup. For more detailed information on Wasp's Stripe integration, you can refer to the OpenSaaS Stripe testing guide (https://docs.opensaas.sh/guides/stripe-testing/). However, keep in mind that this guide doesn't specifically cover coupon implementation, so you'll need to combine the Wasp-specific knowledge with the Stripe documentation you've provided. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @NEROX, 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?

NEROXOP•4w ago

ohh yeah @Sven

NEROXOP•4w ago

Let's see if works in prod

Sven•4w ago

niceeee you got it working crazy let me know

NEROXOP•4w ago

works on prod https://whitehatseotactics.com/pricing but the cupons doesnt work

Sven•4w ago

how do you design your page it looks really good shittt

Filip•4w ago

Hey fellas, is everything under control here? Do I need to jump in and read the thread? If the questions isn't Wasp-specific, I might not be of much use, though (haven't built a saas in a while now :)). Anyway, tag me if you need me!

Sven•3w ago

is it correct that when I as user canceled my subscription plan (which i still had till 29-11) the satus is set to deleted but subscription plan is still start

Sven•3w ago

and so where can i find logic that does this?

Filip•3w ago

Seems expected to me. I'll tag @Vinny (@Wasp) just in case. From what I can tell, you can find this logic in: - handleCustomerSubscriptionDeleted in stripe/webhooks.ts for Stripe - handleSubscriptionExpired in lemonSqueezy/webhook.ts for LemonSqueezy Btw, when you're looking for stuff like this. I recommend doing a global project search for a string (in this case "deleted"). You'll get a small number of results and can check all of them. That's how I found it 🙂

Vinny (@Wasp)•3w ago

yeah the plan isn't important if their subscription status is deleted you can change the underlying code in the webhook to reset the plan to null if you'd like

Sven•3w ago

yeah i did that thanks, but somethimes i dont know why, it doesnt find stuff but thanks alot

NEROXOP•3w ago

@kapa.ai Based on OUR thread, but: This promo code cannot be applied because it reduces the total to zero. Please update your API version to 2023-08-16 to accept orders at no cost. help

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the error message you're encountering, it seems that your Stripe API version is outdated and doesn't support applying promo codes that reduce the total cost to zero. To resolve this issue, you need to update your Stripe API version to 2023-08-16 or later. Here's how you can do this in your Wasp project: 1. Locate your Stripe configuration in your project. This is typically in the stripe.ts file or wherever you initialize the Stripe client. 2. Update the Stripe API version when initializing the Stripe client. Here's an example of how you might do this:

import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
  apiVersion: '2023-08-16', // Update this line
});

import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
  apiVersion: '2023-08-16', // Update this line
});

3. After updating the API version, make sure to test your Stripe integration thoroughly to ensure everything still works as expected. If you're using the OpenSaaS template, you might need to update the template itself. In that case, you should check the OpenSaaS GitHub repository (https://github.com/wasp-lang/open-saas) for the latest version and update your project accordingly. Remember to also update your Stripe webhook configuration to match this new API version. You can do this in the Stripe Dashboard under Developers > Webhooks. If you're still encountering issues after updating the API version, please provide more details about your specific setup and the full error message you're receiving. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @NEROX, 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?

NEROXOP•3w ago

@kapa.ai how to update stripe api version I'm using "2022-11-15", if I just update the apiVersion field it gives me an: [ Wasp ] ext-src/payment/stripe/stripeClient.ts(11,3): error TS2322: Type '"2023-08-16"' is not assignable to type '"2022-11-15"'. ❌ --- [Error] Your wasp project failed to compile: ------------------------------- - SDK build failed with exit code: 2 How can I archieve this correctly?

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the error message you're encountering, it seems that the Stripe API version is defined as a specific type in your Wasp project, which is causing a TypeScript error when you try to update it. To correctly update the Stripe API version in your Wasp project, you'll need to follow these steps: 1. First, locate the file where the Stripe client is initialized. Based on your error message, this is likely in ext-src/payment/stripe/stripeClient.ts. 2. In this file, you'll need to update not just the apiVersion field, but also the type definition for the Stripe instance. Here's how you might do this:

import Stripe from 'stripe';

// Update the type definition to include the new API version
type StripeType = Stripe & { apiVersion: '2023-08-16' };

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
  apiVersion: '2023-08-16',
}) as StripeType;

export default stripe;

import Stripe from 'stripe';

// Update the type definition to include the new API version
type StripeType = Stripe & { apiVersion: '2023-08-16' };

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
  apiVersion: '2023-08-16',
}) as StripeType;

export default stripe;

3. After making these changes, you'll need to update any other files that import or use this Stripe client to expect the new API version. 4. If you're using a specific version of the OpenSaaS template, you might need to update the template itself. Check the OpenSaaS GitHub repository (https://github.com/wasp-lang/open-saas) for the latest version and update your project accordingly. 5. After making these changes, run wasp start again to recompile your project. If you're still encountering issues after making these changes, it's possible that other parts of your project are still expecting the old API version. In that case, you might need to search your project for other occurrences of '2022-11-15' and update them as well. Remember to also update your Stripe webhook configuration in the Stripe Dashboard to match this new API version. If you continue to face problems, you might want to consult the Wasp documentation (https://wasp-lang.dev/docs) or reach out to the Wasp community for more specific guidance on updating dependencies in Wasp projects. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @NEROX, 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?

NEROXOP•3w ago

@kapa.ai how can I know my stripe cli version?

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To check your Stripe CLI version, you can use the following command in your terminal:

stripe --version

stripe --version

This command will display the current version of the Stripe CLI installed on your system. It's worth noting that the Stripe CLI is a separate tool from the Stripe API version used in your Wasp project. The CLI is used for local development and testing, while the API version is specified in your code when interacting with Stripe's services. If you're using the Stripe CLI for local development and webhook testing with your Wasp project, as mentioned in the OpenSaaS Stripe testing guide (https://docs.opensaas.sh/guides/stripe-testing/), it's a good practice to keep your CLI up to date. You can update the Stripe CLI using your system's package manager or by following the instructions on the Stripe CLI GitHub repository (https://github.com/stripe/stripe-cli). Remember, the Stripe CLI version doesn't necessarily need to match the API version you're using in your code, but keeping it updated ensures you have access to the latest features and bug fixes for local development and testing. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @NEROX, 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?

NEROXOP•3w ago

I'm not pretty sure how to update the version of Stripe api.

NEROXOP•3w ago

@kapa.ai Does wasp latest version support Stripe Api version 2023-08-16?

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources provided, I don't have specific information about whether the latest version of Wasp supports Stripe API version 2023-08-16. However, I can provide some relevant information: 1. The latest version of Wasp is 0.13.X, as mentioned in the migration guide (https://wasp-lang.dev/docs/migrate-from-0-11-to-0-12). 2. Wasp uses Stripe for payment processing in its OpenSaaS template, but the exact Stripe API version supported is not explicitly stated in the provided knowledge sources. 3. In our previous conversation, we discussed updating the Stripe API version in a Wasp project, which suggests that Wasp allows for some flexibility in the Stripe API version used. To get a definitive answer, you would need to: 1. Check the latest Wasp documentation or release notes, which are not provided in the current knowledge sources. 2. Examine the OpenSaaS template in the latest Wasp version to see which Stripe API version it uses by default. 3. Or, reach out to the Wasp development team or community for the most up-to-date information. If you need to use Stripe API version 2023-08-16 in your Wasp project, you might be able to update it manually as we discussed earlier, but you should test thoroughly to ensure compatibility with the latest Wasp version. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @NEROX, 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?

NEROXOP•3w ago

maybe acomplished, pushing to prod

💡Curious fact to note: If you create a coupon that lowers the total below a minimum (I haven't found out what it is), it tells you only that the coupon is invalid and nothing else. 100% discount is valid with the latest Stripe version as I pointed below in my solution.

Vinny (@Wasp)•3w ago

noice!

NEROXOP•3w ago

✅ Acomplished in prod! (thx to Kapa and Cursor) To document it is a bit difficult for me because of the amount of things I have been changing and trying but: npm install stripe@latest To use apiVersion: '2024-11-20.acacia' My Stripe version in package-lock.json is "stripe": "^17.4.0", Also I will share my modified files, maybe helps. PS: If you read this and would like to learn Growth Seo tactics, 90% off with WASP90 at https://whitehatseotactics.com :smugboi: PS2: if you want to contribute with some feedback or comments you can use code WASP to access for free ALL tactics :boi: (To show that also a 100% coupon code works!)

operations.ts

stripeClient.ts

Vinny (@Wasp)•3w ago

Nice. thanks for supplying the version numbers you used.

Gaming

Programming

Stripe: Coupon codes at checkout