条纹优惠券验证

Question

I want the user to be able to add a coupon if they have one and by pressing a button the code should check if the coupon exists in my Stripe dashboard. so far I have done this(see code below), I think I'm not missing much but I can't figure out a way to send the validCoupon across from client side to server side and them being able to apply the discount there.

Cart.js (client side)

import React, {useRef, useState} from 'react';
import Link from 'next/link';
import {AiOutlineMinus, AiOutlinePlus, AiOutlineLeft, AiOutlineShopping} from 'react-icons/ai';
import {TiDeleteOutline} from 'react-icons/ti';
import toast from 'react-hot-toast';

import {useStateContext} from '../context/StateContext';
import {urlFor} from '../lib/client';
import getStripe from '../lib/getStripe';

const Cart = () => {
    const cartRef = useRef();
    const {
        totalPrice,
        totalQuantities,
        cartItems,
        setShowCart,
        toggleCartItemQuanitity,
        onRemove
    } = useStateContext();
    const [coupontext, setCouponText] = useState('');
    const [isCouponAdded, setisCouponAdded] = useState(false);
    const [validCoupon, setValidCoupon] = useState("");

    const handleChange = (event) => {
        setCouponText(event.target.value);
    };

    const checkCoupon = async () => {
      if(!isCouponAdded){
        const response = await fetch('https://api.stripe.com/v1/coupons', {
            headers: {
                'Authorization': `Bearer ${process.env.NEXT_PUBLIC_STRIPE_SECRET_KEY}`
            }
        });

        if (!response.ok) {
            toast.error("Error fetching coupons");
            return;
        }

        const {data} = await response.json();
        const validcoupon = data.find((c) => c.id === coupontext);
        if (validcoupon) {
            toast.success("Coupon is valid!");
            setValidCoupon(validcoupon);
            setisCouponAdded(true);
        } else {
            toast.error("Coupon is invalid!");
        }
      }else{
        toast.success("Coupon already added!");
      }
    
    }

    const handleCheckout = async () => {
        const stripeClient = await getStripe();

        const response = await fetch('/api/stripe', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(cartItems)
        });

        if (response.statusCode === 500)  
            return;
        
        const data = await response.json();

        toast.loading('Redirecting...');

        stripeClient.redirectToCheckout({sessionId: data.id});
    }

.....

pages/api/stripe.js

import Stripe from 'stripe';

const stripe = new Stripe(process.env.NEXT_PUBLIC_STRIPE_SECRET_KEY);

export default async function handler(req, res) {
  if (req.method === 'POST') {
    try {
      const params = {
        submit_type: 'pay',
        mode: 'payment',
        payment_method_types: ['card'],
        billing_address_collection: 'auto',
        shipping_address_collection: {
        allowed_countries: ["PT"],
      },
        shipping_options: [
          { shipping_rate: 'shr_1MMq2YJFNgzNJo7sbwDNnqhz' },
          { shipping_rate: "shr_1MMq3iJFNgzNJo7s2nVvfATq"}
        ],
        line_items: req.body.map((item) => {
          const img = item.image[0].asset._ref;
          const newImage = img.replace('image-', 'https://cdn.sanity.io/images/REDACTED/production/').replace('-png', '.png');
            
          return {
            price_data: { 
              currency: 'eur',
              product_data: { 
                name: item.name,
                images: [newImage],
              },
              unit_amount: item.price * 100,
            },
            adjustable_quantity: {
              enabled:true,
              minimum: 1,
            },
            quantity: item.quantity
          }
        }),
        success_url: `${req.headers.origin}/success`,
        cancel_url: `${req.headers.origin}/`,
      }

      // Create Checkout Sessions from body params.
      const session = await stripe.checkout.sessions.create(params);

      res.status(200).json(session);
    } catch (err) {
      res.status(err.statusCode || 500).json(err.message);
    }
  } else {
    res.setHeader('Allow', 'POST');
    res.status(405).end('Method Not Allowed');
  }
}

//////////////////////////////////////// UPDATE /////////////////////////////////////////

Ok so now I'm adding validCoupon object to the cartsItems and passing in the body. on the server side I'm having issues because no discount is being applied ever, I don't know why but i fell that I'm really close to solving this, just missing something simple.

Cart.js

