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.
- html
1<div id="form-container"></div>
- Ajoutez le traitement de l’événement
show_fieldspour l’affichage de nouveaux champs.
- 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.
submitButtonText, vous pouvez définir le texte par défaut des boutons pour chaque étape du formulaire de paiement, par exemple 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}
Vérification 3-D Secure
La vérification 3-D Secure s’effectue soit par le mécanisme intégré de l’acquéreur, soit par un module externe Merchant Plug-In (MPI), qui authentifie le titulaire de la carte et transmet le résultat à l’acquéreur.
Lorsque la vérification est gérée par le mécanisme intégré de l’acquéreur, l’utilisateur est redirigé vers une URL externe. Dans ce cas, vous devez configurer la gestion de l’événement redirect.
La vérification via un MPI est implémentée à l’aide du composant psdk-3ds, qui utilise des WebSockets. Vous devez configurer la gestion de l’événement 3DS pour assurer le bon fonctionnement du flux de vérification, car ce processus nécessite une action supplémentaire de l’utilisateur pour confirmer la transaction.
Le choix du type de vérification dépend de la banque de l’utilisateur.
Faute de frappe ou autre erreur dans le texte ? Sélectionnez le texte concerné et appuyez sur Ctrl+Entrée.
