neat_api | Stripe Developers | Page 1

late wharfBOT May 6, 2025, 10:41 PM

#

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

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

#

copper kindle May 6, 2025, 10:42 PM

#

Hi! You're trying to hide Link, am I understanding that right? May I ask why you don't want the option?

late ginkgo May 6, 2025, 10:44 PM

#

I don't want this form to appear

#

it would make the experice annoying for my users

copper kindle May 6, 2025, 10:47 PM

#

What happens if you collapse that box?

#

(PS: It would likely make the experience less annoying for users who are already enrolled in Link)

late ginkgo May 6, 2025, 10:49 PM

#

when I fill the "security code" field then this form automagically appears and the cursor automatically moves to the email field

#

oh so you're saying I'm being shown this because I have opted in for this? so it will be only show to the users who have opted in?

copper kindle May 6, 2025, 10:50 PM

#

No, I'm not saying that.

#

If you reload that page, does it show the whole Link form, or do you have to click on "Secure, 1-click checkout with Link" to make it appear?

late ginkgo May 6, 2025, 10:52 PM

#

this is how it looks, I can expand and collapse it.

but even when I don't touch it and just fill out the card form fields, it then automatically appears below just like in the first screenshot

copper kindle May 6, 2025, 10:56 PM

#

Can you share a URL where I can see that for myself?

late ginkgo May 6, 2025, 10:58 PM

#

hmm it's running locally, I would need to deploy the app, let me try to do that

copper kindle May 6, 2025, 11:03 PM

#

Or can you share the client-side code that creates the Stripe Element there?

late ginkgo May 6, 2025, 11:04 PM

#

that's a little complicated! but let me try...

#

This is server side:

const paymentIntent = await stripe.paymentIntents.create({
      amount: pointPackage.priceInDollars * 100,
      currency: "USD",
      automatic_payment_methods: {
        enabled: true,
        allow_redirects: "never",
      },
      // payment_method_options: {
      //   // link: {
      //   //   capture_method: "manual",
      //   // },
      //   card: {},
      // },
    });

#

can't share code in it's entirety

copper kindle May 6, 2025, 11:13 PM

#

No, I just need the client-side code that creates the Stripe Element.

late ginkgo May 6, 2025, 11:19 PM

#

import { Elements } from "@stripe/react-stripe-js";
import { loadStripe, StripeElementsOptions } from "@stripe/stripe-js";

// Appearance settings
  const appearance: StripeElementsOptions["appearance"] = {
    theme: "stripe",
    variables: {
      colorPrimary: "#0f172a",
    },
  };

  // Options for Elements provider
  const elementsOptions: StripeElementsOptions | undefined = clientSecret
    ? { clientSecret, appearance }
    : undefined;

{clientSecret && elementsOptions && (
          <div className="py-4">
            <Elements stripe={stripePromise} options={elementsOptions}>
              <CheckoutForm />
            </Elements>
          </div>
        )}

#


// In a different component

const stripe = useStripe();
  const elements = useElements();
  
  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    if (!stripe || !elements) {
      // Stripe.js hasn't yet loaded.
      // Make sure to disable form submission until Stripe.js has loaded.
      setMessage("Payment system is not ready. Please wait or refresh.");
      console.error("Stripe or Elements not loaded");
      return;
    }

    setIsLoading(true);
    setMessage(null);

    const { error } = await stripe.confirmPayment({
      elements,
      confirmParams: {
        // Redirect to the billing page with payment intent
        return_url: `${window.location.origin + redirect}`,
        // return_url: `${window.location.origin + '/'}`,
      },
    });

    // This point will only be reached if there is an immediate error when
    // confirming the payment. Otherwise, the customer is redirected.
    if (error) {
      if (error.type === "card_error" || error.type === "validation_error") {
        setMessage(error.message || "An unexpected error occurred.");
        toast.error(error.message || "Payment failed.");
      } else {
        setMessage("An unexpected error occurred during payment confirmation.");
        toast.error("An unexpected payment error occurred.");
        console.error("Stripe confirmPayment error:", error);
      }
    } else {
      toast.success("Payment successful");
      // Should not happen often as the user is usually redirected
      setMessage("Processing payment...");
      // Call onSuccess if provided
    }

    setIsLoading(false);
  };

return (<PaymentElement
        id="payment-element"
        options={{
          layout: "tabs",
          business: { name: "AI Image Generator pp" },
        }}
      />)

#

I extracted only the stripe code

copper kindle May 6, 2025, 11:29 PM

#

If you don't want to show a given payment method as a payment option, set its property in paymentMethods to never.

https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods

late ginkgo May 6, 2025, 11:30 PM

#

let me check

#

I'm using automatic payment methods options, I will try to use the manually one, thanks for your help

copper kindle May 6, 2025, 11:42 PM

#

You're very welcome! I think you only need to set that particular option to include link: "never" and that should do what you're looking for.

late ginkgo May 6, 2025, 11:45 PM

#

where on the client side?

#

I'm not using the "checkout"

#

I'm using elements

copper kindle May 6, 2025, 11:47 PM

#

<Elements stripe={stripePromise} options={elementsOptions}>
    <CheckoutForm />  // <------- What is this?
</Elements>

late ginkgo May 6, 2025, 11:51 PM

#

the option from the docs is not available

late ginkgo May 6, 2025, 11:51 PM

#

copper kindle ``` <Elements stripe={stripePromise} options={elementsOptions}> <CheckoutFor...

it's this

return (<PaymentElement
        id="payment-element"
        options={{
          layout: "tabs",
          business: { name: "AI Image Generator pp" },
        }}
      />)

copper kindle May 6, 2025, 11:58 PM

#

You're creating a Checkout Session server-side, ya?

late ginkgo May 6, 2025, 11:59 PM

#

No I'm using stripe "elements" for which I need to create a payment_intent

copper kindle May 6, 2025, 11:59 PM

#

What guide are you following?

late wharfBOT May 6, 2025, 11:59 PM

#

late ginkgo May 7, 2025, 12:00 AM

#

copper kindle What guide are you following?

I think this one: https://docs.stripe.com/sdks/stripejs-react?ui=elements

React Stripe.js reference

Learn about React components for Stripe.js and Stripe Elements.

late wharfBOT May 7, 2025, 12:01 AM

#

late ginkgo May 7, 2025, 12:01 AM

#

found something in the docs, let me read it: https://docs.stripe.com/payments/accept-a-payment?platform=web&ui=elements&client=react#enable-checkout-link

Accept a payment

Securely accept payments online.

#

fixed it! had to disable it from the dashborad

versed rampart May 7, 2025, 12:07 AM

#

👍

#

Alternatively, you on your option here

options={{
          layout: "tabs",
          business: { name: "AI Image Generator pp" },
}}

You can also do wallets: link: never

#

https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-wallets-link

Stripe JS Reference

#

For disabling frontend, per-element

late ginkgo May 7, 2025, 12:10 AM

#

can you give me the code examples?

versed rampart May 7, 2025, 12:14 AM

#

Sorry we don't have. But literally the wallets is on the same level with layout, so ideally

options={{
    layout: "tabs",
    business: { name: "AI Image Generator pp" },
    wallet: { link: "never"},
}}

late ginkgo May 7, 2025, 12:15 AM

#

versed rampart May 7, 2025, 12:26 AM

#

Hmm that's weird. Does it error if you just type it in? ie. ignoring the code completion suggestion

#neat_api