Cartões bancários
Para configurar pagamentos usando cartões bancários, você pode seguir as instruções de configuração básicas. Se o usuário precisar inserir dados adicionais para concluir o pagamento, como ao pagar com cartões brasileiros, ou passar a verificação 3-D Secure, use as instruções fornecidas abaixo.
Entrada de dados adicionais do usuário
- Adicione um contêiner para o formulário da interface de pagamento.
Copy
- html
<div id="form-container"></div>
- Adicione a manipulação do evento
show_fieldspara a exibição de campos novos.
Copy
- typescript
headlessCheckout.form.onNextAction((nextAction) => {
switch (nextAction.type) {
case 'show_fields':
this.handleShowFieldsAction(nextAction);
}
});
- Crie os campos de interface de pagamento para inserir dados adicionais, como um nome do titular do cartão, ou endereço de cobrança.
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);
});
}
Verificação 3-D Secure
Crie uma página de status de pagamento onde o usuário será redirecionado depois de passar a verificação 3-D Secure. Por exemplo,
https://example.com/return-page.html.Adicione o componente
psdk-statusà marcação HTML da interface de pagamento para exibir um status de pagamento.
Exemplo:
Copy
- html
@if (showStatus) {
<psdk-status></psdk-status>
}
Crie uma página para exibir a interface de pagamento. Por exemplo,
https://example.com/form-page.html.Inicialize a interface de pagamento especificando o ID do método de pagamento e o URL da página de status.
Exemplo:
Copy
- typescript
await headlessCheckout.form.init({
paymentMethodId: 1380, // Bank card payment ID
returnUrl: 'http://example.com/return-page.html',
});
- Adicione a manipulação do evento
redirectpara redirecionar o usuário a uma página externa para a verificação 3-D Secure. Depois de uma verificação bem-sucedida, o usuário será redirecionado para a página de status de pagamento (https://example.com/return-page.html).
Exemplo:
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();
}
Este artigo foi útil?
Obrigado pelo seu feedback!
Avaliaremos sua mensagem e a usaremos para melhorar sua experiência.Encontrou um erro de texto ou digitação? Selecione o texto e pressione Ctrl+Enter.
