brambilla128 | Stripe Developers | Page 1

opaque widgetBOT Jul 10, 2023, 1:06 PM

#

wise lion Jul 10, 2023, 1:06 PM

#

Hello, happy to help. What are you running in to?

pure crag Jul 10, 2023, 1:10 PM

#

I'm don't know how to pass the theme corretly as a prop to the component cause I'm using jsx sintax, and I'm importing the PaymentElement from the lib, and not creating it in my code as I saw in the docs

#

https://github.com/GabrielEduardoBrambilla/Rocket-food-frontend/tree/master/src/components/Stripe

#

Here is my git repository

#

This Stripe folder is where I'm trying to create the payment element, checkout form. The component is being used in the order page

#

Rocket-food-frontend\src\pages\order

wise lion Jul 10, 2023, 1:21 PM

#

Gotcha, I'll take a look

pure crag Jul 10, 2023, 1:53 PM

#

I know that u are busy, but did u have any tips how I can do it?

wise lion Jul 10, 2023, 1:57 PM

#

Apologies for the delay, looking at your code now

#

I'm having trouble figuring out how to use the appearance API with the useElements hook, asking my colleagues and will get back to you shortly

#

I found an example of how to do this here: https://github.com/stripe/react-stripe-js#using-hooks

#

You define the appearance settings in an options object and then provide it to the <Elements> tag

  mode: 'payment',
  amount: 1099,
  currency: 'usd',
  // Fully customizable with appearance API.
  appearance: {
    /*...*/
  },
};

const App = () => (
  <Elements stripe={stripePromise} options={options}>
    <CheckoutForm />
  </Elements>
);```

opaque widgetBOT Jul 10, 2023, 2:22 PM

#

pure crag Jul 10, 2023, 2:22 PM

#

Hey I kind solve it know

#

{clientSecret && stripePromise && (
<Elements stripe={stripePromise} options={{
clientSecret, appearance: {
theme: 'night'

      }
    }}>
      <CheckoutForm />
    </Elements>
  )}

pure crag Jul 10, 2023, 2:23 PM

#

wise lion You define the appearance settings in an `options` object and then provide it to...

(i don't know how to put in code like u did)

#

But for some reason I had to pass the appearance object dirrectly. I must pass the clientScrect together in the options

#

Passing the appearance as an const options was not working

#

    theme: 'stripe'
  }
  return (
    <>
      <h1>React Stripe and the Payment Element</h1>
      {clientSecret && stripePromise && (
        <Elements stripe={stripePromise} options={{
          clientSecret, appearance: testAppearance
        }}>
          <CheckoutForm />
        </Elements>
      )}
    </>
  );```

#

By naming the prop it worked

#

Thanks a lot 🥰

wise lion Jul 10, 2023, 2:28 PM

#

Glad it is working! Good job figuring that last part out, I was still trying to figure that out on my side

#brambilla128