Intégrer le SDK côté application

Après l’installation et l’initialisation du SDK :

1. Initialisez l’interface de paiement en spécifiant l’ID du mode de paiement et l’URL de redirection :
   • La méthode headlessCheckout.form.init renvoie un objet utilisé pour une interaction ultérieure avec l’interface de paiement ;
   • L’URL de redirection est utilisée pour rediriger l’utilisateur, par exemple, après la vérification 3-D Secure.

await headlessCheckout.form.init({
  paymentMethodId: ID,
  returnUrl: 'returnUrl',
});

2. Ajoutez le composant suivant au balisage HTML de l’interface de paiement :
   • Composants obligatoires :
     • psdk-legal — pour afficher des informations sur les documents juridiques,
     • psdk-total — pour afficher le montant total des achats ;
   • Composants du formulaire de paiement. Vous pouvez utiliser le composant intégré psdk-payment-form ou créer manuellement des éléments d’interface de paiement à l’aide des composants prêts à l’emploi ;
   • Le composant bouton de paiement — psdk-submit-button.

<psdk-legal></psdk-legal>
<psdk-total></psdk-total>


<psdk-payment-form></psdk-payment-form>
<psdk-submit-button text="Pay"></psdk-submit-button>

3. Ajoutez le traitement de l’événement check_status pour suivre le changement de statut du paiement.

headlessCheckout.form.onNextAction((nextAction) => {
  switch (nextAction.type) {
    case 'check_status': {
      showStatus = true;
    }
  }
});

4. Ajoutez le composant psdk-status au balisage HTML de l’interface de paiement pour afficher le statut du paiement.

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