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.
- html
1<div id="form-container"></div>
- Agregue el control del evento
show_fieldspara la visualización de los nuevos campos.
- typescript
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.
submitButtonText, puede establecer el texto predeterminado de los botones para cada paso del formulario de pago; por ejemplo, Continue.- typescript
1private handleShowFieldsAction(nextAction: ShowFieldsAction): void {
2 this.form.fields = nextAction.data.fields;
3 if (nextAction.data.submitButtonText) {
4 this.updateSubmitButton(nextAction.data.submitButtonText);
5 }
6 this.updateForm(this.form);
7}
8
9private updateForm(form: Form): void {
10 const visibleFields = form.fields.filter((field) => {
11 return field.isVisible === '1';
12 });
13
14 const controls = visibleFields.map((field) => {
15 if (field.type === 'select') {
16 return this.getSelectControl(field);
17 }
18
19 if (field.type === 'check') {
20 return this.getCheckboxControl(field);
21 }
22
23 if (field.type === 'text') {
24 if (field.name === 'card_number') {
25 return this.getCardNumberControl(field);
26 }
27
28 if (field.name === 'phone') {
29 return this.getPhoneControl(field);
30 }
31
32 return this.getTextControl(field);
33 }
34
35 return null;
36 });
37
38 this.renderForm(controls);
39}
40
41private getSelectControl(field: Field): HTMLElement {
42 const control = new SelectComponent();
43 control.setAttribute('name', field.name);
44 return control;
45}
46
47private getCheckboxControl(field: Field): HTMLElement {
48 const control = new CheckboxComponent();
49 control.setAttribute('name', field.name);
50 return control;
51}
52
53private getCardNumberControl(field: Field): HTMLElement {
54 const control = new CardNumberComponent();
55 control.setAttribute('name', field.name);
56 control.setAttribute('icon', 'true');
57 return control;
58}
59
60private getPhoneControl(field: Field): HTMLElement {
61 const control = new PhoneComponent();
62 control.setAttribute('name', field.name);
63 control.setAttribute('showFlags', 'true');
64 return control;
65}
66
67private getTextControl(field: Field): HTMLElement {
68 const control = new TextComponent();
69 control.setAttribute('name', field.name);
70 return control;
71}
72
73private renderForm(controls: Array<HTMLElement | null>): void {
74 const formContainer = document.querySelector('#form-container');
75 formContainer.nativeElement.innerHTML = '';
76
77 controls.forEach((control) => {
78 if (!control) return;
79 formContainer.nativeElement.append(control);
80 });
81}
3-D Secure
La verificación 3-D Secure puede gestionarse mediante el mecanismo integrado del adquirente o mediante un complemento externo para comerciantes (MPI), que autentica al titular de la tarjeta y envía el resultado al adquirente.
Cuando la verificación se gestiona mediante el mecanismo integrado del adquirente, se redirige al usuario a una URL externa. En este caso, es necesario configurar la gestión del evento redirect.
La verificación a través de un MPI se implementa con el componente psdk-3ds, en el que se utilizan WebSockets. Es necesario configurar la gestión del evento 3DS para que el flujo de desafío funcione correctamente, ya que este proceso de verificación requiere una acción adicional por parte del usuario para confirmar la transacción.
El tipo de verificación que se utilice depende del banco del usuario.
¿Has encontrado una errata u otro error de texto? Selecciona el texto y pulsa Ctrl+Intro.
