djk3600 | Stripe Developers | Page 1

sudden bobcatBOT Dec 19, 2022, 5:24 PM

#

heavy stag Dec 19, 2022, 5:24 PM

#

What's your Q?

tall nest Dec 19, 2022, 5:25 PM

#

hey snufkin

#

thanks for taking it on so fast

#

okay so

#

first question

#

How do I send an order confirmation to a user after they have ordered my product?

heavy stag Dec 19, 2022, 5:32 PM

#

Well the most straightforward would be a Receipt Email. But how are your customers ordering your product?

tall nest Dec 19, 2022, 5:38 PM

#

So they are ordering by adding it to basket and purchasing via stripe

#

Very classic e-commerce

#

I just want the customer to get a confirmation email once they have ordered

#

something like

#

'
Hi Joe Bloggs,

Thanks so much for your order.
Which comes to a total of £15.99'

heavy stag Dec 19, 2022, 5:39 PM

#

You can customize the email receipt and read about it here: https://stripe.com/docs/receipts
I still think that sounds like the best fit for what you are trying to do

tall nest Dec 19, 2022, 5:40 PM

#

oh wow! you can automatically enable reciepts

#

like so

#

heavy stag Dec 19, 2022, 5:41 PM

#

Yup

tall nest Dec 19, 2022, 5:41 PM

#

(I just enabled) with this send a confirmation to a customer then 🙂

heavy stag Dec 19, 2022, 5:41 PM

#

You can test sending a receipt to yourself first

tall nest Dec 19, 2022, 5:44 PM

#

damn it didnt come through

#

I definitely saved it as well

heavy stag Dec 19, 2022, 5:45 PM

#

Can you try updating the Payment Intent with a receipt_email parameter?

tall nest Dec 19, 2022, 5:45 PM

#

okay brilliant this is what I was about to ask about!

#

const paymentIntent = await stripe.paymentIntents.create({
    amount: calculateOrderAmount(items),
    currency: "gbp",
    automatic_payment_methods: {
      enabled: true,
    },
    description,
    shipping: {
      address: {
        line1: shipping.line1,
        line2: shipping.line2,
        city: shipping.city,
        country: shipping.country,
        postal_code: shipping.postal_code,
      },
      name: shipping.name,
      phone: shipping.phone,
    },
    // receipt_email:
  });

#

what does in reciept_email ?

heavy stag Dec 19, 2022, 5:47 PM

#

We explain this in our docs

When creating a PaymentIntent, include your customer’s email address as a value for the receipt_email parameter. Receipts are only sent when a successful payment has been made—no receipt is sent if the payment fails or is declined.

tall nest Dec 19, 2022, 5:48 PM

#

oooooh I see!

#

it needs to be added into the checkout form

#

the same way,

line1
line2
city
country
postal_code

#

have been??

heavy stag Dec 19, 2022, 5:51 PM

#

No, you add it when you create (or update) the Payment Intent via the API

tall nest Dec 19, 2022, 5:55 PM

#

okay I dont understand at all

#

lol

#

useEffect(() => {
    // Create PaymentIntent as soon as the page loads
    fetch("http://localhost:4242/create-payment-intent", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        items: cartItems,
        userEmail: customerEmail,
        shipping: shippingAddress,
        billing: billingAddress,
        description,
      }),
    })
      .then((res) => {
        if (res.ok) {
          return res.json();
        }
        return res.json().then((json) => Promise.reject(json));
      })
      .then((data) => {
        setClientSecret(data.clientSecret);
      })
      .catch(() => {
        setMessage("Failed to initialize checkout");
        toast.error("Something went wrong!!!");
      });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

#

This payment intent?

#

okay so to explain

#

This is the payment intent on the server

