Stripe Rules object for Classes not working? How to fix it?

Question

const stripe = Stripe('{{env('STRIPE_KEY')}}'); const elements = stripe.elements();

const style = { base: { color: '#32325d', fontSize: '16px', '::placeholder': { color: '#aab7c4' }, ':-webkit-autofill': { color: '#32325d', }, }, invalid: { color: '#fa755a', iconColor: '#fa755a', ':-webkit-autofill': { color: '#fa755a', }, }, rules: { '.Input': { border: '1px solid red', boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(18, 42, 66, 0.02)', }, }, };

const options = { style: style, disabled: false, hideIcon: false, iconStyle: "default", }

const auBankAccount = elements.create('auBankAccount', options);

Answer 1

rules is specifically for the Elements Appearance API. According to Stripe's docs, this API can't be used with individual Elements (like auBankAccount) so rules should be removed from your style object.

If you really want to use rules, you'll need to switch to using the PaymentElement instead.