Custom Input Fields with Stripes Payment-Element?

Question

I am using stripe in a next.js application in order to accept one time payments and so far have been following the standard tutorial for Stripe Elements.

The way it works is that I create a PaymentIntent on first render:

useEffect(() => {
        // Create PaymentIntent as soon as the page loads
        // using nextjs api route here:
        fetch('http://localhost:3001/api/create-payment-intent', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' }
        })
            .then((res) => res.json())
            .then((data) => setClientSecret(data.clientSecret));
    }, []);

This gives me a clientSecret, which is store in state. Then, Stripes Payment Element Component is being displayed and on submit, I am calling confirmPayment:

const { error } = await stripe.confirmPayment({
            elements,
            confirmParams: {
                // Make sure to change this to your payment completion page
                return_url:
                    'http://localhost:3001/confirm'
            }
        });

My problem is that I want to also grab the users name and email address, but I have no clue where I would capture those and where to send them to in stripe?

I guess it would make the most sense to create a new customer in stripe and add name and email to that customer object. But since almost everything is happening in the frontend (or at least not on my backend), I don't understand how to do that? I could do it when I create the PaymentIntent and send back the clientSecret - but then I would potentially be creating customers, even when they don't complete the payment intent.

PS: I know that this question has been asked a few times before, but Stripes API has changed quite significantly since then.

Answer 1

You will need to create your own input fields on your frontend for the customer's name and email address.

If you don't want to create a customer before successful payment, one way to go about it is to :

1. Pass the input values into name and email in stripe.confirmPayment.confirmParams.payment_method_data.billing_details.

Example

stripe.confirmPayment({
      elements,
      confirmParams: {
       return_url: 'https://example.com/',
        payment_method_data : {
          billing_details : {
            name : "jenny rosen",
            email : "[email protected]" 
          }
        }
      },
    });

2. When you receive the payment_intent.succeeded webhook event, the event will contain the billing details which you passed in.

payment_intent.succeeded example event

...
 "charges": {
      "object": "list",
      "data": [
        {
          "id": "ch_...",
          "object": "charge",
          "amount": 200000,
          "amount_captured": 200000,
          "amount_refunded": 0,
          "amount_updates": [
          ],
          "application": null,
          "application_fee": null,
          "application_fee_amount": null,
          "balance_transaction": "txn_...",
          "billing_details": {
            "address": {
              "city": null,
              "country": "US",
              "line1": null,
              "line2": null,
              "postal_code": null,
              "state": null
            },
            "email": "[email protected]",
            "name": "jenny rosen",
            "phone": null
          },
...

3. You can then create the Customer.