Enregistrer une carte sans authentification

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

Créez une page de paiement pour recueillir les informations de carte du client. Utilisez Stripe Elements, une bibliothèque d’interfaces utilisateur qui vous aide à créer des formulaires de paiement personnalisés. Pour démarrer avec Elements, incluez la bibliothèque Stripe.js avec le script suivant dans votre page de paiement.

<script src="https://js.stripe.com/basil/stripe.js"></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 vous-même.

Pour tirer le meilleur parti de la fonctionnalité avancée de lutte contre la fraude de Stripe, ajoutez ce script à chaque page de votre site, pas uniquement à la page de paiement. L’ajout du script à chaque page permet à Stripe de détecter les comportements suspects qui pourraient indiquer une fraude lorsque les utilisateurs consultent votre site Web.

Ajouter Elements à votre page

Afin de recueillir les informations de carte de vos clients en toute sécurité, Elements crée pour vous des composants d’interface hébergés par Stripe. Ils sont ensuite placés dans votre formulaire de paiement. Vous n’avez ainsi pas à le faire. Pour déterminer l’emplacement d’insertion de ces composants, 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 publique. Puis, créez une instance de l’objet Elements et utilisez-la pour monter un élément card dans le DOM.

L’élément card simplifie le formulaire de paiement et réduit le nombre de champs requis en insérant un champ de saisie flexible et unique qui recueille toutes les informations de carte nécessaires de manière sécurisée.

Vous pouvez aussi 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 élément Stripe contient une balise iframe qui envoie de manière sécurisée les informations de paiement à Stripe par une connexion HTTPS. Pour que votre intégration fonctionne, l’adresse de votre page de paiement doit aussi commencer par https:// au lieu de http://.

Vous pouvez tester votre intégration sans utiliser le protocole HTTPS. Activez-le lorsque vous êtes prêt(e) à accepter des paiements réels.

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 de PaymentMethod qui en résulte à votre serveur.

Utilisez nos bibliothèques officielles pour accéder à l’API Stripe à partir de 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 l’utilisateur, telles que des détails d’expédition et l’adresse courriel.

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

Si vous avez un objet Customer 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_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -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.

Au moment de débiter le client, 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 du client pour rechercher tous les PaymentMethods disponibles du client.

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

Utilisez l’ID du PaymentMethod et celui de l’objet Customer pour créer un nouveau PaymentIntent. Définissez error_on_requires_action à « 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_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -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 aviser l’utilisateur de retourner dans votre application (par exemple en lui envoyant un courriel) 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 ID du PaymentMethod à votre serveur à associer à 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_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -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 à 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 dans un bac à sable pour simuler le comportement de différentes cartes. Utilisez ces cartes avec n’importe quel CVC, code postal et date d’expiration non échue.