Stripe Elements

Développez de superbes formulaires de paiement intelligents

Stripe Elements met à votre disposition une large palette de composants d’interface prédéfinis qui vous permettent de créer flux de paiement personnalisé sur le Web et les appareils mobiles.

Faites un essai Consulter 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 le fruit de l’expérience collective de l'équipe commerciale, des concepteurs et des analystes de Stripe. 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 de 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

    Intégration unique pour Apple Pay et l’API Payment Request.

  • Remplissage automatique

    La fonction de 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 (d'ordinateur 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, conçu par vous

Stripe Elements peut être personnalisé pour s'adapater parfaitement à votre page de paiement. Elements élimine la nécessité de recourir à des pages de paiement hébergées et vous permet de créer votre propre formulaire de paiement.

Essayez ! Modifiez l’objet de style dans l’éditeur pour qu’il adopte le style 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 l'outil idéal pour garantir votre conformité PCI car aucune donnée sensible n'atteint vos serveurs. Vous obtenez d'office le niveau de conformité PCI le plus simple, en évitant les audits coûteux et contraignants. Nous générons même pour vous le document 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 de votre flux de paiement, afin que vous vous concentriez sur votre produit.

  • Remplissage automatique
    Rendez votre formulaire compatible avec la fonction de remplissage automatique des informations de paiement de tous les principaux navigateurs Web 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 dans 15 langues.
  • Emplacements réservés localisés
    Montrez à vos clients comment un emplacement réservé a été traduit et adapté à son pays (par exemple, le champ ZIP sur un formulaire américain devient le champ Code postal sur un formulaire français).
  • Conformité PCI simplifiée (SAQ A)
    Réduisez votre champ d'application PCI dans la mesure où 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.
  • Prises en charge des langues de droite à gauche
    Prise en charge de la saisie de droite à gauche et donc des langues qui s'écrivent dans ce sens.
  • 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 via la nouvelle API W3C PaymentRequest à l'aide d'un seul composant Element qui détecte automatiquement la meilleure option de paiement pour votre client.
  • Google Pay
    Prise en charge de Google Pay avec un seul Element.
  • Microsoft Pay
    Prenez en charge Microsoft Pay avec un seul composant Element.
  • Apple Pay
    Prenez en charge Apple Pay avec un seul composant Element.
  • Ciblage intelligent des clics
    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 demandez le code postal que si cela est vraiment nécessaire, car Elements détermine de manière dynamique si le code postal accroît la probabilité que la transaction réussisse ou de réduire le risque de 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.
  • Intégration avec React
    Intégrez Elements avec React à l’aide de react-stripe-elements.
  • Une esthétique entièrement personnalisable
    Créez exactement le formulaire dont vous avez besoin grâce à la modularité et aux styles personnalisables d’Elements.
You’re viewing our website for Mexico, but it looks like you’re in the United States. Switch to the United States site