Les portefeuilles électroniques avec redirection, comme PayPal, Klarna et Skrill, redirigent l’utilisateur vers le site du système de paiement pour autoriser et confirmer la transaction. Une fois le paiement validé, l’utilisateur est redirigé vers le site du vendeur. Cette méthode garantit la sécurité du paiement, car le vendeur n’accède pas aux données de paiement de l’utilisateur.

Les instructions ci-dessous décrivent la configuration de Headless checkout pour accepter les paiements via des portefeuilles électroniques avec redirection, en utilisant PayPal comme exemple.

1. Créez une page de statut de paiement vers laquelle l’utilisateur sera redirigé après un paiement PayPal. Par exemple : https://example.com/return-page.html.

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

Exemple :

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

3. Créez une page pour afficher le formulaire PayPal. Par exemple : https://example.com/form-page.html.

4. Initialisez l’interface de paiement en spécifiant l’ID du mode de paiement et l’URL de la page d’état.

Exemple :

await headlessCheckout.form.init({
  paymentMethodId: 24, // PayPal payment ID
  returnUrl: 'https://example.com/return-page.html',
});

5. Ajoutez le traitement de l’événement redirect pour rediriger l’utilisateur vers une page externe pour le paiement avec PayPal. Une fois un paiement réussi, l’utilisateur sera redirigé vers la page d’état du paiement (https://example.com/return-page.html).

Exemple :

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