jonas_code

[fallow blade]

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

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

• jonas_unexpected, 20 hours ago, 33 messages

[neon hearth]

hello! can you be a little more specific about what you're trying to customize with your checkout form? it looks like you're currently doing an embedded checkout form which is limited in terms of customization to what you can change in this page of your dashboard

just to give you some general suggestions, the payment element is more involved in terms of development effort but also allows for a lot more customization
https://docs.stripe.com/payments/payment-element

[plain lava]

like this

Or that

Right now it looks like that

[neon hearth]

ok yep, if you want that degree of customization then you'll want to use stripe elements, e.g. the payment element i linked above. those support our appearance API which allows you to do extensive CSS-like customization

[plain lava]

Ok in the docu i see this

const appearance = {
  theme: 'stripe'
};

// Pass the appearance object to the Elements instance
const elements = stripe.elements({clientSecret, appearance});

but where should i do that?

"use client";
import { FC, useEffect, useState } from "react";
import { loadStripe } from "@stripe/stripe-js";
import {
  EmbeddedCheckoutProvider,
  EmbeddedCheckout,
} from "@stripe/react-stripe-js";
import { STRIPE_PUBLIC_KEY } from "@/lib/constants";
import { Role } from "@/types/user";
import ApiClient from "@/api";

interface CheckoutProps {
  plan: Role | null;
}

const apiClient = new ApiClient();

const Checkout: FC<CheckoutProps> = ({ plan }) => {
  const [clientSecret, setClientSecret] = useState<string | null>(null);
  const stripePromise = loadStripe(STRIPE_PUBLIC_KEY);

  useEffect(() => {
    apiClient.payment.helper.createCheckoutSession(plan).then((response) => {
      if (response.status) {
        setClientSecret(response.data.client_secret);
      }
    });
  }, [plan]);

  return (
    <EmbeddedCheckoutProvider stripe={stripePromise} options={{ clientSecret }}>
      <div className="text-center">
        <h1 className="text-4xl font-bold mb-4 text-blackho">
          Subscribe to {plan}
        </h1>
        <p className="text-xl text-gray-600 max-w-2xl mx-auto">
          You are about to subscribe to the {plan} plan. Please enter your
          payment details below to proceed.
        </p>

        <div className="mt-8">
          <EmbeddedCheckout />
        </div>
      </div>
    </EmbeddedCheckoutProvider>
  );
};

export default Checkout;

[neon hearth]

your current integration is using embedded checkout, which doesn't support the appearance API, so unfortunately you're going to need to take another approach. this guide walks you through the basics of how to get up and running with the Payment Element
https://docs.stripe.com/payments/quickstart

the quickstart even includes the apperance API in its example

[plain lava]

but what about this

import express, {Express} from 'express';

const app: Express = express();

