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

Question

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

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

}

付款-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>

我得到的输出 Stripe Output

我需要的主题很像 Theme output

Answer 1

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

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

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

Stripe js is not showing selected theme styling - Angular 12

javascript

angular

stripe-payments

payment-gateway