Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Customizing the appearance of Stripe Payment Element in React

I am currently using the Stripe Payment Element in my React application with the following code:

import { useStripe, useElements, PaymentElement, } from '@stripe/react-stripe-js'

export const PaymentDetails = () => {
  const stripe = useStripe()
  const elements = useElements()

  const paymentElementOptions = {
    layout: 'tabs',
    paymentMethodOrder: ['card']
  }

  return (
    <div className="mb-4">
      <PaymentElement
        id="payment-element"
        options={paymentElementOptions}
      />
    </div>
  )
}

I want to customize the appearance of this payment element align with the theme of my application, specifically changing the colorText for the labels above input fields.

I have reviewed the Stripe documentation, however I wasn’t able to amend the appearance of the payment element.

Any help would be appreciated. Thanks!

Tags:

2

Answers


  1. 0

    You can use the Appearance API to customize the Payment Element to match your own design scheme.

    Login or Signup to reply.
  2. 0

    Trying with colorText will show stripe.elements(): "colorText" is not a supported property for ".Label" in the developer console.

    You can see the supported list of CSS properties for each class here : https://stripe.com/docs/elements/appearance-api?platform=web#supported-css-properties

    Try -webkit-text-fill-color and see if that works for you

     const appearance = {
  rules: {
    '.Label': {
      '-webkit-text-fill-color': '#FFC0CB',
    }
  },
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search