cgourmelon | Stripe Developers | Page 1

edgy grottoBOT Apr 3, 2023, 12:24 PM

#

livid leaf Apr 3, 2023, 12:24 PM

#

Hi! What's the question?

primal lichen Apr 3, 2023, 12:24 PM

#

Hi Vanya, I'm tryong to post some metadata coming from my checkout page

#

I'm following this tutorial

#

https://stripe.com/docs/payments/accept-a-payment-deferred

Collect payment details before creating an Intent

Build an integration where you can render the Payment Element prior to creating a PaymentIntent or SetupIntent.

#

Everything works fine except for my custom inputs on my checkout page which I try to pass using stripe.confirmPayment

#

Here's my code :

#

// Confirm the PaymentIntent using the details collected by the Payment Element
const {error} = await stripe.confirmPayment({
elements,
clientSecret,
confirmParams: {
return_url: 'https://boutique.pompesfunebresdefrance.com/merci-2',
payment_method_data : {
billing_details : {
name : form.pff_fleurs_commandes_client_nom.value,
email : form.pff_fleurs_commandes_client_email.value,
phone : form.pff_fleurs_commandes_client_telephone.value,
address: {
line1: form.pff_fleurs_commandes_client_adresse_1.value,
line2: form.pff_fleurs_commandes_client_adresse_2.value,
city: form.pff_fleurs_commandes_client_ville.value,
postal_code: form.pff_fleurs_commandes_client_cp.value
}
},
metadata : {
'email' : form.pff_fleurs_commandes_client_email.value,
'nom' : form.pff_fleurs_commandes_client_nom.value,
'prenom' : form.pff_fleurs_commandes_client_prenom.value,
'address1' : form.pff_fleurs_commandes_client_adresse_1.value,
'address2' : form.pff_fleurs_commandes_client_adresse_2.value,
'city' : form.pff_fleurs_commandes_client_ville.value,
'postal_code' : form.pff_fleurs_commandes_client_cp.value
}
}
},
});

POMPES FUNEBRES DE FRANCE | Boutique de fleurs

Service de livraison de Fleurs en cérémonie - Remise en mains propres au maître de cérémonie - Fleurs Frâiches et de saisons - POMPES FUNÈBRES DE FRANCE

#

The billing details are coming through properly but not my metadata

#

Am I doing something wrong ?

livid leaf Apr 3, 2023, 12:29 PM

#

Could you please share an example PaymentIntent ID? pi_xxx

#

Also, where do you expect the metadata to be available?

primal lichen Apr 3, 2023, 12:31 PM

#

pi_3Mr1RpBCoEFG98lq1e7uMssB

#

I'm hoping to have it in the response of a payment_intent.succeeded

#

"latest_charge": "ch_3Mr1RpBCoEFG98lq1Xc4J3wE",
"livemode": false,
"metadata": {
},

#

in the metadata field

#

So I can retrieve the info on a webhook using for instance : $pff_fleurs_commandes_client_prenom = $event->data->object->metadata->prenom;

livid leaf Apr 3, 2023, 12:37 PM

#

You added the metadata to the payment_method_data so it lives on your Payment Method object.

primal lichen Apr 3, 2023, 12:38 PM

#

Should I put it somewhere else then ?

livid leaf Apr 3, 2023, 12:44 PM

#

You can send the metadata to your backend and add it when you create your PaymentIntent.

primal lichen Apr 3, 2023, 12:46 PM

#

Do you have a piece of code I can study to see how it works ?

livid leaf Apr 3, 2023, 12:55 PM

#

Maybe you could share your current implementation and I will suggest where the metadata could live?

primal lichen Apr 3, 2023, 12:59 PM

#

This is my checkout.js file which handles the form submit

📎 checkout.js

#

I'm also tryong to push my metadata to the create.php file that creates the PaymentIntent and obtain clientSecret but I can't find a way to make it work

edgy grottoBOT Apr 3, 2023, 1:03 PM

#

livid leaf Apr 3, 2023, 1:04 PM

#

So when you do:

