Comment intégrer des coupons dans les abonnements Stripe

Présentation de l'édition de stripe developer office hours

• Je suis Ali et ceci est une autre édition des heures de bureau des développeurs de stripe. Nous traversons actuellement des moments sans précédent et les entreprises doivent réagir très rapidement à des circonstances en évolution rapide. Chez stripe, notre priorité est de veiller à ce que vous puissiez continuer à servir vos clients et que votre infrastructure de paiement reste fiable. Les entreprises, en particulier celles avec des modèles commerciaux récurrents, veulent naturellement offrir à leurs clients un peu de réconfort et de soulagement au cours des prochains mois.

• Aujourd'hui, nous verrons comment une entreprise utilisant les abonnements stripe peut mettre en place des coupons dans leur processus d'inscription. Nous commencerons par construire une intégration web utilisant les éléments stripe et créant des abonnements. Ensuite, nous ajouterons la prise en charge des coupons à notre intégration, permettant aux clients d'entrer un code de coupon lors de leur inscription et d'obtenir une réduction sur leur abonnement.

Présentation de l'édition de stripe developer office hours

Intégration de Stripe dans un élément HTML

• Nous allons commencer par ajouter le script Stripe.js pour initialiser les éléments de paiement.

• Ensuite, nous allons créer l'instance des éléments Stripe pour pouvoir générer l'élément de carte de paiement.

• Une fois l'instance créée, nous procéderons à monter l'élément de carte sur notre interface web.

• Pour chaque action effectuée, nous veillerons à manipuler les retours d'erreur et les succès générés dans le processus d'intégration.

• Enfin, nous mettrons en place la communication avec le serveur pour traiter le paiement côté serveur.

Intégration de Stripe dans un élément HTML

Création d'un client et d'un abonnement avec Stripe

• Lors de la création d'un abonnement avec Stripe, il est important de symboliser les noms d'équipage et l'identifiant de la méthode de paiement.

• Pour ajouter des données de méthode de paiement, il est nécessaire de ne pas analyser l'ID de la méthode de paiement car c'est le paramètre que le côté serveur nous envoie.

• Dans un souci de lisibilité et de débogage, imprimons l'ID de la méthode de paiement dans notre terminal.

• En cas d'erreur, utilisons un bloc try-catch pour capturer l'erreur.

• La première étape consiste à créer un client en appelant la méthode 'create' de Stripe pour les clients.

• Ensuite, nous voulons attribuer la méthode de paiement au client en utilisant l'ID de la méthode de paiement fourni par le client.

• Optionnellement, ajoutons une description, par exemple 'Client des heures de bureau'.

• Une fois le client créé, affichons l'ID du client pour vérifier.

• Ensuite, créons un abonnement en appelant la méthode 'create' pour les abonnements sur Stripe.

• Les paramètres obligatoires pour la création d'un abonnement sont l'ID du client, la méthode de paiement par défaut et les éléments d'abonnement.

• Pour les éléments d'abonnement, nous utilisons un tableau pour spécifier le plan auquel l'utilisateur s'abonne.

• Si le plan n'existe pas encore, nous devons le créer sur le tableau de bord de Stripe en ajoutant un nouveau produit.

• Après avoir créé le plan, capturons l'ID du plan pour l'utiliser dans notre code.

• En cas de succès, affichons l'ID de l'abonnement et retournons un status 200 avec l'objet d'abonnement en format JSON.

• Ajoutons également une gestion des erreurs pour afficher un message en cas d'erreur lors de la création du client ou de l'abonnement.

Création d'un client et d'un abonnement avec Stripe

Optimisation avancée des abonnements avec Stripe

• Lors de la récupération de l'abonnement à partir de Stripe, ou passons l'idée de cet abonnement qui était l'ID de l'abonnement analysé ici, et nous allons utiliser une fonctionnalité avancée appelée 'expand'.

• Typiquement, lorsque vous récupérez un objet d'abonnement, il a un champ appelé 'latest invoice'. Ce champ contient l'ID de la dernière facture sur cet abonnement. Au lieu de faire un autre appel à l'API pour le récupérer, nous allons plutôt étendre cela dans l'appel de récupération de l'abonnement.

• Cela signifie qu'au lieu d'obtenir simplement l'ID de la facture dans ce champ, nous obtiendrons l'ensemble de l'objet de facture. L'extension prend un tableau de chaînes, donc nous passerons 'latest invoice' et cela nous donnera l'ensemble de l'objet d'abonnement et de facture.

• Nous allons journaliser l'ID de l'abonnement, puis nous attribuerons également 'invoice' égal à 'subscription latest invoice'. Enfin, nous voulons rendre la page d'abonnement.

• La page d'abonnement affiche simplement l'ID de l'abonnement et le montant dû sur la dernière facture au client.

• Nous relançons notre serveur, pas d'erreurs. Allons-y et abonnons-nous. Nous avons une méthode de paiement, super. Nous nous sommes abonnés avec succès, ah, il semble que nous ayons eu un problème ici. Variable non définie localement, je pense que j'ai fait une erreur ici. Ah, voilà, 'subscription ID', c'est une erreur. Redémarrons notre serveur. Rafraîchissons simplement cette page. Je pense que j'ai une autre faute de frappe ici, 'subscription', c'est ce que je manque ici. J'ai manqué le 't' à la fin, redémarrons notre serveur, rafraîchissons la page. Voilà, ceci est notre page de statut d'abonnement réussi. Il nous montre l'ID de l'abonnement et le montant dû sur la dernière facture. Rendons cela un peu plus explicite. Parfait.

