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.

Exemple :

Copy

Full screen

Small screen

<div id="form-container"></div>

Ajoutez le traitement de l’événement show_fields pour l’affichage de nouveaux champs.

Exemple :

Copy

Full screen

Small screen

headlessCheckout.form.onNextAction((nextAction) => {
  switch (nextAction.type) {
    case 'show_fields':
      this.handleShowFieldsAction(nextAction);
  }
});

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.

Exemple :

Copy

Full screen

Small screen

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);
  });
}

Vérification 3-D Secure

Créez une page de statut de paiement vers laquelle l’utilisateur sera redirigé après avoir passé la vérification 3-D Secure. Par exemple : https://example.com/return-page.html.
Ajoutez le composant psdk-status au balisage HTML de l’interface de paiement pour afficher le statut du paiement.

Exemple :

Copy

Full screen

Small screen

@if (showStatus) {
  <psdk-status></psdk-status>
}

Créez une page pour afficher l’interface de paiement. Par exemple : https://example.com/form-page.html.
Initialisez l’interface de paiement en spécifiant l’ID du mode de paiement et l’URL de la page d’état.

Exemple :

Copy

Full screen

Small screen

await headlessCheckout.form.init({
  paymentMethodId: 1380, // Bank card payment ID
  returnUrl: 'http://example.com/return-page.html',
});

Ajoutez le traitement de l’événement redirect pour rediriger l’utilisateur vers une page externe pour la vérification 3-D Secure. Une fois la vérification réussie, l’utilisateur sera redirigé vers la page d’état du paiement (https://example.com/return-page.html).

Exemple :

Copy

Full screen

Small screen

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();
}

Ajoutez le traitement de l’événement 3DS pour la vérification 3-D Secure.

Exemple :

Copy

Full screen

Small screen

headlessCheckout.form.onNextAction((nextAction) => {
  switch (nextAction.type) {
    ...
    case '3DS': {
      show3DS = true;
    }
  }
});

Ajoutez le composant psdk-3ds au balisage HTML de l’interface de paiement pour traiter la vérification 3-D Secure.

Exemple :

Copy

Full screen

Small screen

@if (show3DS) {
  <psdk-3ds></psdk-3ds>
}

Merci pour votre commentaire !

Nous examinerons votre message et l'utiliserons pour améliorer votre expérience.

Dernière mise à jour: 3 Mars 2025

Faute de frappe ou autre erreur dans le texte ? Sélectionnez le texte concerné et appuyez sur Ctrl+Entée.

Your browser is not supported. Please try a different browser

Headless checkout

Cartes bancaires

Entrée de données supplémentaires par l'utilisateur

Vérification 3-D Secure