nima_api

[rigid granite]

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

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

[static totem]

👋 happy to help

it seems like the Stripe objects isn't initialized properly

[cosmic cosmos]

Additionally i have also defined the appearance like this:
const appearance = {
theme: 'flat',
variables: { colorPrimaryText: '#262626' }
}

[static totem]

did you import Stripe?

or added the script tag?

[cosmic cosmos]

Here is more context for that:
import Stripe from 'stripe';
export async function fetchPayment(appearance,options) {
//more code
const {publishableKey} = await fetch(/payments/getConfig).then(res => {
if (!res.ok) {
throw new Error(Server responded with ${res.status})
}
return res.json()
}).catch(error => {
console.log("/payments/config Error: ", error.message)
})

const stripe = Stripe(publishableKey)

//more code
}

And i have checked that the return from /getConfig endpoint is correct.

[static totem]

https://docs.stripe.com/payments/accept-a-payment?platform=web&ui=elements#add-and-configure-the-elements-provider-to-your-payment-page

you're using the backend stripe-node package instead of the stripe-js

[cosmic cosmos]

Now, I am even more confused. So I am NOT suppost to initialize it like this?

const stripe = Stripe('something');

For the "/create-payment-intent i initilize it like this:

    const stripe = new Stripe(env.STRIPE_SECRET_KEY, { 
        apiVersion: '2023-10-16', 
    })

And that works fine? or no?

In the main.js I import so Vite builds that into the flow:

import "https://js.stripe.com/v3/"

[static totem]

I sent you the code that you need to use on the frontend

[cosmic cosmos]

/getConfig

export async function onRequestGet(context) {    
    // Fetch the publishable key from environment variables
    const { env } = context
    const publishableKey = env.STRIPE_PUBLISHABLE_KEY

    // Create a response with the publishable key
    const response = new Response(JSON.stringify({ publishableKey }), {
    headers: {
        'Content-Type': 'application/json',
    },
    })

    return response

[static totem]

would you mind taking a look at that code

are you using react?

or vanilla js

ok

please don't send your keys

in a public message

[cosmic cosmos]

I am not using the format that is shown in the docs:
const express = require('express');
const app = express();

[static totem]

that's for the backend

in your frontend

[cosmic cosmos]

Ah, i think i get it a bit more, so the "import Stripe from 'stripe';" was only for the endpoints. and I need to get the stripe somehow else on the frontend

[static totem]

yes you need to add ``` <script src="https://js.stripe.com/v3/"></script>

to your html

[cosmic cosmos]

That won't work with Vite, so i do it in the main.js

its:
<script src="main.js"></script>

and then inside the main.js i have:
import "https://js.stripe.com/v3/"

which should make it available? and modulerize depending on endpoints and load

[static totem]

in that case you should try the way to import it in react https://docs.stripe.com/payments/accept-a-payment?platform=web&ui=elements&client=react#add-and-configure-the-elements-provider-to-your-payment-page

with loadStripe

and use await loadStripe to get your stripe object

[cosmic cosmos]

I am not using React in the project, would have to build out a loadStripe then?

[static totem]

regardless of whether you are using React, if you're using any frontend framework that uses Rollup or webpack

that's the way to initialize Stripe

using loadStripe

[cosmic cosmos]

this:?
import {loadStripe} from '@stripe/stripe-js';

const stripePromise = loadStripe(

[static totem]

instead of a promise I would do
const stripe = await loadStripe

[cosmic cosmos]

ok, nice got something else now>
~~Uncaught (in promise) IntegrationError: Invalid value for elements.create('payment'): business should be an object. You specified: name.

which would be from this?
const options = {
layout: {
type: 'accordion',
defaultCollapsed: false,
radios: false,
spacedAccordionItems: true
},
business: "name"
}

const paymentElement = elements.create('payment',options)~~

Fixed

Alrighty, thanks a bunch initial problem got fixed