Cartes bancaires
Pour configurer les paiements par carte bancaire, suivez les instructions de configuration de base. Si l’utilisateur doit entrer des données supplémentaires pour effectuer le paiement, par exemple lorsqu’il paie avec des cartes brésiliennes, ou pour passer la vérification 3-D Secure, utilisez les instructions fournies ci-dessous.
Entrée de données supplémentaires par l'utilisateur
- Ajoutez un conteneur pour le formulaire de l’interface de paiement.
Copy
- html
1<div id="form-container"></div>
- Ajoutez le traitement de l’événement
show_fieldspour l’affichage de nouveaux champs.
Copy
- typescript
1headlessCheckout.form.onNextAction((nextAction) => {
2 switch (nextAction.type) {
3 case 'show_fields':
4 this.handleShowFieldsAction(nextAction);
5 }
6});
- Créez les champs de l’interface de paiement pour l’entrée de données supplémentaires, telles que le nom du titulaire de la carte ou l’adresse de facturation.
Copy
- typescript
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}
Vérification 3-D Secure
Cet article vous a été utile ?
Merci pour votre commentaire !
Nous examinerons votre message et l'utiliserons pour améliorer votre expérience.Faute de frappe ou autre erreur dans le texte ? Sélectionnez le texte concerné et appuyez sur Ctrl+Entrée.
