Stripe Elements

Développez de magnifiques formulaires de paiement intelligents

Stripe Elements met à votre disposition des composants d’interface riches et prédéfinis qui vous aident à créer des flux de paiement personnalisés de grande qualité sur le web et les mobiles.

Faites un essai Consultez la documentation

Donate with
Or pay with card
Address
Name City
Email State
Phone Zip Code
Card Number
Expiration
$1
$5
Jane Doe 185 Berry St Jane Doe $20
janedoe@gmail.com San Francisco janedoe@gmail.com $50
(941) 555-0123 CA (941) 555-0123 $100
4242 5200 8282 8282 8210 6011 0009 9013 9424 98431
MM/YY MM/YY MM/YY MM/YY
CVC CVC CVC CVC
ZIP 94107 ZIP Code ZIP
Pay $25 Pay $25 Pay $25 Donate $5

La meilleure expérience de paiement pour vos clients

Stripe Elements est né de l’expérience collective des équipes front-end, des designers et des analystes de Stripe, qui sont entièrement dédiés à l’optimisation de vos flux de paiements. En aidant vos clients à saisir leurs informations rapidement et correctement, Elements réduit les risques d’erreurs et augmente le nombre de paiements réussis.

  • Validation en temps réel

    Fournit des commentaires en temps réel au fur et à mesure de la saisie de votre client pour capturer en amont les erreurs éventuelles.

  • Localisation

    Détecte de manière dynamique les informations à saisir en fonction du pays de votre carte et les localise de manière appropriée.

  • Formatage et masquage

    Facilite la saisie pour vos utilisateurs, en reprenant le même formatage que celui de leurs cartes.

Numéro de carte
MM/AA
CVC
Code postal
Visa 5556 04 / 21
Amex 98431 07 / 19
Acheter avec
  • Apple Pay et Payment Request

    Vous assure une intégration unique pour Apple Pay et l’API Payment Request.

  • Remplissage automatique

    Vous garantit que le remplissage automatique fonctionne de la même façon sur toutes les plateformes et tous les navigateurs afin que vos clients puissent régler plus vite.

  • Réactivité

    S’adapte à différentes tailles d’écran (de bureau ou mobiles) et affiche le clavier numérique si nécessaire.

Numéro de carte
MM/AA
CVC
Code postal
Visa 5556 04 / 21
Amex 98431 07 / 19
Acheter avec
var style = {
  base: {
    color: '#303238',
    fontSize: '16px',
    fontFamily: '"Open Sans", sans-serif',
    fontSmoothing: 'antialiased',
    '::placeholder': {
      color: '#CFD7DF',
    },
  },
  invalid: {
    color: '#e5424d',
    ':focus': {
      color: '#303238',
    },
  },
};

Développé par nous, élaboré par vous

Stripe Elements peut être personnalisé pour se fondre parfaitement dans votre page de paiement. Avec Elements, pas besoin de pages de paiement hébergées : vous pouvez moduler ses composants pour créer votre propre formulaire de paiement.

Faites l'essai ! Modifiez l’objet de style dans l’éditeur pour qu’il reprenne l'esthétique de votre formulaire. Vous pouvez utiliser la plupart des propriétés CSS.

Collectez les détails de paiement en toute sécurité

Stripe Elements sécurise la collecte des détails de paiement et vous protège contre le vol d’informations sensibles. Nous créons un iframe sécurisé et isolons les informations sensibles de votre site pour éliminer toute une série d’attaques potentielles, en vous laissant un contrôle visuel total.

Nous simplifions les procédures de conformité PCI

Stripe Elements est le meilleur outil pour maintenir votre conformité PCI, car aucune donnée sensible ne peut atteindre vos serveurs. Vous obtenez d'office le niveau conformité PCI le plus simple, en évitant les audits coûteux et contraignants. Nous pouvons même générer automatiquement la documentation SAQ-A (Self Assessment Questionnaire).