• Nous avons une grande voie heureuse, un client arrive, paie avec sa carte et peut s'abonner à un plan. Allons-y et permettons maintenant à l'utilisateur de saisir un coupon, un coupon que vous envoyez à votre utilisateur.

• Revenons à notre page d'accueil, juste en dessous de l'élément de la carte, je vais créer un champ de saisie et l'appeler 'coup pawn input'. C'est le champ de saisie avec lequel l'utilisateur interagira, et un bouton

• Voici le bouton du coupon, il dira 'appliquer le coupon'. Retournons sur notre page d'accueil, vous devriez probablement avoir un coupon d'inter ici, il devrait certainement être avant le champ de saisie

• Vous devez entrer votre coupon ici, puis appliquer le coupon. Donnons un peu d'espace entre nos boutons. Génial. Comment fonctionnent les coupons avec Stripe? Eh bien, tout d'abord, ramenons notre tableau de bord. Vous pouvez créer des coupons en utilisant l'API de Stripe également. Pour le cas d'usage ici, nous utiliserons le tableau de bord.

• Nous allons dans la section de facturation, car les coupons sont ici. Créons un nouveau coupon. Le nom sur le coupon est ce que votre client saisit généralement dans votre flux de paiement. Cela pourrait être quelque chose comme 'vacances2024'. Nous l'appellerons 'restez en sécurité'. Nous donnerons une réduction en pourcentage, nous l'appellerons 50% de réduction

• La durée sera de plusieurs mois et nous voulons que ce soit une réduction de deux mois pour nos clients. Allons-y et créons le coupon.

• C'est 'restez en sécurité', c'est le nom du coupon. Et voilà l'ID. L'ID est ce que nous utilisons pour appliquer aux abonnements. Je vais copier cela, aller ici, créer une variable appelée 'coupon map'. Le 'coupon map' sera indexé sur le nom du coupon et nous aurons l'ID du coupon comme valeur.

• Revenant sur notre page principale, ajoutons des références au champ de saisie du coupon et au bouton de coupon. Maintenant, ce que fera le bouton du coupon, c'est que votre utilisateur arrive, il entre son code de coupon, nous voulons valider cela côté serveur, nous voulons nous assurer que c'est un coupon valide et informer l'utilisateur que 'hey, votre coupon semble bon, il est appliqué' ou 'désolé, nous n'avons pas pu appliquer le coupon, veuillez en saisir un autre'.

• Ajoutons un écouteur d'événements pour le bouton du coupon ici. Nous ferons une requête POST vers notre point de terminaison '/coupon' qui n'existe pas. Nous le créerons bientôt. Utilisons-le comme point de terminaison POST et dans notre corps, nous voulons passer le coupon et ce sera la valeur de l'entrée du coupon.

• Obtenons la réponse, faisons-en JSON, nous obtenons des données et une fois que nous avons des données, ce n'est pas un devoir ici car nous ne savons pas ce que notre serveur renverra.

• Hé hop dans notre fichier, créons une fonction POST pour flash coupon ici. Ce que nous devons faire, c'est extraire le code du coupon qui a été passé, et déclarer une variable pour un nom de coupon, ce sera le coupon que l'utilisateur entre. Maintenant, nous devons vérifier si ce coupon existe dans notre 'coupon map'. Typiquement, pour une intégration en production, vous stockeriez tous les coupons que vous créez dans une base de données. Pour les besoins de cette démo, nous allons simplement créer une variable globale.

• Nous voulons vérifier si 'coupon map' contient la clé ou un nom de coupon, a-t-il cette clé? Si c'est le cas, nous voulons renvoyer 200 et renvoyer l'objet personnalisé appelé 'is valid' à travers JSON. Si ce n'est pas le cas, renvoyons simplement un 400 et 'is valid' false à travers JSON.

• Donc, notre côté serveur recevra essentiellement un simple objet JSON avec 'is valid' comme clé. Revenant ici, nous

Optimisation avancée des abonnements avec Stripe

Introduction à l'intégration de Stripe pour les abonnements et l'utilisation de coupons

• Dans ce segment, nous allons explorer l'intégration de la plateforme Stripe afin de gérer les abonnements et l'utilisation de coupons. Nous allons suivre étape par étape les différentes actions effectuées dans le processus d'intégration.

• Nous commencerons par vérifier la validité des données pour savoir si un coupon peut être appliqué. Si les données sont valides, nous afficherons l'étiquette 'coupon appliqué' et nous conserverons une référence au coupon sous forme de variable.

• Ensuite, nous nous assurerons que le coupon est initialisé s'il n'a pas déjà été défini. Dans le cas où les données ne sont pas valides, nous afficherons 'coupon invalide'.

• Après avoir validé l'application du coupon, nous aborderons l'étape d'envoi du code du coupon avec la demande de création d'abonnement, de sorte que l'utilisateur puisse bénéficier du coupon sur son abonnement.

• Nous passerons ensuite à la fonction back-end 'post payment method' où nous ajouterons un paramètre appelé 'nom du coupon'. Ce paramètre sera le coupon appliqué s'il existe, sinon il sera une chaîne vide.

• Enfin, nous mettrons en place les étapes pour extraire et appliquer le coupon à l'abonnement, tout en affichant le nom du coupon sur la page de suivi de l'abonnement.

Introduction à l'intégration de Stripe pour les abonnements et l'utilisation de coupons

Conclusion:

Intégrer des coupons dans vos abonnements Stripe peut être un moyen efficace de fidéliser les clients en leur offrant des réductions attractives. Offrir des codes de coupon peut également encourager de nouveaux clients à s'abonner. Avec ces conseils, vous serez en mesure de tirer le meilleur parti des coupons dans vos abonnements Stripe.

Q & A