app.post("/create-payment-intent", async (req, res) => {
  const { items, shipping, description } = req.body;

  // Create a PaymentIntent with the order amount and currency
  const paymentIntent = await stripe.paymentIntents.create({
    amount: calculateOrderAmount(items),
    currency: "gbp",
    automatic_payment_methods: {
      enabled: true,
    },
    description,
    shipping: {
      address: {
        line1: shipping.line1,
        line2: shipping.line2,
        city: shipping.city,
        country: shipping.country,
        postal_code: shipping.postal_code,
      },
      name: shipping.name,
      phone: shipping.phone,
    },
    // receipt_email: customerEmail
  });

#

This is the payment intent in the front end

useEffect(() => {
    // Create PaymentIntent as soon as the page loads
    fetch("http://localhost:4242/create-payment-intent", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        items: cartItems,
        userEmail: customerEmail,
        shipping: shippingAddress,
        billing: billingAddress,
        description,
      }),
    })
      .then((res) => {
        if (res.ok) {
          return res.json();
        }
        return res.json().then((json) => Promise.reject(json));
      })
      .then((data) => {
        setClientSecret(data.clientSecret);
      })
      .catch(() => {
        setMessage("Failed to initialize checkout");
        toast.error("Something went wrong!!!");
      });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

#

you still there?

heavy stag Dec 19, 2022, 6:03 PM

#

Sorry it's really busy right. now

tall nest Dec 19, 2022, 6:04 PM

#

Yeah I just noticed, you are quite literally the only person answering everyones queries

#

no worries, take your time! 🙂

heavy stag Dec 19, 2022, 6:04 PM

#

So what I'm saying is you provide the Customer Email when you create the Payment Intent on the server in the receipt_email parameter

tall nest Dec 19, 2022, 6:04 PM

#

okay awesome

#

but where am I grabbing the customer email

#

because currently when the customer is ordering a product, I am not taking their email in

heavy stag Dec 19, 2022, 6:06 PM

#

Ah. Okay what front-end are you using to collect payment?

tall nest Dec 19, 2022, 6:06 PM

#

I am using, react and of course stripe

#

so what I am doing is

#

taking this

const initialAddressState = {
  name: "",
  line1: "",
  line2: "",
  postal_code: "",
  country: "",
  phone: "",
};

#

saving in redux

  const handleSubmit = (e) => {
    e.preventDefault();
    dispatch(SAVE_SHIPPING_ADDRESS(shippingAddress));
    dispatch(SAVE_BILLING_ADDRESS(billingAddress));
    navigate("/checkout");
  };

#

then in checkout selecting this

#

  const billingAddress = useSelector(selectBillingAddress);

  useEffect(() => {
    // Create PaymentIntent as soon as the page loads
    fetch("http://localhost:4242/create-payment-intent", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        items: cartItems,
        userEmail: customerEmail,
        shipping: shippingAddress,
        billing: billingAddress,
        description,
      }),
    })
      .then((res) => {
        if (res.ok) {
          return res.json();
        }
        return res.json().then((json) => Promise.reject(json));
      })
      .then((data) => {
        setClientSecret(data.clientSecret);
      })
      .catch(() => {
        setMessage("Failed to initialize checkout");
        toast.error("Something went wrong!!!");
      });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

#

but naturally I need the order email, is it a good idea to have them add it say here

#

and that way I can send it to my server.js much like, line1, line2 etc?

heavy stag Dec 19, 2022, 6:12 PM

#

Okay so you are using the Address Element also?

tall nest Dec 19, 2022, 6:13 PM

#

This is my payment intent on my server.js

app.post("/create-payment-intent", async (req, res) => {
  const { items, shipping, description } = req.body;

  // Create a PaymentIntent with the order amount and currency
  const paymentIntent = await stripe.paymentIntents.create({
    amount: calculateOrderAmount(items),
    currency: "gbp",
    automatic_payment_methods: {
      enabled: true,
    },
    description,
    shipping: {
      address: {
        line1: shipping.line1,
        line2: shipping.line2,
        city: shipping.city,
        country: shipping.country,
        postal_code: shipping.postal_code,
      },
      name: shipping.name,
      phone: shipping.phone,
    },
    receipt_email: customerEmail
  });

  res.send({
    clientSecret: paymentIntent.client_secret,
  });
});

heavy stag Dec 19, 2022, 6:14 PM

#

The Payment Element will collect the customer's email when it is required by the payment method chosen. So if you want to be able to send receipt emails you'll need to collect it yourself to be certain it's always included.

tall nest Dec 19, 2022, 6:14 PM

#

ahhhh

#

so collect it here

#

also is there a specific way it needs to be formatted?

#

or is something like this okay

shipping: {
      address: {
        line1: shipping.line1,
        line2: shipping.line2,
        city: shipping.city,
        country: shipping.country,
        postal_code: shipping.postal_code,
      },
      name: shipping.name,
      phone: shipping.phone,
    },
    receipt_email: customerEmail.information

heavy stag Dec 19, 2022, 6:17 PM

#

As long as that is a valid email address and a String value it should be fine

tall nest Dec 19, 2022, 6:17 PM

#

woooo!! okay I am gonna give it a go now my man

#

am I okay to message if I run into any issues??

#

thanks a ton for your help 🙂

heavy stag Dec 19, 2022, 6:18 PM

#

That's why we're here 🙂

#djk3600