Enregistrer une carte bancaire sans authentification

Avant d’utiliser ce guide, il vous faut un compte Stripe. Inscrivez-vous.

Créez une page de paiement pour collecter les informations de carte de vos clients. Utilisez Stripe Elements, notre bibliothèque d’interface utilisateur conçue pour vous aider à créer des formulaires de paiement personnalisés. Pour démarrer avec Elements, incluez la bibliothèque Stripe.js avec le script suivant sur votre page de paiement.

<script src="https://js.stripe.com/v3/"></script>

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.

Pour tirer au mieux parti de la fonctionnalité avancée de lutte contre la fraude de Stripe, ajoutez ce script à chaque page de votre site, pas uniquement à celle dédiée au règlement. Ajouter le script à chaque page permet à Stripe de détecter tout comportement suspect susceptible d’indiquer une fraude lorsque les utilisateurs consultent votre site web.

Ajouter Elements à votre page

Afin de recueillir les informations de carte bancaire de vos clients en toute sécurité, Elements crée pour vous des composants d’interface hébergés par Stripe, qui sont ensuite placés dans votre formulaire de paiement. Vous n’avez ainsi pas à le faire. Pour définir où ces composants doivent être insérés, créez des éléments DOM (contenants) vides associés à des identifiants uniques dans votre formulaire de paiement.

<input id="cardholder-name" type="text">
<!-- placeholder for Elements -->
<div id="card-element"></div>
<div id="card-result"></div>
<button id="card-button">Save Card</button>

Créez ensuite une instance de l’objet Stripe en indiquant comme premier paramètre votre clé API publiable. Puis, créez une instance de l’objet Elements et utilisez-la pour intégrer un Element card au DOM.

Le composant Element card simplifie le formulaire de paiement et réduit le nombre de champs requis en insérant un champ de saisie flexible unique qui collecte toutes les informations de carte nécessaires, en toute sécurité.

Vous pouvez également combiner les composants Elements cardNumber, cardExpiry et cardCvc pour créer un formulaire de carte multi-saisie flexible.

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const elements = stripe.elements();
const cardElement = elements.create('card');
cardElement.mount('#card-element');

Un composant Element contient une balise iframe qui envoie de manière sécurisée les informations de paiement à Stripe via une connexion HTTPS. Pour que votre intégration fonctionne, l’adresse de votre page de règlement doit aussi commencer par https:// au lieu de http://.

Vous pouvez tester votre intégration sans utiliser le protocole HTTPS. Activez-le au moment d’accepter des paiements en mode production.

const cardholderName = document.getElementById('cardholder-name');
const cardButton = document.getElementById('card-button');
const resultContainer = document.getElementById('card-result');

cardButton.addEventListener('click', async (ev) => {
  const {paymentMethod, error} = await stripe.createPaymentMethod({
      type: 'card',
      card: cardElement,
      billing_details: {
        name: cardholderName.value,
      },
    }
  );

  if (error) {
    // Display error.message in your UI.
    resultContainer.textContent = error.message;
  } else {
    // You have successfully created a new PaymentMethod
    resultContainer.textContent = "Created payment method: " + paymentMethod.id;
  }
});

Envoyez l’identifiant PaymentMethod qui en résulte à votre serveur.

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

# Available as a gem
sudo gem install stripe

# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

Enregistrez la carte en associant le PaymentMethod à un objet Customer. Vous pouvez utiliser l’objet Customer pour sauvegarder d’autres informations concernant le client, telles que des détails d’expédition et l’adresse e-mail.

curl https://api.stripe.com/v1/customers \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -d payment_method={{PAYMENT_METHOD_ID}}

Si vous avez un Client existant, vous pouvez joindre le PaymentMethod plutôt à cet objet.

curl https://api.stripe.com/v1/payment_methods/{{PAYMENT_METHOD_ID}}/attach \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -d customer=
{{CUSTOMER_ID}}

À ce stade, associez l’identifiant du Client et l’identifiant du PaymentMethod à votre propre représentation interne d’un client, si vous en avez une.

Lorsque vous êtes prêt(e), cherchez l’identifiant du PaymentMethod et celui du Client à débiter. Vous pouvez le faire soit en sauvegardant les deux identifiants dans votre base de données, soit en utilisant l’identifiant Client pour rechercher tous les PaymentMethods disponibles du Client.

curl -G https://api.stripe.com/v1/payment_methods \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -d customer=
{{CUSTOMER_ID}} \
  -d type=card

Utilisez l’identifiant du PaymentMethod et celui de l’objet Customer pour créer un nouveau PaymentIntent. Définissez error_on_requires_action sur « true » pour refuser les paiements qui nécessitent des actions de la part de l’utilisateur, comme l’authentification à deux facteurs.

curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -d amount=1099 \
  -d currency=usd \
  -d "payment_method_types[]"=card \
  -d customer=
{{CUSTOMER_ID}} \
  -d payment_method={{PAYMENT_METHOD_ID}} \
  -d error_on_requires_action=true \
  -d confirm=true

Lorsqu’une tentative de paiement échoue, la requête échoue également avec un code d’état HTTP 402 et Stripe renvoie une erreur. Vous devez inviter l’utilisateur à retourner dans votre application (par exemple en lui envoyant un e-mail) afin de terminer le paiement. Consultez le code d’erreur généré par la bibliothèque d’API de Stripe ou le paramètre last_payment_error.decline_code du PaymentIntent pour déterminer le motif du refus du paiement par l’émetteur de la carte.

Informez votre client que le paiement a échoué et dirigez-le vers le formulaire de paiement que vous avez créé dans l’étape 1 où il peut saisir les informations d’une nouvelle carte. Envoyez ce nouvel identifiant PaymentMethod à votre serveur à joindre à l’objet Customer et effectuez de nouveau le paiement.

Vous pouvez également créer un PaymentIntent et enregistrer une carte en un seul appel à l’API si vous avez déjà créé un Client.

curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -d amount=1099 \
  -d currency=usd \
  -d "payment_method_types[]"=card \
  -d customer=
{{CUSTOMER_ID}} \
  -d payment_method={{PAYMENT_METHOD_ID}} \
  -d error_on_requires_action=true \
  -d confirm=true \
  -d setup_future_usage=on_session

Le réglage de setup_future_usage sur on_session indique à Stripe que vous souhaitez conserver la carte pour plus tard, sans déclencher d’authentification inutile.

Stripe fournit des cartes de test que vous pouvez utiliser en mode test pour simuler le comportement de différentes cartes bancaires. Utilisez ces cartes avec n’importe quel CVC, code postal et date d’expiration non échue.