#Hotsauce-elements

1 messages · Page 1 of 1 (latest)

low nimbus
#

Hello! Feel free to ask here 🙂

sleek radish
#

Hi Karbi! I want to provide some context for all the information we need to capture on our checkout modal.

#

We want to move to Stripe Elements.

#

Let me grab some code.

#

There are a few business requirements I am currently stuck on.

#
  1. We have multiple Stripe accounts (for different countries)
#
  1. Capturing additional information: dates, names, currency, etc.
#

I haven't been able to send the correct shape over to Stripe via the 'stripe.confirmPayment' method.

#

I'm hoping to get a beter understanding how I can achieve the business requirements within the Stripe Elements tool.

remote echo
#

Hi 👋 I

#

am jumping in for @low nimbus

#

Gimme a sec to catch up

sleek radish
#

Np, thanks!

remote echo
#

Okay so the Stripe account for each API call is identified on both the client (front-end) and server(back-end) by the use of API keys.

#

These are used to instantiate Stripe client libraries (back-end) and Stripe.js (front-end)

sleek radish
#

I see.

remote echo
#

You can only confirm payments client side that were created with the same API key server-side

#

So that's some significant engineering but not impossible.

#

When it comes to capturing additional info, where do you want to capture it?

sleek radish
#

Just so I am on the same page. The API key on the client would have to pinpoint the location initially? Then the currency could potentially be set? I know its not a catch all but is that the gist?

remote echo
#

Not the location, just the Stripe account.

sleek radish
#

Sorry thats what I meant.

remote echo
#

The currency is set on the back-end when creating the Payment Intent

#

So the API key on the back-end creating the Payment Intent would need to match the API key on the front-end used to render the Payment Element and confirm the payment

sleek radish
#

I see, thanks for clarifying that.

#

The additional information would ideally be capture in a modal with the stripe elements 'card' iframe.

remote echo
#

That would entirely depend on if that information capture is supported by Stripe. Since you cannot add arbitrary fields within the Stripe Element iframe

#

And Payment Element by default renders inputs for only the information required to successfully process the payment for the selected payment method

#

However, you can always capture those details yourself and update the Payment Intent record to keep them associated with the payment you are confirming

sleek radish
#

I see. I wasn't updating the iframe directly. Let me share some code here:

#

const { error } = await stripe.confirmPayment({
elements,

  confirmParams: {
    payment_method_data: {
      billing_details: {
        name: orgName,
        address: {
          line1: addressValue,
          city: cityValue,
          state: stateValue,
          country: "US",
        },
      },
    },
    // Make sure to change this to your payment completion page
    return_url: "http://localhost:3000/success",
  },
});
#

I'll list out the information we would like to capture:

#

Organzation: string,
Full Name: string,
Date one: date,
Date two: date,
Currency: string, // I understand the limitations here
Address: string,
City: string,
State: string,

remote echo
#

Okay the address/name info can be captured in the billing_details but the rest of this information would need to be added to the Payment Intent on the metadata property if you wanted to store the info with the payment

sleek radish
#

I attempted to updated the 'billing_details' (code above) but was unable to see the fields upon a live order.

remote echo
#

Do you have the payment ID I could review?

sleek radish
#

Yes, one sec.

#

Ah! that did work. Sorry I thought the address would show up toward the top of the payments page. The payment ID is:pi_3LNleRDLP5Onkmu32bQIRFDu

remote echo
#

Okay yeah the dashboard doesn't always put things where you might expect. But I'm glad you were able to save the data.

sleek radish
#

Last question is the shape of the metadata, would it look like this:

#

const { error } = await stripe.confirmPayment({
elements,

confirmParams: {
payment_intent_data: {
metadata: {
organization: orgName,
startDate: startDate,
endDate: endDate,
},
},
// Make sure to change this to your payment completion page
return_url: "http://localhost:3000/success",
},
});
},
});

remote echo
#

You cannot pass metadata from the client side

sleek radish
#

I believe I was able to in the Stripe Checkout. Is that a inherent difference between the two?

remote echo
#

That would need to be handled on the server

#

Stripe checkout has no client side that you can interface with.

#

You can pass metadata either when creating or updating the Payment Intent

sleek radish
#

I think I get that. I would have to update this block with the metadata information:

#

// Create a PaymentIntent with the order amount and currency
const paymentIntent = await stripe.paymentIntents.create({
amount: calculateOrderAmount(items),
currency: "usd",
automatic_payment_methods: {
enabled: true,
},
});

remote echo
#

Bingo! If you know the information by the time that code runs that is where you would put it

sleek radish
#

Awesome! Thanks so much for all the help. I should have messaged you earlier 🤦‍♂️