Construire un système de paiement rapide avec vérification SMS utilisant Stripe et Twilio

Temps de lecture: 4 minutes

April 17, 2020

Rédigé par

Kelley Robinson

Twilion

Thor 雷神 Schaeff

Contributeur

Construire un système de paiement rapide avec vérification SMS utilisant Stripe et Twilio

Stripe et Twilio se sont associés pour construire une application de démonstration qui vous montre comment collecter et stocker de façon sécurisée les détails de paiements de vos clients et qui utilisent Twilio Verify pour envoyer un code d'authentification aux utilisateurs avant de charger les infos de leurs cartes sauvegardées.

Démo et ressources

Si vous préférez regarder ce tutoriel, vous pouvez trouver un enregistrement sur comment mettre en place l’application d'échantillons sur la chaîne YouTube de Stripe Developers.

Enregistrement vidéo Youtube d'une procédure pas à pas

Exécuter la démo sur votre machine locale

L’application de démo est accompagnée par deux implémentations back-end. Une en JavaScript (Node) et une en Python (Flask). Dans ce tutoriel, nous présentons comment configurer le backend Node.js. Vous pouvez trouver les instructions sur le serveur Python Flask ici.

Créer la démo avec la CLI Stripe

La façon la plus pratique de mettre en place un compte Stripe Sample est d’utiliser la CLI Stripe. Suivez ces instructions pour l’installer.

Vous avez ensuite besoin de vous identifier dans votre compte Stripe. Si vous en n’avez pas, vous pouvez vous inscrire ici. Une fois connectés, exécutez :

stripe login

Suivez les étapes pour authentifier la CLI avec votre compte.

Créez ensuite la démo et une fois affiché, sélectionnez le backend node.

stripe samples create checkout-remember-me-with-twilio-verify

Ensuite, naviguez dans le dossier de la démo fraîchement créé et installez les dépendances :

cd checkout-remember-me-with-twilio-verify/server
npm install

Configurer les variables d’environnement

NOTE : Toutes les valeurs dans le fichier .env - hormis pour le STRIPE_PUBLISHABLE_KEY - doivent être gardées secrètes. Par conséquent, vérifiez toujours deux fois que vous ne committez pas le fichier .env sur Git !

La CLI Stripe a automatiquement programmé un fichier .env pour vous, incluant vos clés API de test. Ouvrez le fichier .env et ajoutez les identifiants Twilio suivants :

Variable	But
ACCOUNT_SID	Trouver dans la console Twilio
AUTH_TOKEN	Trouver dans la console Twilio
VERIFY_SERVICE_SID	Créer un Verify Service

Créez un compte Twilio si vous n’en avez pas encore. Si vous utilisez ce lien, vous aurez 10 $ lorsque vous fe rez une mise à ni veau. Vous aurez besoin de créer un nouveau service Twilio Verify dans la console Twilio.

Vous pouvez trouver votre SID Verify dans les paramètres généraux:

Avec toutes les variables d’environnement configurées, vous pouvez à présent démarrer le serveur local :

npm start

Ca y est, l’application fonctionne maintenant sur http://localhost:4242/ 🎉

Un œil sur le code source

Installer un champ de saisie de numéro de téléphone international

Pour offrir un sélecteur de pays, un formatage de numéro côté client et une validation, on utilise la librairie open-source intl-tel-input.

// client/script.js

// Format phone number input field
const phoneInputField = document.querySelector('#phone');
const phoneInput = window.intlTelInput(phoneInputField, {
  separateDialCode: true,
  utilsScript: 'build/js/utils.js',
});
// Validate input
phoneInput.isValidNumber();
// Format input
phoneInput.getNumber();

Valider la saisie côté client permet de minimiser les requêtes à notre serveur et de fournir des retours plus rapides à nos utilisateurs, ce qui offre une meilleure expérience utilisateur.

Vérifier le numéro de téléphone sur le serveur

Bien que la validation côté client soit cruciale, elle n’est pas suffisante, donc nous pouvons faire une requête API pour vérifier le numéro de téléphone sur notre serveur également.

