Stripe js is not showing selected theme styling - Angular 12

Issue

This is my First time that I am integrating Stripe.js in angular project. I have gone through documentation and implement it (Stripe Card Element Method). Stripe implemented and showing me card element in one input field. I don't required single input field, I am looking for pre built themes for stripe element. I added Appearance and client secret but does not picking the theme.

payment-component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-payment',
  templateUrl: './payment.component.html',
  styleUrls: ['./payment.component.css']
})
export class PaymentComponent implements OnInit {

  constructor() {
   

   }
  
  ngOnInit(): void {
    const clientSecret = 'seti_1KawGlBBpoL4ww8PpzEwfTAU_secret_LHVHt3qcV8Cznw8b00vvFUVaaCFbLnc';
    const appearance = {
      theme: 'flat'
};
    var stripe   = Stripe('pk_test_51JkpiuBBpoL4ww8PpO2UfKSTE7M84aESVyaKUCWBqkxwQ3LRgOpQ2fh7hH4hxb2V9sA3e8DwvVIWoHurhryqdAHp00HVNutZkg');
    var elements = stripe.elements({ clientSecret, appearance});
    var cardElement = elements.create('card');
    cardElement.mount('#card-element');
    
  }

}

payment-component.html

<form action="/charge" method="post" id="payment-form">
  <div class="form-row">
    <label for="card-element">Credit or debit card</label>
    <div id="card-element"></div>
    <div id="card-errors" role="alert"></div>
  </div>
  <button>Add payment source</button>
</form>

Output I got Stripe Output

Theme I required looks alike Theme output

Solution

the example you showed is payment element but you are using card element in your code.

The Elements Appearance API doesn’t support individual payment method Elements (such as CardElement) You should use elements.create('payment') (API) to create a payment element.

Answered By - qichuan