Stripe js 未显示选定的主题样式 - Angular 12

Question

这是我第一次将 Stripe.js 集成到 Angular 项目中。 我已经阅读了文档并实现了它（条纹卡元素方法）。 Stripe 已实现，并在一个输入字段中向我显示卡片元素。 我不需要单个输入字段，我正在寻找条纹元素的预构建主题。 我添加了外观和客户端密钥，但没有选择主题。

付款组件.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');
    
  }

}

付款组件.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>

我得到的输出 条纹输出

我需要的主题看起来很相似 主题输出

Answer 1

您显示的示例是 payment 元素，但您在代码中使用 card 元素。

Elements Appearance API 不支持单独的付款方式 Elements（例如 CardElement）您应该使用 elements.create(' payment') (API) 创建 payment 元素。