Esta es la primera vez que integro Stripe.js en un proyecto angular. Revisé la documentación y la implementé (método de elemento de tarjeta de banda) . Stripe implementado y mostrándome el elemento de la tarjeta en un campo de entrada. No necesito un campo de entrada único, estoy buscando temas prediseñados para el elemento de franja. Agregué Apariencia y secreto del cliente, pero no elegí el tema.
componente-pago.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'); } }componente-pago.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>Salida Obtuve Stripe Salida
El tema que necesitaba se parece a la salida del tema
el ejemplo que mostró es un elemento de payment pero está utilizando un elemento de card en su código.
La API de apariencia de elementos no admite elementos de métodos de pago individuales (como CardElement). Debe usar elements.create('payment') ( API ) para crear un elemento de payment .
