你好，我正试图挂载Stripe的输入字段接受信用卡/借记卡.我知道我应该使用支付元素作为对文档的说法.我使用node.js与离子5角15电容器5.按照HTML我使用

<form id="payment-form" (ngSubmit)="subscribe()">
    <div id="payment-element">
      <!-- Elements will create form elements here -->
    </div>
    <button type="submit" id="submit">Subscribe</button>
    <div id="error-message">
      <!-- Display error message to your customers here -->
    </div>
  </form>

字符串
而我的组件.ts是这个验证码

import { Component, AfterViewInit } from '@angular/core';
import { Router } from '@angular/router';
import { UserData } from 'src/app/services/user-data/user-data';
import { loadStripe, Stripe, StripeElements, StripeCardElement, StripeElementsOptions, } from '@stripe/stripe-js';

@Component({
  selector: 'app-subscription',
  templateUrl: 'subscription.page.html',
  styleUrls: ['subscription.page.scss'],
})
export class SubscriptionPage {
  stripe: Stripe;
  elements: StripeElements;
  paymentElement: StripeCardElement;
  clientSecret: string = ''; // You need to set this to your actual client secret
  appearance: any = { /* appearance */ };

  user: any = {};
  email: string = '';
  uid: string = '';

  cardDetail: any = {
    name: '',
    cardNumber: '',
    expiryDate: '',
    securityCode: '',
  };

  menuOpenCopyright: boolean = false;

  modalOpen: boolean = false;
  cardInputFocused: boolean = false;

  constructor(public router: Router, public userData: UserData) {
    this.user = this.userData.getUserData();
    this.uid = this.user.uid;
    this.email = this.user.email;
  }

  async ngAfterViewInit() {
    // Initialize Stripe with your publishable key
    this.initializeStripe();
  }

  async initializeStripe() {
    try {
      // Load Stripe.js
      const stripePromise = loadStripe('your_publishable_key'); // Replace with your actual publishable key
      const stripe = await stripePromise;

      // Set up Stripe.js and Elements
      const elements = stripe.elements();
      const paymentElement = elements.create('card');
      paymentElement.mount('#payment-element');

      // Set the payment element to the class property
      this.paymentElement = paymentElement;
      this.stripe = stripe;
      this.elements = elements;
    } catch (error) {
      console.error('Error initializing Stripe:', error);
    }
  }
  
  

  async subscribe() {
    try {
     event.stopPropagation();
    console.log('Card Number: ' + this.cardDetail.cardNumber);

    // Destroy the existing card element if it exists
    if (this.paymentElement) {
      this.paymentElement.destroy();
    }

    this.elements = this.stripe.elements({ appearance: this.appearance });

    // Create a new payment element
    this.paymentElement = this.elements.create('card');

    // Mount the card element to the 'payment-element' container
    this.paymentElement.mount('#payment-element');

      // Tokenize the card details using the new cardElement
      const { token, error } = await this.stripe.createToken(this.paymentElement, {
        name: this.cardDetail.name,
        address_line1: '', // Include any relevant address information here
        address_city: '', // Include city information here
        address_state: '', // Include state information here
        address_zip: '', // Include ZIP code here
        address_country: '', // Include country information here
      });

      if (!error) {
        console.log('Tokenization successful');

        const paymentData = {
          email: this.cardDetail.email,
          token: token.id,
          uid: this.uid,
          name: this.cardDetail.name,
          business: this.cardDetail.business,
        };
  
        // Send the token and user's email to your server
        this.userData.createCustomer(paymentData).subscribe((customerResponse: any) => {
          if (customerResponse.success) {
            const customerId = customerResponse.customer.id;
            console.log('Customer created:', customerResponse.customer);
            this.userData.createSetupIntent(customerId).subscribe((setupIntentResponse: any) => {
              if (setupIntentResponse.success) {
                const setupIntentClientSecret = setupIntentResponse.setupIntent.client_secret;
  
                // Create a subscription with the saved payment method
                const planId = 'price_1O2VVjGozbMWFnurNiXUurH7'; // Replace with your actual pricing plan ID
                this.userData.createSubscription(customerId, planId).subscribe((subscriptionResponse: any) => {
                  if (subscriptionResponse.success) {
                    console.log('Subscription successful:', subscriptionResponse.subscription);
                  } else {
                    console.error(subscriptionResponse.error);
                  }
                });
              } else {
                console.error(setupIntentResponse.error);
              }
            });
          } else {
            console.error(customerResponse.error);
            console.error('Error creating customer:', customerResponse.error);
          }
        });
      } else {
        console.error('Tokenization error:', error);
        // Handle the error if tokenization fails
        console.error(error);
      }
    } catch (error) {
      console.error('Error in subscribe:', error);
      console.error(error);
    }
  }

型
该客户端，客户端SetupIntent工作正常，我可以显示输入字段，把卡号，CVC和到期日期，但它不是风格，我需要做一些关于外观？