Para establecer pagos con tarjetas bancarias, puede seguir las instrucciones básicas de configuración. Si el usuario tiene que introducir datos adicionales para realizar el pago, como p. ej., al pagar con tarjetas brasileñas, o superar la verificación 3-D Secure, use las instrucciones que se facilitan a continuación.

Introducción de datos de usuario adicionales

Agregue un contenedor para el formulario de la interfaz de pago.

Ejemplo:

Copy

Full screen

Small screen

1<div id="form-container"></div>

Agregue el control del evento show_fields para la visualización de los nuevos campos.

Ejemplo:

Copy

Full screen

Small screen

1headlessCheckout.form.onNextAction((nextAction) => {
2  switch (nextAction.type) {
3    case 'show_fields':
4      this.handleShowFieldsAction(nextAction);
5  }
6});

Cree los campos de la interfaz de pago para introducir datos adicionales; p. ej., el nombre del titular de la tarjeta o la dirección de facturación.

Ejemplo:

Copy

Full screen

Small screen

 1private handleShowFieldsAction(nextAction: ShowFieldsAction): void {
 2  this.form.fields = nextAction.data.fields;
 3  this.updateForm(this.form);
 4}
 5
 6private updateForm(form: Form): void {
 7  const visibleFields = form.fields.filter((field) => {
 8    return field.isVisible === '1';
 9  });
10
11  const controls = visibleFields.map((field) => {
12    if (field.type === 'select') {
13      return this.getSelectControl(field);
14    }
15
16    if (field.type === 'check') {
17      return this.getCheckboxControl(field);
18    }
19
20    if (field.type === 'text') {
21      if (field.name === 'card_number') {
22        return this.getCardNumberControl(field);
23      }
24
25      if (field.name === 'phone') {
26        return this.getPhoneControl(field);
27      }
28
29      return this.getTextControl(field);
30    }
31
32    return null;
33  });
34
35  this.renderForm(controls);
36}
37
38private getSelectControl(field: Field): HTMLElement {
39  const control = new SelectComponent();
40  control.setAttribute('name', field.name);
41  return control;
42}
43
44private getCheckboxControl(field: Field): HTMLElement {
45  const control = new CheckboxComponent();
46  control.setAttribute('name', field.name);
47  return control;
48}
49
50private getCardNumberControl(field: Field): HTMLElement {
51  const control = new CardNumberComponent();
52  control.setAttribute('name', field.name);
53  control.setAttribute('icon', 'true');
54  return control;
55}
56
57private getPhoneControl(field: Field): HTMLElement {
58  const control = new PhoneComponent();
59  control.setAttribute('name', field.name);
60  control.setAttribute('showFlags', 'true');
61  return control;
62}
63
64private getTextControl(field: Field): HTMLElement {
65  const control = new TextComponent();
66  control.setAttribute('name', field.name);
67  return control;
68}
69
70private renderForm(controls: Array<HTMLElement | null>): void {
71  const formContainer = document.querySelector('#form-container');
72  formContainer.nativeElement.innerHTML = '';
73
74  controls.forEach((control) => {
75    if (!control) return;
76    formContainer.nativeElement.append(control);
77  });
78}

3-D Secure

Cree una página de estado de pago a la cual se redirigirá al usuario tras superar la verificación 3-D Secure. Por ejemplo, https://example.com/return-page.html.
Agregue el componente psdk-status al marcado HTML de la interfaz de pago para mostrar un estado de pago.

Ejemplo:

Copy

Full screen

Small screen

1@if (showStatus) {
2  <psdk-status></psdk-status>
3}

Cree una página para mostrar la interfaz de pago. Por ejemplo, https://example.com/form-page.html.
Inicialice la interfaz de pago indicando el ID del método de pago y la URL de la página de estado.

Ejemplo:

Copy

Full screen

Small screen

1await headlessCheckout.form.init({
2  paymentMethodId: 1380, // Bank card payment ID
3  returnUrl: 'http://example.com/return-page.html',
4});

Agregue el control del evento redirect para redirigir al usuario a una página externa para la verificación 3-D Secure. Tras la verificación correcta, al usuario se le redirige a la página de estado del pago (https://example.com/return-page.html).

Ejemplo:

Copy

Full screen

Small screen

 1headlessCheckout.form.onNextAction((nextAction) => {
 2  switch (nextAction.type) {
 3    case 'redirect':
 4      this.handleRedirectAction(nextAction);
 5  }
 6});
 7
 8private handleRedirectAction(redirectAction: RedirectAction): void {
 9  const url = this.buildRedirectUrl(redirectAction);
10  window.location.href = url; // redirect to 3-D Secure page
11}
12
13private buildRedirectUrl(redirectAction: RedirectAction): string {
14  const url = new URL(redirectAction.data.redirect.redirectUrl);
15  const params = Object.entries(redirectAction.data.redirect.data);
16  params.forEach((entry) => {
17    const [key, value] = entry;
18    url.searchParams.append(key, value);
19  });
20  return url.toString();
21}

Agregue el control del evento 3DS para la verificación 3-D Secure.

Ejemplo:

Copy

Full screen

Small screen

1headlessCheckout.form.onNextAction((nextAction) => {
2  switch (nextAction.type) {
3    ...
4    case '3DS': {
5      show3DS = true;
6    }
7  }
8});

Agregue el componente psdk-3ds al marcado HTML de la interfaz de pago para procesar la verificación 3-D Secure.

Ejemplo:

Copy

Full screen

Small screen

1@if (show3DS) {
2  <psdk-3ds></psdk-3ds>
3}

¡Gracias por tu mensaje!

Nos ayudará a mejorar tu experiencia.

Última actualización: 20 de Junio de 2025

¿Has encontrado una errata u otro error de texto? Selecciona el texto y pulsa Ctrl+Intro.

Contenidos

Introducción de datos de usuario adicionales
3-D Secure

Your browser is not supported. Please try a different browser

Tarjetas bancarias

Introducción de datos de usuario adicionales

3-D Secure