Moins de code. Moins de cas particuliers.

Stripe Elements inclut des fonctionnalités de validation de saisie, de formatage, de masquage, d'adaptation esthétique et de gestion des erreurs. Vous passez donc moins de temps à maintenir le code de votre formulaire et à résoudre des cas particuliers, tout en créant une meilleure expérience de paiement.

Formatage
// Stripe.js v2 formatting helpers
$('input[name="card"]').on('input', () => {
  let brand = Payment.fns.cardType($('input[name="card"]').val());

  $('.credit-card-img').css('opacity', 0.4);
  $(`#${brand}`).css('opacity', 1);
});
Validation
// We only need to manually validate and format for Stripe.js v2.
$.fn.form.settings.rules.customBillingZip = (value) => {
  if (!$("[name='billingZipSame']").is(':checked') && value === '') {
    return false;
  }
  return true;
}

$.fn.form.settings.rules.customCVV = (value) => {
  return window.Stripe.validateCVC(value);
}

$.fn.form.settings.rules.customExp = (value) => {
  if (value.split('/').length === 1) {
    let sliceIndex = value.length % 2 ? 1 : 2;
    let value = `${value.slice(0, sliceIndex)}/${value.slice(sliceIndex, value.length)}`;
  }
  return window.Stripe.validateExpiry(value);
}

$.fn.form.settings.rules.customCardNumber = (value) => {
  return Payment.fns.validateCardNumber($('input[name="card"]').val());
}
return (formData, stripeResponseHandler) => {
  // Set up Stripe payload
  if (formData.exp.split('/').length > 1) {
    let exp = formData.exp.split('/');
  } else {
    let sliceIndex = formData.exp.length % 2 ? 1 : 2;
    let exp = [formData.exp.slice(0, sliceIndex), formData.exp.slice(sliceIndex, formData.exp.length)];
  }
  let payload = {
    number: formData.card,
    cvc: formData.cvv,
    exp_month: parseInt(exp[0]),
    exp_year: parseInt(exp[1])
  }
}
Payload
// Send address if given.
if ($("name='billingZipSame']").is(':checked')) {
  payload.name = formData.name;
  payload.address_line1 = formData.address1;
  if (formData.address2) {
    payload.address_line2 = formData.address2;
  }
  payload.address_city = formData.city;
  payload.address_state = formData.state;
  payload.address_zip = formData.zip;
} else {
  payload.address_zip = formData.billingZip;
}
Gestion des erreurs
Stripe.card.createToken(payload, (status, res) => {
  if (res.error) {
    window.scrollTo(0, 0);
    $('.ui.form').form('add errors', [res.error.message]);
  }
  stripeResponseHandler(res);
});
Localisation
base.card = {
  rules: [{
    type: 'customCardNumber',
    prompt: translations['Enter a valid credit card number']
  }]
};

base.cvc = {
  rules: [{
    type: 'empty',
    prompt: translations['Enter a valid CVV code']
  }]
};

base.exp = {
  rules: [{
    type: 'customExp',
    prompt: translations['Enter a valid expiation date (MM/YYYY)']
  }]
};

base.billingZip = {
  rules: [{
    type: 'customBillingZip',
    prompt: translations['Must enter a billing zip']
  }]
};
Elements
let Stripe = () => {}
let stripeClient = Stripe(key);
let stripeElements = stripeClient.elements()

let stripeCardElement = stripeElements.create('card', {
  style: {
    base: {
      fontSize: '16px',
      fontFamily: 'Lato, "Helvetica Neue", Arial, Helvetica, sans-serif',
      color: 'rgba(0,0,0,.87)'
    },
    invalid: {
      color: '#9F3A38',
      iconColor: '#9F3A38'
    },
    focus: {
      color: 'rgba(0,0,0,.95)'
    }
  }
});

Occupez-vous de votre produit et confiez-nous tout le reste

