Stripe Elements
Développez de superbes formulaires de paiement intelligents
Stripe Elements met à votre disposition une large palette de composants d’interface préconfigurés qui vous permettent de créer des flux de paiement personnalisés sur le Web et les appareils mobiles.
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.
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 cadre local 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.
// 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 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
Affichez un emplacement réservé qui a été traduit et adapté au pays de vos clients (par exemple, le champ ZIP sur un formulaire américain devient le champ Code postal sur un formulaire canadien).
-
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 Payment Request à 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 réduit 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.js.
-
Des styles entièrement personnalisables
Créez exactement le formulaire dont vous avez besoin grâce à la modularité et aux styles personnalisables d’Elements.