Tarjetas bancarias

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

<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

headlessCheckout.form.onNextAction((nextAction) => {
  switch (nextAction.type) {
    case 'show_fields':
      this.handleShowFieldsAction(nextAction);
  }
});

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

private handleShowFieldsAction(nextAction: ShowFieldsAction): void {
  this.form.fields = nextAction.data.fields;
  this.updateForm(this.form);
}

private updateForm(form: Form): void {
  const visibleFields = form.fields.filter((field) => {
    return field.isVisible === '1';
  });

  const controls = visibleFields.map((field) => {
    if (field.type === 'select') {
      return this.getSelectControl(field);
    }

    if (field.type === 'check') {
      return this.getCheckboxControl(field);
    }

    if (field.type === 'text') {
      if (field.name === 'card_number') {
        return this.getCardNumberControl(field);
      }

      if (field.name === 'phone') {
        return this.getPhoneControl(field);
      }

      return this.getTextControl(field);
    }

    return null;
  });

  this.renderForm(controls);
}

private getSelectControl(field: Field): HTMLElement {
  const control = new SelectComponent();
  control.setAttribute('name', field.name);
  return control;
}

private getCheckboxControl(field: Field): HTMLElement {
  const control = new CheckboxComponent();
  control.setAttribute('name', field.name);
  return control;
}

private getCardNumberControl(field: Field): HTMLElement {
  const control = new CardNumberComponent();
  control.setAttribute('name', field.name);
  control.setAttribute('icon', 'true');
  return control;
}

private getPhoneControl(field: Field): HTMLElement {
  const control = new PhoneComponent();
  control.setAttribute('name', field.name);
  control.setAttribute('showFlags', 'true');
  return control;
}

private getTextControl(field: Field): HTMLElement {
  const control = new TextComponent();
  control.setAttribute('name', field.name);
  return control;
}

private renderForm(controls: Array<HTMLElement | null>): void {
  const formContainer = document.querySelector('#form-container');
  formContainer.nativeElement.innerHTML = '';

  controls.forEach((control) => {
    if (!control) return;
    formContainer.nativeElement.append(control);
  });
}

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

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

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

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

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

headlessCheckout.form.onNextAction((nextAction) => {
  switch (nextAction.type) {
    case 'redirect':
      this.handleRedirectAction(nextAction);
  }
});

private handleRedirectAction(redirectAction: RedirectAction): void {
  const url = this.buildRedirectUrl(redirectAction);
  window.location.href = url; // redirect to 3-D Secure page
}

private buildRedirectUrl(redirectAction: RedirectAction): string {
  const url = new URL(redirectAction.data.redirect.redirectUrl);
  const params = Object.entries(redirectAction.data.redirect.data);
  params.forEach((entry) => {
    const [key, value] = entry;
    url.searchParams.append(key, value);
  });
  return url.toString();
}

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

Ejemplo:

Copy

Full screen

Small screen

headlessCheckout.form.onNextAction((nextAction) => {
  switch (nextAction.type) {
    ...
    case '3DS': {
      show3DS = true;
    }
  }
});

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

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

¡Gracias por tu mensaje!

Nos ayudará a mejorar tu experiencia.

Última actualización: 3 de Marzo de 2025

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

Your browser is not supported. Please try a different browser

Headless checkout

Tarjetas bancarias

Introducción de datos de usuario adicionales

3-D Secure