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.
Copy
- html
<div id="form-container"></div>
- Agregue el control del evento
show_fieldspara la visualización de los nuevos campos.
Copy
- typescript
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.
Copy
- typescript
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-statusal marcado HTML de la interfaz de pago para mostrar un estado de pago.
Ejemplo:
Copy
- html
@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
- typescript
await headlessCheckout.form.init({
paymentMethodId: 1380, // Bank card payment ID
returnUrl: 'http://example.com/return-page.html',
});
- Agregue el control del evento
redirectpara 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
- typescript
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();
}
¿Te ha resultado útil este artículo?
¡Gracias por tu mensaje!
Nos ayudará a mejorar tu experiencia.¿Has encontrado una errata u otro error de texto? Selecciona el texto y pulsa Ctrl+Intro.