import React, {useRef, useState} from 'react';
import Link from 'next/link';
import {AiOutlineMinus, AiOutlinePlus, AiOutlineLeft, AiOutlineShopping} from 'react-icons/ai';
import {TiDeleteOutline} from 'react-icons/ti';
import toast from 'react-hot-toast';

import {useStateContext} from '../context/StateContext';
import {urlFor} from '../lib/client';
import getStripe from '../lib/getStripe';

const Cart = () => {
    const cartRef = useRef();
    const {
        totalPrice,
        totalQuantities,
        cartItems,
        setShowCart,
        toggleCartItemQuanitity,
        onRemove
    } = useStateContext();
    const [coupontext, setCouponText] = useState('');
    const [isCouponAdded, setisCouponAdded] = useState(false);
    const [validCoupon, setValidCoupon] = useState(null);

    const handleChange = (event) => {
        setCouponText(event.target.value);
    };

    const checkCoupon = async () => {
      if(!isCouponAdded){
        const response = await fetch('https://api.stripe.com/v1/coupons', {
            headers: {
                'Authorization': `Bearer ${process.env.NEXT_PUBLIC_STRIPE_SECRET_KEY}`
            }
        });

        if (!response.ok) {
            toast.error("Error fetching coupons");
            return;
        }

        const {data} = await response.json();
        console.log(data);
        const validcoupon = data.find((c) => c.id === coupontext);
        if (validcoupon) {
            toast.success("Coupon is valid!");
            setValidCoupon(validcoupon);
            setisCouponAdded(true);
        } else {
            toast.error("Coupon is invalid!");
        }
      }else{
        toast.success("Coupon already added!");
      }
    
    }

    const handleCheckout = async () => {
        const stripeClient = await getStripe();
        cartItems['validCoupon'] = validCoupon;
        console.log(cartItems);
        const response = await fetch('/api/stripe', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(cartItems)
        });

        if (response.statusCode === 500)  
            return;
        
        const data = await response.json();

        toast.loading('Redirecting...');

        stripeClient.redirectToCheckout({sessionId: data.id});
}

pages/api/stripe.js

import Stripe from 'stripe';

const stripe = new Stripe(process.env.NEXT_PUBLIC_STRIPE_SECRET_KEY);

export default async function handler(req, res) {
  if (req.method === 'POST') {
    try {
      
      const discounts = [];
    
      if(req.body.validCoupon && req.body.validCoupon.id) {
        discounts.push({coupon: req.body.validCoupon.id});
      }

      
      let shipping_options = [];

      
      const line_items = req.body;
      let total_amount = 0;
      for (const item of line_items) {
        total_amount += item.price * item.quantity;
      }

      
      if (total_amount >= 40) {
        shipping_options = [
          { shipping_rate: 'shr_1MMq3iJFNgzNJo7s2nVvfATq' },
        ];
      } else {
        shipping_options = [
          { shipping_rate: "shr_1MMq2YJFNgzNJo7sbwDNnqhz"}
        ];
      }
      

      const params = {
        submit_type: 'pay',
        mode: 'payment',
        discounts: discounts,
        payment_method_types: ['card'],
        billing_address_collection: 'auto',
        shipping_address_collection: {
        allowed_countries: ["PT"],
      },
      shipping_options: shipping_options,
        line_items: req.body.map((item) => {
          const img = item.image[0].asset._ref;
          const newImage = img.replace('image-', 'https://cdn.sanity.io/images/REDACTED/production/').replace('-png', '.png');
            
          return {
            price_data: { 
              currency: 'eur',
              product_data: { 
                name: item.name,
                images: [newImage],
              },
              unit_amount: item.price * 100,
            },
            quantity: item.quantity
          }
        }),
        success_url: `${req.headers.origin}/success`,
        cancel_url: `${req.headers.origin}/`,
      }

      // Create Checkout Sessions from body params.
      const session = await stripe.checkout.sessions.create(params);

      res.status(200).json(session);
    } catch (err) {
      res.status(err.statusCode || 500).json(err.message);
    }
  } else {
    res.setHeader('Allow', 'POST');
    res.status(405).end('Method Not Allowed');
  }
}

Answer 1

You need to pass coupon to server by adding it to cartItems and you need to pass stripe coupon name in discount array in session params

