#stilo-checkout-embedded

1 messages · Page 1 of 1 (latest)

terse inletBOT
little ermine
lime frigate
#

👋 Hey @little ermine I'm happy to help but you shared 3 short pictures with almost no context. That first picture has some error that is near unreadable since the URLs are truncated. Please try to share actionable information so I can help

little ermine
#

oh sorry wait a second

lime frigate
#

stilo-checkout-embedded

little ermine
lime frigate
#

it's still unreadable the real URL that is erroring is truncated in each of those red lines

little ermine
#

I sent the url

lime frigate
#

ah gotcha it's that exact URL for all 4?

terse inletBOT
little ermine
#

I did it on another clean project

#

this is the frontend

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Payment</title>
</head>
<body>
    <div id="checkout">
                    
    </div>
</body>
<script>
    const stripe = Stripe('pk_test_123');

    initialize();

    async function initialize() {
    const response = await fetch("/create-checkout-session", {
        method: "POST",
    });

    const { clientSecret } = await response.json();

    const checkout = await stripe.initEmbeddedCheckout({
        clientSecret,
    });

    // Mount Checkout
    checkout.mount('#checkout');
}
</script>
</html>

and this the backend

const stripe = require('stripe')('sk_test_51MdelGHhOpaKHKqahcrqCVJrdS1Pi1cfBDviVb4bqZyLoCIY3tI3YzVA9J33eGTWjVarSnBrr0burMcpluXV0nYK00O12q2R41');
const express = require('express');
const path = require('path');
const app = express();

app.use(express.urlencoded({ extended: true }));
app.use(express.static(path.join(__dirname, 'static')));

app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'static', 'index.html'));
})

app.post('/create-checkout-session', async (req, res) => {
    const session = await stripe.checkout.sessions.create({
        line_items: [{
            price_data: {
                currency: 'eur',
                product_data: {
                    name: 'Something',
                },
                unit_amount: 2000,
            },
            quantity: 1,
        }],
        mode: 'payment',
        ui_mode: 'embedded',
        return_url: 'https://localhost/checkout/return?session_id={CHECKOUT_SESSION_ID}'
    });

    res.send({clientSecret: session.client_secret});
});

app.listen(8080, () => console.log("Server started on :8080"));
image.png
#

oh the pk_test_123

#

I didn't read that lol

#

wait I added <script src="https://js.stripe.com/v3/"></script>

lime frigate
#

I'm sorry you're jumping around between problems here. Are you using the wrong key? If not, are you properly waiting for Stripe to be loaded as a library before using it?

little ermine
#

I'm still using the wrong key

#

where do I find the correct one?

little ermine
#

ok found

#

now the problem is

image.png
autumn quail
#

In your code you have this API key:

pk_test_123

#

Did you set the correct one?

little ermine
#

yeah

autumn quail
#

No, in your HTML file

#

In the <script> block

little ermine
#

oh sorry yes

autumn quail
#

Hmmm, I'm going to need to try and repro on my end. Give me a few minutes and I'll circle back

little ermine
autumn quail
#

Add the script tag to your HTML file header

<script src="https://js.stripe.com/v3/"></script>

#

I think that might do the trick

little ermine
#

but it doesn't change

autumn quail
#

Can I see the new HTML file? Did the error change at all?

#

Ah, wait. You already did that

#

Can you generate a new Checkout Session and post the ID here?

little ermine
little ermine
autumn quail
#

I would think refreshing the page would do it, no?

little ermine
#

nope

autumn quail
#

How did you generate the last one?

little ermine
#

last what

autumn quail
#

The last Checkout Session. The one in the URL you posted

little ermine
#

that is the url written in the error

little ermine
autumn quail
#

Yes, but with the updates you made to your code, can you generate a new one and post it for me?

little ermine
#

the one in the error?

autumn quail
#

I think your public test key is still wrong

#

The one that's paired with the secret key you're using (ending in 2q2R41) end in NTql, which is not the key you're using in the index.html file of your code

little ermine
#

yeah

#

I forgot to set the test mode

#

for the public key too

#

nice it works

#

is this normal?

image.png
autumn quail
#

Yup. That just means that you need to server over HTTPS in a production environment. Since you're just testing, it's fine

little ermine
#

yeah I'm blind

#

thanks

#

however is it possible to change the price based on what a user writes in an input?

autumn quail
#

No. Checkout is Stripe-hosted, so you can't listen to inputs

terse inletBOT
little ermine
#

but if I create a button that redirects you to the page using ejs, I should be able to render the price by sending it in the body of /create-checkout-session, shouldn't I?

#

and then receive it in the backend

autumn quail
#

Please be more specific. Terms like "the page" and "the price" are ambiguous and make it really hard to understand what you actually mean

little ermine
#

I should make a flowchart but I don't want to

#

in my head it makes sense haha

#

anyways thank you very much

#

I'm ignorant I know

autumn quail
#

Not at all. You're doing fine, it's just worth spending a bit more time on your responses so that you don't have to wait 5 minutes just to get a bunch of follow-up questions.

#

It also helps us when you're explicit, because we're juggling sometimes up to 15 or 20 active threads with other people and we want to get you the right answer as soon as possible

little ermine
#

oh I understand