// server/server.js

try {
  // Validate the phone number input
  const number = await client.lookups.phoneNumbers(phone).fetch();
  number.phoneNumber; // Is valid number
} catch (error) {
  // Not a valid number
}

Collecter et stocker les infos de paiement du client

Pour collecter les infos de paiement du client en toute sécurité, on utilise Stripe Checkout en setup mode:

// server/server.js

// Create a new customer object
const customer = await stripe.customers.create({
  phone: number.phoneNumber,
  email,
});

// Create a CheckoutSession to set up our payment methods recurring usage
const checkoutSession = await stripe.checkout.sessions.create({
  payment_method_types: ['card'],
  mode: 'setup',
  customer: customer.id,
  success_url: `${req.headers.origin}?session_id={CHECKOUT_SESSION_ID}`,
  cancel_url: `${req.headers.origin}/`,
});

En utilisant l’ID de la session de paiement résultante, on redirige le client sur le formulaire de paiement hébergé par Stripe:

// client/script.js

// Recirect to Checkout
await stripe.redirectToCheckout({ sessionId: checkoutSession.id });

Stripe Checkout va vérifier les détails saisis de la carte, et les attacher à l’objet du client si elles sont valides. Après quoi le client sera redirigé sur votre application où vous pouvez maintenant vous servir de leurs infos de carte enregistrées.

Envoyer le code de vérification

En facturant des informations bancaires enregistrées, vous avez besoin de vous assurer que votre client est authentifié, et par conséquent, autorisé à facturer sa carte. Dans cet exemple, on utilise Twilio Verify pour leur envoyer un code vérification sur leur numéro de téléphone, pour les authentifier.

Twilio Verify fait le plus gros du travail pour vous, notamment :

Envoyer à partir d’un code court ou d’un ID alpha sender mondialement reconnu
Utiliser un modèle de message qui est sur liste blanche des opérateurs mondiaux pour une meilleure délivrabilité
Générer un code de vérification aléatoire et gérer son expiration

Ce fragment génère et envoie le code à votre client :

// server/server.js

// Start Twilio verify
const verification = await client.verify
  .services(process.env.VERIFY_SERVICE_SID)
  .verifications.create({ to: customer.phone, channel: 'sms' });

Valider le code de vérification

Ensuite, nous prenons le code que le client a entré dans notre application et le vérifions avec Twilio :

// server/server.js

try {
  // Check Twilio verify code
  const verificationCheck = await client.verify
    .services(process.env.VERIFY_SERVICE_SID)
    .verificationChecks.create({ to: customer.phone, code });

  // Check the status
  if (verificationCheck.status === 'approved') {
    // Verification code is valid
  }
} catch (error) {
  // Incorrect code
}

Facturer le client

Maintenant que nous avons authentifié le client, nous pouvons les facturer avec les détails de la carte enregistrés.

// server/server.js

// Charge the stored method
const paymentIntent = await stripe.paymentIntents.create({
  amount,
  currency,
  customer: customerId,
  payment_method: paymentMethods.data[0].id,
  off_session: false, // Customer is on-session during checkout
  confirm: true, // Confirm and charge payment immediately
});

Vous verrez maintenant les évènements connectés dans le terminal où la CLI s’exécute et les évènement webhook sont transférés dans la route /webhook de votre serveur local.

Des questions?

On espère que vous avez trouvé ce tutoriel utile ❤️ Si vous avez quelque retour ou questions à poser, vous pouvez joindre les auteurs sur Twitter :

Articles associés

Ressources connexes

Twilio Docs

Des API aux SDK en passant par les exemples d'applications

Documentation de référence sur l'API, SDK, bibliothèques d'assistance, démarrages rapides et didacticiels pour votre langage et votre plateforme.

Centre de ressources

Les derniers ebooks, rapports de l'industrie et webinaires

Apprenez des experts en engagement client pour améliorer votre propre communication.

Ahoy

Le hub de la communauté des développeurs de Twilio

Meilleures pratiques, exemples de code et inspiration pour créer des expériences de communication et d'engagement numérique.