#Aimer - Fronted + Backend

1 messages · Page 1 of 1 (latest)

wispy pivot
#

Can you provide an example of what you mean?

vestal adder
#

i watch a youtube videos

#

from your channel

#

which doesnt really use that much of the node js

#

i also once did a payment method which use node backend

#

my code is like this

#

where the payment is done from express server

#

is there any different

wispy pivot
#

Unfortunately I'm not familiar with that video.

#

Is your code producing an error?

vestal adder
#

nono im just confuse

#

thats all

#

ok i got the source code

wispy pivot
#

The image you shared is focused on the front-end part

vestal adder
#

for the one in the video

#

its this

wispy pivot
#

But the payment intent will still need to be generated on the server

vestal adder
#

he only have this in the server

#

just the price

# 
import Stripe from "stripe";

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

export default async (req, res) => {
  if (req.method === "POST") {
    try {
      const { amount } = req.body;
      // Psst. For production-ready applications we recommend not using the
      // amount directly from the client without verifying it first. This is to
      // prevent bad actors from changing the total amount on the client before
      // it gets sent to the server. A good approach is to send the quantity of
      // a uniquely identifiable product and calculate the total price server-side.
      // Then, you would only fulfill orders using the quantity you charged for.

      const paymentIntent = await stripe.paymentIntents.create({
        amount,
        currency: "usd"
      });

      res.status(200).send(paymentIntent.client_secret);
    } catch (err) {
      res.status(500).json({ statusCode: 500, message: err.message });
    }
  } else {
    res.setHeader("Allow", "POST");
    res.status(405).end("Method Not Allowed");
  }
};
© 2022 GitHub, Inc.
Terms
#

This is the front end part that

 const handleFormSubmit = async ev => {
    ev.preventDefault();

    const billingDetails = {
      name: ev.target.name.value,
      email: ev.target.email.value,
      address: {
        city: ev.target.city.value,
        line1: ev.target.address.value,
        state: ev.target.state.value,
        postal_code: ev.target.zip.value
      }
    };

    setProcessingTo(true);

    const cardElement = elements.getElement("card");

    try {
      const { data: clientSecret } = await axios.post("/api/payment_intents", {
        amount: price * 100
      });

      const paymentMethodReq = await stripe.createPaymentMethod({
        type: "card",
        card: cardElement,
        billing_details: billingDetails
      });

      if (paymentMethodReq.error) {
        setCheckoutError(paymentMethodReq.error.message);
        setProcessingTo(false);
        return;
      }

      const { error } = await stripe.confirmCardPayment(clientSecret, {
        payment_method: paymentMethodReq.paymentMethod.id
      });

      if (error) {
        setCheckoutError(error.message);
        setProcessingTo(false);
        return;
      }

      onSuccessfulCheckout();
    } catch (err) {
      setCheckoutError(err.message);
    }
  };
#

he only use the backend to generate a client_secret which will be process on the front end

#

i use other npm package called for react which is called react-stripe-checkout

#

it has different style of handling payment

wispy pivot
#

Okay so what's the question?

#

The backend snippet generates a charge using a Payment Intent. It sounds like your code uses the Stripe Checkout Session

vestal adder
#

whats the different

wispy pivot
vestal adder
#

ty sir

#

you are a live savior

#

great day ahead

wispy pivot
#

👍

vestal adder
#

ok 1 more questiobn

#

what is price id

wispy pivot
#

The price ID is an ID of a price record in your Stripe account. For example:

Screen_Shot_2022-02-04_at_12.11.43_PM.png
vestal adder
#

ty