Accepter des paiements avec KriyaVersion bêta privée

Découvrez comment configurer votre intégration avec Kriya.

Web

Utilisez le Payment Element pour intégrer un formulaire de paiement Stripe personnalisé sur votre site Web ou application et proposer des moyens de paiement à vos clients. Pour les configurations et personnalisations avancées, consultez le guide d’intégration Accepter un Paiement.

Configurer Stripe
Côté serveur

Pour commencer, créez un compte Stripe.

Utilisez nos bibliothèques officielles pour accéder à l’API Stripe depuis votre application :

Collecter les informations de paiement
Côté client

Vous êtes prêt à recueillir les informations de paiement de votre client à l’aide du composant Element Payment, un composant préconfiguré de l’interface utilisateur qui simplifie cette collecte pour de nombreux moyens de paiement.

Le Payment Element contient un iframe qui envoie les informations de paiement à Stripe de manière sécurisée via une connexion HTTPS. Évitez de placer le Payment Element dans un autre iframe, car certains moyens de paiement nécessitent une redirection vers une autre page pour la confirmation du paiement.

Pour que votre intégration fonctionne, l’adresse de la page de paiement doit commencer par https:// et non par http://. Vous pouvez tester votre intégration sans utiliser le protocole HTTPS, mais n’oubliez pas de l’activer lorsque vous souhaitez commencer à accepter des paiements réels.

Configurer Stripe.js

Le Payment Element est automatiquement disponible en tant que fonctionnalité de Stripe.js. Intégrez le script Stripe.js à votre page de paiement en l’ajoutant au head votre fichier HTML. Chargez toujours Stripe.js directement à partir de js.stripe.com pour rester conforme aux normes PCI. N’incluez pas le script dans un lot et n’en hébergez pas de copie.

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/basil/stripe.js"></script>
</head>

Créez une instance de Stripe avec le code JavaScript suivant sur votre page de paiement :

checkout.js
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

Ajouter le composant Payment Element à votre page de paiement

Le Payment Element doit avoir un emplacement sur votre page de paiement. Créez un nœud DOM (conteneur) vide avec un ID unique dans votre formulaire de paiement :

checkout.html
<form id="payment-form">
  <div id="payment-element">
    <!-- Elements will create form elements here -->
  </div>
  <button id="submit">Submit</button>
  <div id="error-message">
    <!-- Display error message to your customers here -->
  </div>
</form>

Une fois le formulaire ci-dessus chargé, créez une instance Elements avec les paramètres mode, amount et currency. Ces valeurs déterminent les moyens de paiement présentés à votre client. Pour proposer un nouveau moyen de paiement dans votre formulaire, veillez à l’activer dans le Dashboard.

