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.

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

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.

1<psdk-legal></psdk-legal>
2<psdk-total></psdk-total>
3
4
5<psdk-payment-form></psdk-payment-form>
6<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.

1headlessCheckout.form.onNextAction((nextAction) => {
2  switch (nextAction.type) {
3    case 'check_status': {
4      showStatus = true;
5    }
6  }
7});

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

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