const res = await fetch("/create.php", {
You can send your metadata along.

#

How does your backend look?

primal lichen Apr 3, 2023, 1:04 PM

#

Ok but how 😅

#

There is no backend.

livid leaf Apr 3, 2023, 1:06 PM

#

So where's this request going? /create.php

primal lichen Apr 3, 2023, 1:07 PM

#

It creates the PaymentIntent and obtain clientSecret, taht is all

📎 create.php

#

The data is suppose to go to Stripe, then I'm using a webhook to create an order with all the info needed

#

(There is no CMS, it's just pure code)

#

Honestly implementing our current bank system and Paypal was a piece of cake, but implementing Stripe is really difficult 😅

livid leaf Apr 3, 2023, 1:11 PM

#

That's your backend 😉
You can put your metadata in:
$intent = $stripe->paymentIntents->create(, along with your order_id

primal lichen Apr 3, 2023, 1:11 PM

#

In the create.php file you mean ?

livid leaf Apr 3, 2023, 1:12 PM

#

Yes

primal lichen Apr 3, 2023, 1:12 PM

#

But how do I push my input values of the form to this file ?

#

This is not working :

#

var metadata = [{
email: document.getElementById("pff_fleurs_commandes_client_email").value,
name: document.getElementById("pff_fleurs_commandes_client_nom").value,
address: document.getElementById("pff_fleurs_commandes_client_adresse_1").value,
city: document.getElementById("pff_fleurs_commandes_client_ville").value,
postalCode: document.getElementById("pff_fleurs_commandes_client_cp").value
}];

const data = new FormData(event.target);
const formJSON = Object.fromEntries(data.entries());

// Create the PaymentIntent and obtain clientSecret
const res = await fetch("/create.php", {
method: "POST",
body: JSON.stringify({ metadata }),
});

livid leaf Apr 3, 2023, 1:13 PM

#

What's not working?

primal lichen Apr 3, 2023, 1:14 PM

#

The Json file created this way only contains the clientSecret, and not any metadada

livid leaf Apr 3, 2023, 1:16 PM

#

primal lichen But how do I push my input values of the form to this file ?

The response contains the clientSecret. But you can put whatever you want in the request body of the /create.php request. This part is not related to Stripe in any way so you can do whatever you like here.
You can send all the necessary data from the form to /create.php endpint, and add it to the metadata when you create your PaymentIntent on the backend.

primal lichen Apr 3, 2023, 1:17 PM

#

I don't know how to send the data from the form to this file, this is where I struggle

livid leaf Apr 3, 2023, 1:20 PM

#

I see you're already doing this:

var metadata = [{
    email: document.getElementById("pff_fleurs_commandes_client_email").value,
    name: document.getElementById("pff_fleurs_commandes_client_nom").value,
    address: document.getElementById("pff_fleurs_commandes_client_adresse_1").value,
    city: document.getElementById("pff_fleurs_commandes_client_ville").value,
    postalCode: document.getElementById("pff_fleurs_commandes_client_cp").value
    }];
const res = await fetch("/create.php", {
    method: "POST",
    body: JSON.stringify({ metadata }),
  });

primal lichen Apr 3, 2023, 1:37 PM

#

Ok I'm getting close. I've manage to push my data to the payload, now I need to push it back in response.

#

If you can bear with me a little longer while I'm doing this it would be great

deft cargo Apr 3, 2023, 1:39 PM

#

Sure happy to help. Vanya had to step out but I am here. Do you have current questions or are you saying that you are actively testing this now and will come back with further questions if they come up?

livid leaf Apr 3, 2023, 1:40 PM

#

primal lichen Ok I'm getting close. I've manage to push my data to the payload, now I need to ...

Why do you want to push it back in response?

primal lichen Apr 3, 2023, 1:41 PM

#

To put it in a variable $metadata

#

So I can do this

#

'amount' => $total_panier,
'currency' => 'eur',
'automatic_payment_methods' => ['enabled' => true],
'metadata' => $metadata

livid leaf Apr 3, 2023, 1:42 PM

#

Sure, sorry, I misunderstood. That's right.

#

You meant you want to read it from the request body in the PHP file and send it to Stripe when creating the PaymentIntent, correct?

primal lichen Apr 3, 2023, 1:50 PM

#

Yes exactely

primal lichen Apr 3, 2023, 2:13 PM

#

Ok, I think I've done it !

#

Can you check the payment pi_3Mso7GBCoEFG98lq0cwrxXeL

livid leaf Apr 3, 2023, 2:15 PM

#

Nice. I see 2 fields in the metadata field on this PaymentIntent. Is this what you expected?

primal lichen Apr 3, 2023, 2:17 PM

#

Yep 🥹

#

Ok now that this is settle I have some follow up questions if you don't mind

#

Can I push as many data in this metadata field or is it limitated

#

What I am buidling, is this the right way to go, that is to say that the order is created thax to the webhook after the success payment or it would be wiser to creted it before, and to update it with the webhook

livid leaf Apr 3, 2023, 2:19 PM

#

You can put up to 50 keys, with values of 500 characters long: https://stripe.com/docs/api/metadata#:~:text=You can specify up to 50 keys%2C with key names up to 40 characters long and values up to 500 characters long.

primal lichen Apr 3, 2023, 2:19 PM

#

(hope I make sense 😅 )

primal lichen Apr 3, 2023, 2:20 PM

#

livid leaf 1. You can put up to 50 keys, with values of 500 characters long: <https://strip...

perfect !

livid leaf Apr 3, 2023, 2:21 PM

#

Either way works. Just make sure to clearly mark the order as incomplete (in your DB) until you get the payment_intent.succeeded webhook.

primal lichen Apr 3, 2023, 2:22 PM

#

Do I need to redirect a user if the payment was unsuccesful or he will stay in the checkout page with an error message ?

#

(redirect to a page that says "sorry try again")

livid leaf Apr 3, 2023, 2:24 PM

#

It depends how it is implemented, but in the standard implementation they will stay on the page.
To make sure, please test your integration with Test cards: https://stripe.com/docs/testing
https://stripe.com/docs/testing#declined-payments

primal lichen Apr 3, 2023, 2:26 PM

#

Perfect thx. I've just simulated an error and there's an error message indeed which appeard. Any way to custom these messages ?

livid leaf Apr 3, 2023, 2:30 PM

#

It just depends on what you do in the handleError(error) function, and it just depends on you at this point, not related to Stripe.

primal lichen Apr 3, 2023, 2:31 PM

#

Ok thx. Well Vanya you've been of great help, thank you for everything !

#cgourmelon