checkout.js
const options = {
  mode: 'payment',
  amount: 1000,
  currency: 'gbp',
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form
const elements = stripe.elements(options);

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');

Vous pouvez personnaliser le Payment Element pour l’adapter au design de votre site en transmettant l’objet Appearance dans les options lors de la création du fournisseur Elements.

Collecter les adresses

Par défaut, le composant Payment Element ne collecte que les informations nécessaires relatives à l’adresse de facturation. Si vous souhaitez obtenir l’adresse de facturation (par exemple, pour calculer la taxe sur les biens et services numériques) ou l’adresse de livraison complètes d’un client, utilisez le composant Address Element.

Créer un PaymentIntent
Côté serveur

Exécuter une logique métier personnalisée immédiatement avant la confirmation du paiement

Accédez à l’étape 5 du guide « Finaliser » les paiements pour exécuter votre logique métier personnalisée immédiatement avant la confirmation du paiement. Sinon, suivez la procédure ci-dessous pour une intégration plus simple, qui utilise stripe.confirmPayment au niveau du client afin de confirmer le paiement et gérer les actions qui pourraient suivre.

Lorsque le client envoie votre formulaire de paiement, utilisez un PaymentIntent pour faciliter le processus de confirmation et de paiement. Créez un PaymentIntent sur votre serveur avec les paramètres amount et currency. Pour éviter que des clients malveillants ne choisissent eux-mêmes leurs tarifs, fixez systématiquement le montant à débiter côté serveur (un environnement sécurisé) plutôt que côté client.

L’objet PaymentIntent contient une clé secrète du client. Renvoyez cette valeur côté client afin que Stripe.js l’utilise pour finaliser le processus de paiement en toute sécurité.

Envoyer le paiement à Stripe
Côté client

Utilisez stripe.confirmPayment pour finaliser le paiement à l’aide des informations du composant Payment Element.

Ajoutez un paramètre return_url à cette fonction pour indiquer à Stripe où rediriger l’utilisateur une fois le paiement effectué. Dans un premier temps, votre utilisateur sera peut-être redirigé vers un site intermédiaire, comme une page d’autorisation bancaire, avant d’être redirigé vers l’URL return_url. Une fois le paiement par carte abouti, l’utilisateur est immédiatement redirigé vers l’URL return_url.

Si vous ne souhaitez pas effectuer de redirection à la fin des paiements par carte, vous pouvez définir le paramètre redirect sur if_required. De cette manière, seuls les clients qui choisissent un moyen de paiement avec redirection seront redirigés.

checkout.js
const form = document.getElementById('payment-form');
const submitBtn = document.getElementById('submit');

const handleError = (error) => {
  const messageContainer = document.querySelector('#error-message');
  messageContainer.textContent = error.message;
  submitBtn.disabled = false;
}

form.addEventListener('submit', async (event) => {
  // We don't want to let default form submission happen here,
  // which would refresh the page.
  event.preventDefault();

  // Prevent multiple form submissions
  if (submitBtn.disabled) {
    return;
  }

  // Disable form submission while loading
  submitBtn.disabled = true;

  // Trigger form validation and wallet collection
  const {error: submitError} = await elements.submit();
  if (submitError) {
    handleError(submitError);
    return;
  }

  // Create the PaymentIntent and obtain clientSecret
  const res = await fetch("/create-intent", {
    method: "POST",
  });

  const {client_secret: clientSecret} = await res.json();

  // Confirm the PaymentIntent using the details collected by the Payment Element
  const {error} = await stripe.confirmPayment({
    elements,
    clientSecret,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  if (error) {
    // This point is only reached if there's an immediate error when
    // confirming the payment. Show the error to your customer (for example, payment details incomplete)
    handleError(error);
  } else {
    // Your customer is redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer is redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});

FacultatifGérer les événements post-paiement

Stripe envoie un événement payment_intent.succeeded à l’issue du paiement. Utilisez le Dashboard, un webhook personnalisé ou une solution partenaire pour recevoir ces événements et exécuter des actions, comme envoyer une confirmation de commande par e-mail à votre client, enregistrer la vente dans une base de données ou lancer un workflow de livraison.

Plutôt que d’attendre un rappel de votre client, écoutez ces événements. En effet, côté client, l’acheteur pourrait fermer la fenêtre de son navigateur ou quitter l’application avant l’exécution du rappel. Des personnes malveillantes peuvent en profiter pour manipuler la réponse. Si vous configurez votre intégration de manière à écouter les événements asynchrones, cela vous permettra également d’accepter de nouveaux moyens de paiement plus facilement à l’avenir. Apprenez-en davantage sur les différences entre les différents moyens de paiement pris en charge.

Gérer les événements manuellement dans le Dashboard
Utilisez le Dashboard pour afficher vos paiements de test dans le Dashboard, envoyer des reçus par e-mail, gérer les virements ou réessayer les paiements échoués.
Créer un webhook personnalisé
Créez un gestionnaire de webhook personnalisé pour écouter les événements et créer des tunnels de paiement asynchrones personnalisés. Testez et déboguez votre intégration de webhook localement avec la CLI Stripe.
Intégrer une application prédéfinie
Gérez les événements commerciaux courants, tels que l’automatisation ou le marketing et les ventes, en intégrant une application partenaire.

FacultatifAutorisation et capture distinctes

Vous pouvez séparer l’autorisation de la capture pour créer un paiement maintenant, mais capturer les fonds ultérieurement. Stripe annule le PaymentIntent et envoie un événement payment_intent.canceled si le paiement n’est pas capturé dans un délai de 7 jours.

Si vous avez la certitude de ne pas pouvoir capturer le paiement, nous vous recommandons d’annuler le PaymentIntent plutôt que d’attendre la fin de la période de 7 jours.

Indiquer à Stripe d’autoriser uniquement

Pour indiquer que vous voulez séparer l’autorisation de la capture, définissez capture_method sur manual lorsque vous créez le PaymentIntent. Ce paramètre indique à Stripe d’autoriser uniquement le montant sur le compte Kriya du client.

Capturer les fonds

Une fois l’autorisation réussie, l’état du PaymentIntent passe à requires_capture. Pour capturer les fonds autorisés, faites une demande de capture du PaymentIntent.

Par défaut, Stripe capture le montant total autorisé. Vous pouvez également spécifier un montant amount_to_capture inférieur ou égal au total.

Facultatif Annuler l’autorisation

Si vous devez annuler une autorisation, vous pouvez annuler le PaymentIntent.

Tester votre intégration

Pour tester votre intégration, choisissez le moyen de paiement et appuyez sur Payer. Dans un environnement de test, cela vous redirige vers une page de paiement de test, dans laquelle vous pouvez autoriser ou refuser le paiement.

En mode production, le fait d’appuyer sur Payer vous redirige vers le site Web de Kriya. Vous n’avez pas la possibilité d’autoriser ou de refuser le paiement avec Kriya.

Codes d’erreur

Le tableau suivant détaille les codes d’erreur courants et les actions recommandées :

Code d’erreur	Action recommandée
`payment_intent_invalid_currency`	Spécifiez une devise prise en charge.
`missing_required_parameter`	Consultez le message d’erreur pour en savoir plus sur le paramètre requis.
`payment_intent_payment_attempt_failed`	Ce code peut apparaître dans le champ last_payment_error.code d’un PaymentIntent. Consultez le message d’erreur pour connaître la raison détaillée de l’échec et obtenir une suggestion de traitement de l’erreur.
`payment_intent_authentication_failure`	Ce code peut apparaître dans le champ last_payment_error.code d’un PaymentIntent. Consultez le message d’erreur pour connaître le motif détaillé de l’échec et obtenir une suggestion sur la gestion de l’erreur. Cette erreur se produit lorsque vous déclenchez manuellement un échec lors du test de votre intégration.
`payment_intent_redirect_confirmation_without_return_url`	Précisez une `return_url` lors de la confirmation d’un PaymentIntent.