Gérer une entreprise en ligne est un exercice difficile. Stripe Elements vous permet de tirer le meilleur parti de l’expérience collective de Stripe dans les domaines de la sécurité, et du développement et de l’optimisation des procédures de paiement, afin que vous vous concentriez sur votre produit.

  • Remplissage automatique
    Rendez votre formulaire compatible avec le remplissage automatique des informations de paiement pour tous les principaux navigateurs de bureau et mobiles.
  • Remplissage par des tierces parties
    Rendez votre formulaire compatible avec les logiciels à remplissage automatique tiers comme 1Password et LastPass.
  • Identification des types de cartes
    Validez la saisie de votre client grâce à la détection automatique de la marque de sa carte, en permettant le formatage et la validation de saisie (par exemple en n’acceptant qu’un code CVC à 4 chiffres pour les cartes American Express).
  • Conseils CVC spécifiques
    Réduisez les erreurs en montrant au client l’emplacement de son code CVC/CVV.
  • Masquage de la saisie
    Réduisez les erreurs grâce au masquage intégré de la saisie.
  • Formatage
    Formatez automatiquement la saisie de votre client pour répondre à ses attentes pendant sa saisie.
  • Messages d’erreur traduits
    Parlez la langue de votre client, avec des messages d’erreur traduits en sept langues.
  • Emplacements réservés localisés
    Montrez à vos clients des emplacements réservés adaptés à leurs pays (ZIP aux USA, code postal en France par exemple).
  • Conformité PCI simplifiée (SAQ A)
    Réduisez votre champ d'application PCI, car Elements peut obtenir le niveau de conformité PCI le plus simple : le SAQ A.
  • Prise en charge des polices Web
    Utilisez les polices Web de votre choix.
  • Langues de droite à gauche
    Prenez en charge la saisie de droite à gauche et donc les langues correspondantes.
  • Validation de saisie en temps réel
    Validez la saisie en temps réel pour simplifier la tâche du client et réduire les taux d’abandon.
  • API Payment Request
    Prenez en charge les moyens de paiement grâce à l’API W3C PaymentRequest avec un seul Element, qui détecte automatiquement la meilleure option de paiement pour votre client.
  • Android Pay
    Prenez en charge Android Pay avec un seul Element.
  • Pay with Google
    Prenez en charge Pay with Google avec un seul Element.
  • Apple Pay
    Prenez en charge Apple Pay avec un seul Element.
  • Ciblage des clics intelligent
    Utilisez des champs de saisie sécurisés compatibles avec le reste de votre formulaire, car Elements définit automatiquement le ciblage des clics sur les libellés et les espacements.
  • Saisie adaptée aux mobiles
    Affichez le bon clavier mobile à vos clients pour faciliter la saisie (par exemple en faisant apparaître le clavier numérique quand ils n’ont que des chiffres à saisir).
  • Navigation adaptée aux mobiles
    Assurez-vous que vos clients peuvent utiliser leurs flèches de navigation natives sur mobile pour passer d’un champ de saisie à un autre.
  • Accessibilité (ARIA)
    Respectez les normes W3C ARIA, en améliorant l’accessibilité pour répondre aux besoins de tous vos clients.
  • Collecte dynamique du code postal
    Ne collectez le code postal que si nécessaire, car Elements détermine de manière dynamique si le code postal accroît la probabilité d’une transaction réussie ou permet de réduire la fraude.
  • Caractères larges et chiffres CJK
    Prenez en charge les chiffres CJK, couramment utilisés avec les claviers chinois, japonais et coréens.
  • Présentation dynamique
    Adaptez-vous à la taille d’écran de votre client, car Elements ajuste automatiquement sa présentation à l'espace d'affichage disponible, ce qui simplifie la saisie sur les écrans de petite taille.
  • React bindings
    Intégrez Elements avec React à l’aide de react-stripe-elements.
  • Une esthétique entièrement personnalisable
    Créez exactement le formulaire que vous souhaitez avec la modularité et les styles personnalisables d’Elements.