arnaud-payment-general

[elfin drift]

You're getting errors because email is not an available parameter when creating a Payment Intent

Instead, you should be setting that on the Customer

[cyan schooner]

Mmm ok I see but how would I do that please ?

[elfin drift]

Actually it looks like you're already setting it on the Customer, so all you need to do is remove it from your Payment intent code

[cyan schooner]

so I just have to remove this line :

    email: email,

So I will get this :

try {
// Créez un PaymentIntent avec Stripe
const customer = await stripe.customers.create({
email: email,
});
const paymentIntent = await stripe.paymentIntents.create({
customer: customer.id,
amount: totalAmount, // Montant en cents (par exemple, 10,00 $)
currency: "eur",
description: Commande de ${cardholderName}, // Description de la commande
});

instead of that :

try {
  // Créez un PaymentIntent avec Stripe
  const customer = await stripe.customers.create({
    email: email,
  });
  const paymentIntent = await stripe.paymentIntents.create({
    customer: customer.id,
    email: email,
    amount: totalAmount, // Montant en cents (par exemple, 10,00 $)
    currency: "eur",
    description: `Commande de ${cardholderName}`, // Description de la commande
  });

And thats it ?

seems to easy to be true ahah

[elfin drift]

yup try it out

[cyan schooner]

Im trying I let u know

It seems to work its amazing thank you !

But why do I have 3 logs on my dashboard instead of only 1 ? Is that showing an issue ?

AUJOURD'HUI
200 OK
POST
/v1/payment_intents/pi_3OUutSEHjHfYLKwk09RFAQc5/confirm
18:39:47
200 OK
POST
/v1/payment_intents
18:39:46
200 OK
POST
/v1/customers
18:39:46

[elfin drift]

You're making three separate request to the API, right? Why are you expecting only 1?

[cyan schooner]

Am I ?
What do you mean this is only 1 payment right ?
So how is that 3 separate requests ?

Im sorry Im not an expert

[elfin drift]

You're making 1 payment, but you've done three separate requests to get there:

1. Create the Customer
2. Create the Payment Intent
3. Confirm the Payment Intent

Each of those is a separate request to Stripe

If you just want to look at your payments you should be looking at https://dashboard.stripe.com/test/payments instead

[cyan schooner]

Ok thank you very much man I understand way better now !

But I have another question if you dont mind :

right now Im using the cardElement in my frontend which is like this :

      <CardElement options={cardStyle} />

Someone told me the PayElement was better is it true ?
Because there is Google Pay included inside ?

Do you advise me to stick with CardElement as its working now or should I try to move to PayElement ?

Thanks again for your time man 🙂

[elfin drift]

I'd recommend moving to Payment Element - it'll be easier for you to follow our docs since most of them are centered around payment element now and if you want to add more payment method types in the future it'll be much easier

[dense birch]

arnaud-payment-general

[cyan schooner]

Ok I understand but when Im trying to change it as we speak I get this error :

In order to create a payment element, you must pass a clientSecret or mode when creating the Elements group.

e.g. stripe.elements({clientSecret: "{{CLIENT_SECRET}}"})
IntegrationError: In order to create a payment element, you must pass a clientSecret or mode when creating the Elements group.

So I dont know how to deal with that ...

[elfin drift]

Are you following one of our guides? Like https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements

[cyan schooner]

yes I am but the problem is Im not using express in my application, Im storing my products on firebase ... So if I follow your guides its written :

const express = require('express');
const app = express();

app.get('/secret', async (req, res) => {
const intent = // ... Fetch or create the PaymentIntent
res.json({client_secret: intent.client_secret});
});

app.listen(3000, () => {
console.log('Running on port 3000');
});

(async () => {
const response = await fetch('/secret');
const {client_secret: clientSecret} = await response.json();
// Render the form using the clientSecret
})();

This is why Im having troubles and Im asking you directly, sorry for bothering you

[elfin drift]

Even if you're storing your products on firebase the general idea is the same - you need to be calling to your own server to get back a client secret that you'll use to create+mount the Payment Element

[cyan schooner]

well ok maybe, so here is my file :

What do I have to add if I want to migrate to PaymentElement ?

[elfin drift]

It'll be mostly your client-side code that'll have to change, not your server

[cyan schooner]

really ? well Do you have a new model of handleFormSubmit in your guides byt whitch I can replace it ?

[elfin drift]

Let's back up - after reading through https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements do you generally understand how the flow works?

[cyan schooner]

well Im sorry maybe Im too dumb but I dont understand what I need to do .
So I will stick to CardElement for now.

Thanks again for your help, I appreciated 😉