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.
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.
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.
// 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);
});
// 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]) }}
// 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; }
Stripe.card.createToken(payload, (status, res) => {
if (res.error) {
window.scrollTo(0, 0);
$('.ui.form').form('add errors', [res.error.message]);
}
stripeResponseHandler(res);
});
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'] }] };
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.