#paulc7053_code

1 messages · Page 1 of 1 (latest)

thorny dewBOT
#

👋 Welcome to your new thread!

⏲️ We'll be here soon! We typically respond in a few minutes, but in some cases we might need a bit more time (e.g., server's busy, you've got a complex question, etc.).

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can 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/1249656977194356827

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

cobalt wigeon
#

Hey!

snow yoke
#

👋 happy to help

cobalt wigeon
#

This is the code `const onConfirm = async (data) => {
if (!stripe) {
return;
};

    const { error: submitError } = await elements.submit();
    if (submitError) {
        setErrorMessage(submitError.message);
        return;
    };

    //create the customer
    const stripeCustomerIdRes = await fetch('/api/

stripe/findOrCreateCustomer', {
method: 'post',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
...
}),
});
const stripeCustomerId = (await stripeCustomerIdRes.json()).stripeCustomerId;
console.log("Stripe customer fetched.")

    //create the subscription
    const subscriptionRes = await fetch('/api/stripe/createSubscription', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            stripeCustomerId,

.....
}),
});
const clientSecret = (await subscriptionRes.json()).clientSecret;
console.log("Subscription created.")

    // confirm the payment
    const queryParams = { ...router.query };
    const queryString = Object.entries(queryParams).map(([key, value]) => {
        if (key === 'country') return;
        if (Array.isArray(value)) {
            return `${key}=${value.join(',')}`;
        };
        return `${key}=${value}`;
    }).join('&');
📎 message.txt
#

const host = process.env.VERCEL_PRODUCTION_HOST ? process.env.VERCEL_PRODUCTION_HOST : "http://localhost:3000"; const { error } = await stripe.confirmPayment({ elements, clientSecret, confirmParams: { return_url: country && country.toLowerCase !== 'us' && country.length > 0 ? ${host}/payment-successful?${queryString.length > 0 ? ${queryString} : ''}&stripeCustomerId=${stripeCustomerId}&country=${country} :${host}/payment-successful?${queryString.length > 0 ? ${queryString} : ''}&stripeCustomerId=${stripeCustomerId}`
},
});

    if (error) {
        setErrorMessage(error.message);
        console.log({ error })
    };
};``
snow yoke
#

what are you using?

#

the PaymentElement?

cobalt wigeon
#

Yes

#

exactly

#

import { useStripe, useElements, Elements, ElementsConsumer, ExpressCheckoutElement, CardElement } from '@stripe/react-stripe-js';

snow yoke
#

why are you using ExpressCheckoutElement and the CardElement instead of the PaymentElement though?

cobalt wigeon
#

I'm using it like this <ExpressCheckoutElement onClick={onClick} onReady={onReady} onConfirm={onConfirm} options={expressCheckoutOptions} />

#

I just followed the docs

snow yoke
#

yes but instead of using ExpressCheckout Element and the Card Element

#

you can just use the PaymentElement

cobalt wigeon
#

A, because I want a custom layout

snow yoke
#

which has cards, Google Pay, Apple Pay, and all other available local payment methods

snow yoke
#

but we don't recommend doing that honestly

#

at some point the CardElement could be deprecated

#

but let's focus on the task ahead

cobalt wigeon
#

Ah, I see

#

Yep

snow yoke
#

you can access the email in the billing details of the confirm event

cobalt wigeon
#

alright, 1 sec I;m looking into it

#

O wow... indeed

#

it;s just in the data object

#

Thanks a lot for the help!

snow yoke
#

sure let me know if you need any more help

cobalt wigeon
#

Is it really possible that the custom elements get deprecated in the near future?

snow yoke
#

the CardElement could be at some point

#

not in the near future though

#

but we're advised to recommend using the PaymentElement instead

cobalt wigeon
#

I assume it also supports paypal?

#

I just want to encourage the customer to use apple pay/google pay/ paypal instead of card. With a custom layout it's easier to do that

snow yoke
#

you can use the paymentMethodOrder though

#

and then rearrange however you like

cobalt wigeon
#

Ah, okay!

#

Thanks a lot for ur time

snow yoke
#

sure let me know if you need any more help

cobalt wigeon
#

That;s it

#

Thank you!

snow yoke
#

would you mind me closing the thread?

cobalt wigeon
#

No!