Configurer un abonnement avec Klarna

Découvrez comment créer et facturer un abonnement avec Klarna.

Suivez ce guide pour configurer un abonnement avec Klarna comme moyen de paiement.

Dans un premier temps, vous devez créer un compte Stripe. S’inscrire maintenant.

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

Créer un produit et un tarif
Dashboard

Les produits correspondent aux articles ou services que vous vendez. Les tarifs définissent le montant et la fréquence des paiements facturés pour un produit. Le tarif prend en compte la valeur du produit, la devise que vous acceptez et s’il s’agit d’un paiement ponctuel ou récurrent. Si vous n’avez que quelques produits et tarifs, créez-les et gérez-les dans le Dashboard.

Ce guide prend comme exemple un service de banque d’images qui débite ses clients d’un montant de 15 USD pour un abonnement mensuel. Pour modéliser ceci :

Rendez-vous à la page Ajouter un produit.
Saisissez un Nom pour le produit.
Saisissez 15 pour le tarif.
Sélectionnez la devise USD.
Cliquez sur Enregistrer le produit.

Après avoir créé le produit et le tarif, enregistrez l’ID de tarif de manière à pouvoir l’utiliser dans les étapes ultérieures. La page des tarifs affiche l’ID dont le format est similaire à ce qui suit : price_G0FvDp6vZvdwRZ.

Créer un abonnement
Côté serveur

Créez un abonnement avec un tarif et un client à l’état incomplete en attribuant au paramètre payment_behavior la valeur default_incomplete. Définissez le paramètre payment_settings.save_default_payment_method=on_subscription pour enregistrer un moyen de paiement lors de l’activation de l’abonnement.

La réponse inclut la première facture de l’abonnement. Celui-ci contient les paiements de la facture, qui inclut un PaymentIntent par défaut que Stripe a généré pour cette facture et la clé secrète de confirmation que vous pouvez envoyer au client afin qu’il finalise le processus de paiement en toute sécurité au lieu de lui transmettre la totalité de l’objet PaymentIntent. Obtenez l’ID PaymentIntent que vous devez utiliser pour confirmer un paiement provenant de latest_invoice.payments. Renvoyez le latest_invoice.confirmation_secret.client_secret au front-end pour finaliser le paiement.

Configurer un essai

Vous pouvez configurer des abonnements avec des essais gratuits. Découvrez comment retarder les paiements d’abonnements actifs avec des périodes d’essai.

Collecter les informations de paiement
Côté client

Configurer Stripe Elements

Le composant 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 entre les balises head de votre fichier HTML. Chargez toujours Stripe.js directement à partir de js.stripe.com pour maintenir votre conformité PCI. Vous ne devez pas inclure le script dans un lot ni en héberger de copie.

subscribe.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/basil/stripe.js"></script>
</head>
<body>
  <!-- content here -->
</body>

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

subscribe.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

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

subscribe.html
<form id="payment-form">
  <div id="payment-element">
    <!-- Elements will create form elements here -->
  </div>
  <button id="submit">Subscribe</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 de l’Element Payment et montez-la sur le nœud DOM conteneur. À l’étape de création de l’abonnement, vous avez transmis la valeur client_secret à votre front-end. Transmettez cette valeur en tant qu’option lors de la création de l’instance de l’Element.

subscribe.js
const options = {
  clientSecret: '{{CLIENT_SECRET}}',
};

// Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in step 5
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');

Le composant Payment Element affiche un formulaire dynamique qui permet à votre client de sélectionner un moyen de paiement. Le formulaire collecte automatiquement toutes les informations de paiement nécessaires pour le moyen de paiement sélectionné.

Effectuer le paiement

Utilisez stripe.confirmPayment pour mener à bien le paiement à l’aide des informations du composant Payment Element et activer l’abonnement. Un PaymentMethod est alors créé et le premier PaymentIntent de l’abonnement incomplet est confirmé, ce qui déclenche le processus de paiement.

Stripe redirige le client vers Klarna pour effectuer le premier paiement et les paiements suivants. Fournissez une return_url pour indiquer où l’utilisateur doit être redirigé après avoir finalisé le paiement sur Klarna.

subscribe.js
const form = document.getElementById('payment-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const {error} = await stripe.confirmPayment({
    //`Elements` instance that was used to create the Payment Element
    elements,
    confirmParams: {
      return_url: "https://example.com/order/123/complete",
      mandate_data: {
        customer_acceptance: {
          type: "online",
          online: {
            infer_from_client: true,
          }
        }
      }
    }
  });

  if (error) {
    // This point will only be reached if there is an immediate error when
    // confirming the payment. Show error to your customer (for example, payment
    // details incomplete)
    const messageContainer = document.querySelector('#error-message');
    messageContainer.textContent = error.message;
  }
});

Une fois que l’utilisateur a été redirigé, interrogez le PaymentIntent pour vérifier son état. Si l’état est succeeded, le paiement a été effectué et votre abonnement est désormais actif.

Tester votre intégration

Nous avons réuni ci-dessous des données de test pour les pays pris en charge. Dans un environnement de test, Klarna s’appuie sur l’adresse e-mail fournie pour approuver ou refuser une transaction.

	Approuvé	Refusé
Date de naissance	10/07/1970	03-05-1994
Prénom	Test	John
Nom	Person-au	snow
Rue	Wharf St	Silverwater Rd
Numéro de rue	4	1-5
Code postal	4877	2128
Ville	Port Douglas	Silverwater
Région	QLD	NSW
Téléphone	+61473752244	+61473763254
Adresse e-mail	customer@email.au	customer+denied@email.au

Authentification à deux facteurs

Tout numéro à six chiffres forme un code d’authentification à deux facteurs valide. Utilisez 999999pour que l’authentification échoue.

Mode de remboursement

Dans le flux Klarna, vous pouvez utiliser les valeurs de test suivantes pour essayer divers types de remboursements :

Type	Valeur
Prélèvement automatique	DE11520513735120710131
Virement bancaire	Banque de démonstration
Carte bancaire	Numéro : 4111 1111 1111 1111 CVV : 123 Date d’expiration : toute date future valide
Carte de débit	Numéro : 4012 8888 8888 1881 CVV : 123 Date d’expiration : toute date future valide