CODEWITHSUNDEEP
cssreactjspaypal
Coot3
Coot3

Reputation: 215

How can I style PayPal credit card input boxes in react (or anything)?

I'm not having any luck figuring out how I can style the PayPal input boxes for debit/credit card payments. Unlike the pay with paypal button which creates a popup, when you click the debit card option the input boxes are displayed inline. The default styles of the input boxes screws up my design and I would like to make them smaller so they fit the page better (I read that you can't make them a pop-up like the pay with paypal option. Here is a pic: enter image description here

From the paypal docs, it sounds like I should be able to style the input boxes directly from my own stylesheet using the input boxes id:

"Change the layout, width, height, and outer styling (for example, border, box-shadow, background) of the card fields. You can modify the elements you supply as containers (for example; #card-number { border: 1px solid #333; }) with your current stylesheets.

Typically, input elements calculate their height from font size and line height (and a few other properties), but advanced credit and debit card payments require explicit configuration of height. Make sure you style the height of your containers in your stylesheets. The text of the field components is configured with JavaScript."

I'm using react, I've tried modifying #card-number in my stylesheet but nothing I add changes the input box (font-size/height/background-color). I also render the buttons to a div called #paypalBtns, I tried styling the input boxes through that div as well but couldn't get anything to work (e.g #paypalBtns * {font-size: xx}). Has anyone had success styling these inputs?

Here is the code where I render the paypal buttons:

window.paypal
          .Buttons({
            createOrder: (data, actions) => {
              return actions.order.create({
                purchase_units: [
                  {
                    amount: {
                      value: braceletTotal()
                    }
                  }
                ],
                application_context: {
                  shipping_preference: "NO_SHIPPING",
                },
              })
            },
            onApprove: async (data, actions) => {
              setPaymentLoading('visible')
              const order = await actions.order.capture();
              const paypalTotal = order.purchase_units[0].amount
              processOrder(paypalTotal, customer)
            },
          })
          .render('#paypalBtns')

EDIT

pic of web html:

enter image description here

Upvotes: 0

Views: 2328

Answers (1)

anatolhiman
anatolhiman

Reputation: 1859

As mentioned in my comment, you can look into manipulating the iframe data with Javascript as suggested here: How to apply CSS to iframe?.

You can try to add new inline style tags or replace the existing ones with Javascript where Paypal use inline css tags, but it's hard to target the right html tag. Where Paypal use css classes you can try to override them with the !important flag on each css property in your own stylesheet, but you have to load these styles after Paypal's style (but before the whole iframe is rendered), so this too has to be injected with JS, otherwise it won't work.

Also: Is manipulating the css styles against Paypal's terms? I would say that's likely. And is manipulating this form good for conversion? Your end users probably trust Paypal, but will they trust a form that says it's Paypal but doesn't look like it?

Upvotes: 1

Related Questions