#beppoh_paymentelement-addresselement

1 messages · Page 1 of 1 (latest)

hard thornBOT
#

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1278024154271977553

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.

manic spindle
#

Hey @brittle raft! I'm sorry but I don't really grasp the question and what you mean by "pass to your back end" and what you are doing. Do you have a more detailed explanation of what you are talking about?

brittle raft
#

Goal: Right now, I'm trying to collect/store payment details from AddressElement and PaymentElement to submit in my 4-step form, so that I can eventually do GraphQL mutations that will create an Organization and update it with a PaymentMethod details (name, address 1, address 2, etc.).

Question: To my understanding, Stripe is handling all the data collection within AddressElement and PaymentElement. How do I get this info, so that I can pass it as url params to perform GraphQL mutations on my backend?

manic spindle
#

Okay so to be clear when you say "url params" you mean after the redirect after the SetupIntent was confirmed right?

#

beppoh_paymentelement-addresselement

brittle raft
#

Essentially, I'm trying to figure out how to get the Address and Payment info the user inputs into the Stripe form, and send it in params here

    // Confirm PaymentIntent => this is directing to the route handler
            const { error } = await stripe.confirmSetup({
                elements,
                clientSecret: formData?.setupIntentClientSecret,
                confirmParams: {
                    return_url: `${window.location.origin}/onboarding/step/${currentStep}`, // returns to this URL after confirmSetup on `/api/onboarding/confirm-payment-setup/route.ts`
                },
            });
#

That way, I can perform GraphQL on my backend

manic spindle
#

Gotcha. So after the redirect, the SetupIntent has been confirmed so the SetupIntent itself has all the information you need. So what you can do is retrieve the SetupIntent server-side via the API https://docs.stripe.com/api/setup_intents/retrieve and you can see the details you care about.
If you combine this with our Expand feature (see https://stripe.com/docs/expand and https://www.youtube.com/watch?v=m8Vj_CEWyQc) you can then look at the associated PaymentMethod to see the billing details that were collected and saved on the associated PaymentMethod

Does that make sense?

brittle raft
#

If I'm understanding correctly, the SetupIntentId is confirmed after being redirected via stripe.confirmSetup and has all the info I need.

On the server-side, I can do this to get all the Address and Payment info?

const setupIntent = await stripe.setupIntents.retrieve(
  'SetupIntentId'
);

and combine it with Expand feature, and this will provide me with all the details that the user just input?

manic spindle
#

yes

brittle raft
#

I attempted to use the code provided above on my backend, but setupIntents does not exist on the stripe object

manic spindle
#

Can you share your code?

brittle raft
#

Here is my /api/onboarding/confirm-payment-setup/route.ts

export async function GET(req: NextRequest) {
    try {
        const { userId, getToken } = getAuth(req);
        if (!userId) {
            return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
        }

        const stripe = getStripe();
        const { searchParams } = new URL(req.url);
        const orgName = searchParams.get('');
        const plan = searchParams.get('');
        const setupIntentId = searchParams.get('setup_intent');
        const setupIntentClientSecret = searchParams.get('setup_intent_client_secret');
        const redirectStatus = searchParams.get('redirect_status');

        // Retrieve SetupIntent
        const setupIntent = await stripe.setupIntents.retrieve(setupIntentId);

        if (redirectStatus !== 'succeeded') {
            return NextResponse.json({ error: 'Fail to confirm payment setup' }, { status: 400 });
        }

        if (!setupIntentId || !setupIntentClientSecret) {
            return NextResponse.json({ error: 'Missing required parameters' }, { status: 400 });
        }

        // Create Apollo Client and confirm payment setup
        const client = makeApolloClient(getToken);
        const { data } = await client.mutate({
            mutation: CREATE_ORG_ONBOARDING,
            variables: {
                orgName,
                plan,
                setupIntentId: setupIntentId,
                setupIntentClientSecret: setupIntentClientSecret,
            },
        });
manic spindle
#

This looks like "client-side code" using Stripe.js

hard thornBOT
brittle raft
#

Hmm ok. This is my route.ts file which I thought was my server-side code.

#

We're using Ruby on rails on the backend, but I'm just the front-end engineer

crude pond
#

Hi there 👋 taking over, as my colleague needs to step away

Based on my understanding so far, you would likely want to pass setupIntentId to your back-end and use Ruby to retrieve the info from there.

brittle raft
#

Ah, so I'll have to check in with the back-end engineer to see if that's viable.

Alternatively, if there's an easier way to solve this on the front-end -- I'd rather pursue that.

crude pond
#

If you have the Setup Intent's client secret you can retrieve the Setup Intent using it on the front-end with this method: https://docs.stripe.com/js/setup_intents/retrieve_setup_intent

That being said, I wouldn't use this method if you need high-reliability for things like provisioning services, since the customer could close the window, have network disconnection, press the back button, etc. and your client-side code might not get a chance to run.

Stripe JS Reference
brittle raft
#

Hmm yeah, I saw that in the docs. The issue here would be exactly the use-case scenario you described.

#

Upon entering the last step (<OnboardingForm/>), there's a useEffect that fetches the clientSecret and allows the Stripe Elements to show up

#

Once user submits the form, it redirects to my route.ts -- which I thought was server-side, but it seems that's incorrect

crude pond
#

Yeah, that's all client-side code. I think it would be worth conferring with your back-end engineer to talk about webhooks and back-end API calls for this workflow, as it's really not intended to exist only on the front-end.