CODEWITHSUNDEEP
javascriptreactjsstripe-payments
Usman Sharif HH
Usman Sharif HH

Reputation: 43

Stripe and React, react-stripe-element custom card element without zip field

I am newbie in stripe and react.

I am trying to create a stripe checkout screen which has already been designed. enter image description here

Now when I add CardElement component it create a new row which looks like this enter image description here

I would like it use my own custom styled elements, is there any way to pass these as props style them custom

Regards

Upvotes: 2

Views: 4729

Answers (2)

Aziz Bhavnagarwala
Aziz Bhavnagarwala

Reputation: 1

Instead of using CardElement, You can use all separate elements like this :

 <CardNumberElement />
 <CardExpiryElement />
 <CardCvcElement/>

const paymentMethod = await stripe.createPaymentMethod({
        type: "card",
        card: cardNumber,
      });

and pass CardNumber in place of CardElement in your function. So, you can easily style your payment card.

Now, you can give separate CSS to each of your element by wrapping it around div.

Upvotes: 0

v3nkman
v3nkman

Reputation: 1179

On the topic of styling Stripe Card Elements. I would recommend checking out the following parts of the Stripe.js docs:

  1. https://stripe.com/docs/js/element/the_element_container
  2. https://stripe.com/docs/js/appendix/style
  3. https://stripe.com/docs/js/elements_object/create_element?type=card

Ultimately, there are both classes and style parameters that you can work with to change the style of your Card Element.

Hope this helps!

Upvotes: 2

Related Questions