#tsr_code

1 messages ¡ Page 1 of 1 (latest)

runic sequoiaBOT
#

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

📝 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.

  • tsr_api, 4 hours ago, 19 messages
near hatch
#

hi! what does that mean, what page are you referring to ? what customisations are you looking for?

livid hornet
#

is it possible to customize default checkout exactly like this ?

Screenshot_2024-11-22_174842.png
#

i am trying to integrate stripe default checkout....but we need customization like above screenshot

near hatch
#

are you a developer writing code to integrate with Stripe? what guide are you using? so I can understand which product you're integrating with etc.

livid hornet
#

Yes, I'm a developer. We've already integrated Stripe's default checkout page for payments. However, the client wants to customize the checkout page's appearance as mentioned above

near hatch
#

sorry can you please try and clarify what I asked above?

#

you just say "default checkout page for payments" but we have many different ways to integrate payments, I need a specific reference/code of which one you're using before I can try to answer.

livid hornet
#

this is the code we used to create from nodejs =>
const session = await this.stripe.checkout.sessions.create({
payment_method_types: buyNowPayLater
? ['klarna', 'afterpay_clearpay']
: [
'card',
'paypal',
'bacs_debit',
'revolut_pay',
],
line_items: [
...line_items
],
customer: customer_id,
mode: "payment",
success_url: https://testflow.netlify.app/thankyou,
cancel_url: https://testflow.netlify.app/cancel,
saved_payment_method_options: {
payment_method_save: 'enabled',
},
allow_promotion_codes: true,
payment_intent_data: {
metadata
},

        // Enable billing and shipping address collection
        billing_address_collection: 'required', // or 'auto' if you want Stripe to determine based on requirements
        shipping_address_collection: {
            allowed_countries: ['US', 'CA', 'GB'] // specify allowed countries
        }
    });
#

Using this code, we create a checkout session and send it to the frontend for payment. However, the client wants to customize the UI, as shown in the screenshot I shared earlier.

#

for line items we are passing "price_id": "price_1QN6jb00kovRZbRfEehsAmVR"

near hatch
#

ok cool you use Checkout.

#

and the question is you want to somehow make Checkout look exactly like those mockup screenshots above? That's not possible of course.

#

if you want a custom layout and more control, you would use Elements to embed the payment-related inputs into an existing page you build