import React, {useRef, useState} from 'react';
import Link from 'next/link';
import {AiOutlineMinus, AiOutlinePlus, AiOutlineLeft, AiOutlineShopping} from 'react-icons/ai';
import {TiDeleteOutline} from 'react-icons/ti';
import toast from 'react-hot-toast';

import {useStateContext} from '../context/StateContext';
import {urlFor} from '../lib/client';
import getStripe from '../lib/getStripe';

const Cart = () => {
    const cartRef = useRef();
    const {
        totalPrice,
        totalQuantities,
        cartItems,
        setShowCart,
        toggleCartItemQuanitity,
        onRemove
    } = useStateContext();
    const [coupontext, setCouponText] = useState('');
    const [isCouponAdded, setisCouponAdded] = useState(false);
    const [validCoupon, setValidCoupon] = useState("");

    const handleChange = (event) => {
        setCouponText(event.target.value);
    };

    const checkCoupon = async () => {
      if(!isCouponAdded){
        const response = await fetch('https://api.stripe.com/v1/coupons', {
            headers: {
                'Authorization': `Bearer ${process.env.NEXT_PUBLIC_STRIPE_SECRET_KEY}`
            }
        });

        if (!response.ok) {
            toast.error("Error fetching coupons");
            return;
        }

        const {data} = await response.json();
        const validcoupon = data.find((c) => c.id === coupontext);
        if (validcoupon) {
            toast.success("Coupon is valid!");
            setValidCoupon(validcoupon);
            setisCouponAdded(true);
        } else {
            toast.error("Coupon is invalid!");
        }
      }else{
        toast.success("Coupon already added!");
      }
    
    }

    const handleCheckout = async () => {
        const stripeClient = await getStripe();
        cartItems['validCoupon'] = validCoupon;
        const response = await fetch('/api/stripe', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(cartItems)
        });

        if (response.statusCode === 500)  
            return;
        
        const data = await response.json();

        toast.loading('Redirecting...');

        stripeClient.redirectToCheckout({sessionId: data.id});
    }

.....

const stripe = new Stripe(process.env.NEXT_PUBLIC_STRIPE_SECRET_KEY);

export default async function handler(req, res) {
  if (req.method === 'POST') {
    try {
      const params = {
        submit_type: 'pay',
        mode: 'payment',
        discounts: [
           {
             coupon: "Your_coupon_name_asper_stripe"
           }
        ]
        payment_method_types: ['card'],
        billing_address_collection: 'auto',
        shipping_address_collection: {
        allowed_countries: ["PT"],
      },
        shipping_options: [
          { shipping_rate: 'shr_1MMq2YJFNgzNJo7sbwDNnqhz' },
          { shipping_rate: "shr_1MMq3iJFNgzNJo7s2nVvfATq"}
        ],
        line_items: req.body.map((item) => {
          const img = item.image[0].asset._ref;
          const newImage = img.replace('image-', 'https://cdn.sanity.io/images/REDACTED/production/').replace('-png', '.png');
            
          return {
            price_data: { 
              currency: 'eur',
              product_data: { 
                name: item.name,
                images: [newImage],
              },
              unit_amount: item.price * 100,
            },
            adjustable_quantity: {
              enabled:true,
              minimum: 1,
            },
            quantity: item.quantity
          }
        }),
        success_url: `${req.headers.origin}/success`,
        cancel_url: `${req.headers.origin}/`,
      }

      // Create Checkout Sessions from body params.
      const session = await stripe.checkout.sessions.create(params);

      res.status(200).json(session);
    } catch (err) {
      res.status(err.statusCode || 500).json(err.message);
    }
  } else {
    res.setHeader('Allow', 'POST');
    res.status(405).end('Method Not Allowed');
  }
}

Answer 2

I included the validCoupon inside the body of the POST request.

const handleCheckout = async () => {
        const stripeClient = await getStripe();
        const response = await fetch('/api/stripe', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
              cartItems,
              validCoupon
          })
        });

        if (response.statusCode === 500)  
            return;
        
        const data = await response.json();

        toast.loading('Redirecting...');

        stripeClient.redirectToCheckout({sessionId: data.id});
    }

then on the server side I pulled each object out of the body like this.

const {cartItems, validCoupon} = req.body;

and then used each object separately.

validCoupon.id  or cartItems.map