bilbodog

[gusty flare]

This is being added to the payment element:

And this is how it looks when using card:

[dense granite]

Hi 👋 that is expected behavior, the Appearance API is only compatible with the Payment Element.

Card Element appearance customizations are controlled by a style that you pass when creating them:
https://stripe.com/docs/js/elements_object/create_element?type=card#elements_create-options-style
https://stripe.com/docs/js/appendix/style?type=card

[gusty flare]

Are you here able to select the styles from payment?
theme: 'night'

[gusty flare]

But thanks, I was so afraid that it wasn't possible. I will just re-read the docs again, it seems like I've lost something along the way.

[dense granite]

You can also restrict the payment method types that the Payment Element accepts to force it to only accept cards, allowing you to use the Appearance API.

[dense granite]

No, I don't believe so.

[gusty flare]

Okay, but I will just be able to make the design myself, manually, right. 🙂

[dense granite]

As long as you can do it with the settings available in the Style object

[gusty flare]

I am currently using following, does anything look completely off?

<script src="https://js.stripe.com/v3/"></script>
  <script>
    var stripe = Stripe("{{ env('STRIPE_KEY') }}");
    const appearance = {
      rules: {
        '.Input': {
          color: '#a3a4cc',
          border: '1px solid #444564',
          boxShadow: 'none',
        },
        '.Input::placeholder': {
          color: '#a3a4cc'
        },
        '.Label': {
          color: '#a3a4cc'
        },
        '.Input:focus': {
          color: '#fff',
          border: '1px solid #696cff',
          boxShadow: '0 0 0.25rem 0.05rem rgba(255, 255, 255, 0.1)',
        },
      },
      theme: 'night',
      labels: 'floating',
      variables: {
        colorPrimaryText: '#696cff',
        colorBackground: 'rgb(39,40,56)',
        colorDanger: '#ff3e1d',
      }
    };
    const options = { /* options */ };
    const clientSecret = '{{ $intent->client_secret }}';
    const elements = stripe.elements({ clientSecret, appearance });
    const paymentElement = elements.create('card', options);
    paymentElement.mount('#payment-element');

    $("#payment-form").on( "submit", function( event ) {
        event.preventDefault();
        $("#submitBtn").disabled = true;
        stripe.confirmCardSetup(clientSecret, {
            payment_method: {
              card: paymentElement,
            },
          }
        ).then(function(result) {
        if (result.error) {
          var errorElement = document.getElementById('card-errors');
          errorElement.textContent = result.error.message;
        } else {
          console.log(result.setupIntent.payment_method);
        }
      });
    });

[dense granite]

Not offhand (though storing a Card Element object in a variable named paymentElement seems like something that could cause confusion when reviewing the code later)

[gusty flare]

Yeah, that is for playing around. 🙂
Well, thank you very much.

I hope this is enough info for me to achieve my goal.

Else I will be back.
Thanks. 😎 🏖️