app.post('/create-checkout-session', async (req: Express.Request, res: Express.Response) => {
  const session = await stripe.checkout.sessions.create({
    line_items: [
      {
        price_data: {
          currency: 'usd',
          product_data: {
            name: 'T-shirt',
          },
          unit_amount: 2000,
        },
        quantity: 1,
      },
    ],
    mode: 'payment',
    ui_mode: 'custom',
    // The URL of your payment completion page
    return_url: '{{RETURN_URL}}'
  });

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

app.listen(3000, () => {
  console.log('Running on port 3000');
});

https://docs.stripe.com/checkout/custom/quickstart

[floral wyvern]

Hello
Catching up here, can you give me a quick summary of your question while I grasp context?

[plain lava]

yeah np, i want to know how i can customize my Checkout Form

[floral wyvern]

All the customization options for checkout are mentioned here - https://docs.stripe.com/payments/checkout/customization/appearance

I don't believe we support anything else

[plain lava]

"use client";
import { FC, useEffect, useState } from "react";
import { loadStripe } from "@stripe/stripe-js";
import {
  EmbeddedCheckoutProvider,
  EmbeddedCheckout,
} from "@stripe/react-stripe-js";
import { STRIPE_PUBLIC_KEY } from "@/lib/constants";
import { Role } from "@/types/user";
import ApiClient from "@/api";

interface CheckoutProps {
  plan: Role | null;
}

const apiClient = new ApiClient();

const Checkout: FC<CheckoutProps> = ({ plan }) => {
  const [clientSecret, setClientSecret] = useState<string | null>(null);
  const stripePromise = loadStripe(STRIPE_PUBLIC_KEY);

  useEffect(() => {
    apiClient.payment.helper.createCheckoutSession(plan).then((response) => {
      if (response.status) {
        setClientSecret(response.data.client_secret);
      }
    });
  }, [plan]);

  return (
    <EmbeddedCheckoutProvider
      stripe={stripePromise}
      options={{ clientSecret, elementsOptions: { appearance } }}
    >
      <div className="text-center">
        <h1 className="text-4xl font-bold mb-4 text-blackho">
          Subscribe to {plan}
        </h1>
        <p className="text-xl text-gray-600 max-w-2xl mx-auto">
          You are about to subscribe to the {plan} plan. Please enter your
          payment details below to proceed.
        </p>

        <div className="mt-8">
          <EmbeddedCheckout />
        </div>
      </div>
    </EmbeddedCheckoutProvider>
  );
};

export default Checkout;

Object literal may only specify known properties, and 'elementsOptions' does not exist in type '{ clientSecret?: string | null | undefined; fetchClientSecret?: (() => Promise<string>) | null | undefined; onComplete?: (() => void) | undefined; onShippingDetailsChange?: ((event: StripeEmbeddedCheckoutShippingDetailsChangeEvent) => Promise<...>) | undefined; onLineItemsChange?: ((event: StripeEmbeddedCheckoutLine...'.ts(2353)
react-stripe.d.ts(734, 5): The expected type comes from property 'options' which is declared here on type 'IntrinsicAttributes & EmbeddedCheckoutProviderProps & { children?: ReactNode; }'
(property) elementsOptions: {
appearance: any;
}

This is the docs

const appearance = {
  theme: 'stripe',
};
<CheckoutProvider
  stripe={stripe}
  options={{
    clientSecret,
    elementsOptions: {
      appearance,
    },
  }}
>
</CheckoutProvider>

[floral wyvern]

not sure what you're trying to say

can you elaborate?

[plain lava]

Do i build it into my code correctly. i get an error

[floral wyvern]

sorry I'm having trouble understanding you.. You'd want to make sure you're following the docs correctly.

[plain lava]

The documentation says that I should do it like this

const appearance = {
  theme: 'stripe',
};
<CheckoutProvider
  stripe={stripe}
  options={{
    clientSecret,
    elementsOptions: {
      appearance,
    },
  }}
>
</CheckoutProvider>

and I implement it like this. However, I get an error

"use client";
import { FC, useEffect, useState } from "react";
import { loadStripe } from "@stripe/stripe-js";
import {
  EmbeddedCheckoutProvider,
  EmbeddedCheckout,
} from "@stripe/react-stripe-js";
import { STRIPE_PUBLIC_KEY } from "@/lib/constants";
import { Role } from "@/types/user";
import ApiClient from "@/api";

interface CheckoutProps {
  plan: Role | null;
}

const apiClient = new ApiClient();

const Checkout: FC<CheckoutProps> = ({ plan }) => {
  const [clientSecret, setClientSecret] = useState<string | null>(null);
  const stripePromise = loadStripe(STRIPE_PUBLIC_KEY);

  useEffect(() => {
    apiClient.payment.helper.createCheckoutSession(plan).then((response) => {
      if (response.status) {
        setClientSecret(response.data.client_secret);
      }
    });
  }, [plan]);

  return (
    <EmbeddedCheckoutProvider stripe={stripePromise} options={{ clientSecret }}>
      <div className="text-center">
        <h1 className="text-4xl font-bold mb-4 text-blackho">
          Subscribe to {plan}
        </h1>
        <p className="text-xl text-gray-600 max-w-2xl mx-auto">
          You are about to subscribe to the {plan} plan. Please enter your
          payment details below to proceed.
        </p>

        <div className="mt-8">
          <EmbeddedCheckout />
        </div>
      </div>
    </EmbeddedCheckoutProvider>
  );
};

export default Checkout;

[weak hamlet]

Hi, taking over as my teammate needs to step away. Let me catch up.

What error are you seeing exactly? I highly recommend that you follow this guide: https://docs.stripe.com/payments/quickstart as it appears that you're micing PaymentElements and CheckoutSessions.

These are two separate integration paths. We document how you can custimze a Checkout on this: https://docs.stripe.com/payments/checkout/customization/appearance?payment-ui=embedded-form guide.

Meanwhile, with PaymentElements and PaymentIntents, https://docs.stripe.com/payments/quickstart you can use the Appearance API: https://docs.stripe.com/elements/appearance-api

You're unable to mix these