#ishu-gupta_error

1 messages ¡ Page 1 of 1 (latest)

delicate portalBOT
#

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1231815477072756798

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

rare field
#

app.post('/create-payment-intent',async(req,res) => {
try{
if(req.method !== 'POST') return res.status(400);
const {planId,planTitle,Email,Name,paymentMethod} = req.body;

const customer = await stripe.customers.create({
  email: Email,
  name: Name,
  payment_method: paymentMethod,
  invoice_settings: {default_payment_method: paymentMethod},
})

const product = await stripe.products.create({
  name:`${planTitle} Plan`,
})

const subscription = await stripe.subscriptions.create({
  customer:customer.id,
  items: [
    {
      price_data: {
        currency:'INR',
        product: product.id,
        unit_amount: calculatePriceInCents(planId),
        recurring: {
          interval: 'month',
        },
      },
    },
  ],
  payment_settings: {
    payment_method_options: ['card'],
    save_default_payment_method:'on_subscription',
  },
  expand: ['latest_invoice.payment_intent'],
}); 
res.json({
  message: 'Subscription sucessfull',
  clientSecret: subscription.latest_invoice.payment_intent.client_secret,
  subscriptionId: subscription.id,
})

}catch(err){
console.log(err);
res.status(500).send('payment failed,' + err.message);
}

});

function calculatePriceInCents(planId) {
const planPrices = {
"1": 9900, // Replace with actual prices in cents
"2": 14900,
"3": 59900,
};
return planPrices[planId] || 0; // Return 0 for unknown plans
}

This is my complete stripe back-end

sturdy crystalBOT
graceful root
#

Hi there, can you print out the object at SubscriptionForm.tsx:62:37) ?

rare field
#

import { CardElement, useStripe, useElements } from '@stripe/react-stripe-js'
import { useForm } from "@tanstack/react-form";
import { valibotValidator } from "@tanstack/valibot-form-adapter";
import { string, email, minLength } from "valibot";

export function SubscriptionForm({plan}) {

const stripe = useStripe();
const elements = useElements();
const planData = plan ;
const planId = planData.charAt(0);
const planTitle = planData.slice(2)

const form = useForm({
defaultValues: {
  Name: "",
  Email: "",
},
onSubmit: async ({value}) => { 
  try {
    const paymentMethod = await stripe.createPaymentMethod({
      type: 'card',
      card: elements.getElement("card"),
    });

console.log(value)
const jsonData = JSON.stringify({
planId: planId,
planTitle: planTitle,
Name: value.Name,
Email: value.Email,
});
console.log("JSON data:", jsonData);

    const response = await fetch('/create-payment-intent',{
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ 
        planId: planId, 
        planTitle: planTitle, 
        Name:value.Name, 
        Email: value.Email }),
  });
    if(response.ok)return alert('Payment Unsucessful!')
    const data = await response.json();
   const confirm = await stripe.confirmCardPayment(data.clientSecret)

if(confirm.error) return alert('Payment Unsucessful!')
alert('Payment Successful! Subscription Active')

  }catch(err){
    console.log(err);
    alert('payment failed,' + err.message);    
  }
},
validatorAdapter: valibotValidator,

});
return (
<>
<div className="h-screen w-screen bg-white-900 flex justify-center items-center">

#

I am already doing that here as you can see above

graceful root
#

This json object looks valid.

rare field
#

The. What is the problem

graceful root
#

I'm not sure, it's thrown from FormApi.handleSubmit, have you checked the relevant code?

rare field
#

What you mean can you explain

graceful root
#

Have you check the implementation of FormApi.handleSubmit? and see how it validate a json object.

rare field
#

No

#

what to do now what should I do

graceful root
#

I'd suggest you check the implementation of FormApi.handleSubmit and see how it validate json objects

#

Also ensure you pass a valid json object to this function

rare field
#

Hey means my base level implementation is correct there is a problem in terms of a particular library not in my stripe implementation actually i mean not in my backend or in my stripe implementation right

#

Ok i will look on to that

rare field
#

I want to ask one more question is it a good idea to use a library for creating subscription forms with stripe becoz i searched a lot but got no example or any code snippet based on. An y library like react hook form or tanstack form or any other for actually creating a subscription form so should I create a custom code subscription form or what explain please also I am unable to understand the implementation correctly but what i understood is that there is no problem with the. Implementation as the type of data passed in it is same to what we type to the input I mean in the implementation it is of Type T<>

if I am wrong in my understanding then do tell also tell should I create a custom logic subscriptions form reply please

graceful root