#paulc7053_code

1 messages ¡ Page 1 of 1 (latest)

fleet impBOT
#

👋 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/1219252364523995196

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

willow siloBOT
#

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.

vocal fiber
#

Hey!

willow siloBOT
vocal fiber
#

Here's 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({stripeCustomerId})
    // create the subscription
    const subscriptionRes = await fetch('/api/stripe/createSubscription', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            priceId: 'price_1OuGSLJ4ILijjURSgay6C1iI',
            stripeCustomerId,
            .....
        }),
    });
    const clientSecret = (await subscriptionRes.json()).clientSecret;
    console.log({clientSecret});
    // confirm the payment
    const { error } = await stripe.confirmPayment({
        elements,
        clientSecret,
        confirmParams: {
            return_url: `https://google.com/payment-successful`,
        },
    });


    if (error) {
        setErrorMessage(error.message);
        console.log({ error })
    } else {
        console.log('Payment successful');
        // The payment UI automatically closes with a success animation.
        //
    };
};`
topaz lion
#

Hi, let me help you with this.

vocal fiber
#

Thanks!

topaz lion
#

Could you please share 2 code snippers:

  1. Where you create the Subscription
  2. Where you create the Express Checkout Element
vocal fiber
#

yes, 1 sec

#

`import Stripe from "stripe";

const stripe = new Stripe(
process.env.NODE_ENV === 'development'
? process.env.STRIPE_TEST_API_KEY
: process.env.STRIPE_PRODUCTION_API_KEY
);

export default async function createSubscription(req, res) {
const {
stripeCustomerId,
priceId,
...
} = req.body;

const metadata = {
    ...
};

try {
    const subscription = await stripe.subscriptions.create({
        customer: stripeCustomerId,
        items: [{
            price: priceId,
        }],
        payment_behavior: 'default_incomplete',
        payment_settings: { save_default_payment_method: 'on_subscription' },
        expand: ['latest_invoice.payment_intent'],
        metadata: metadata,
    });

    // add the subscription id to the customer
    try {
        await prisma.customer.update({
            where: {
                stripeCustomerId: stripeCustomerId
            },
            data: {
                stripeSubscriptionId: subscription.id
            }
        });
    } catch {
        console.log("Could not set in prisma");
    };

    res.send({
        subscriptionId: subscription.id,
        clientSecret: subscription.latest_invoice.payment_intent.client_secret,
    });
} catch (error) {
    console.log("Error creating subscription: ", error.message)
    return res.status(400).send({ error: { message: error.message } });
};

};`

#

And creating the ece, just using the component <ExpressCheckoutElement onConfirm={onConfirm} options={expressCheckoutOptions} // onReady={onReady} />

topaz lion
#

What's in expressCheckoutOptions?

vocal fiber
#

const expressCheckoutOptions = { layout: { overflow: "never" }, buttonHeight: 50, paymentMethodOrder: ["google_pay", "apple_pay"] };

#

just appearance

#

Also, this is wrapped in <Elements stripe={stripePromise} options={options}> <ElementsConsumer>

#

What are your suggestions?

topaz lion
vocal fiber
#

passing it in the options ?

topaz lion
#

Yes

#

The <Elements> options specifically

vocal fiber
#

Okay, I've done that

#

const options = { mode: 'payment', amount: totalPrice * 100, currency, appearance: { variables: { borderRadius: '36px', } }, setupFutureUsage: "off_session", mode:'subscription', };

#

Now it works

#

But it also seems to wipe out the PayPal Button

#

How can I also display that?

topaz lion
#

PayPal can't be used with Subscriptions atm. Adding this parameter just aligned the ECE configuration with the type of payment that you were about to use it for - subscription.

vocal fiber
#

So there's no way I can have someone subscribe through PayPal?

topaz lion
vocal fiber
#

Great!

#

Are there any requirements?

#

Maybe it's best if I ask them this

#

Thanks a lot vanya!

topaz lion
#

Not sure, they definitely know better.
Happy to help.

vocal fiber
#

Thanks, see you!