Stripe Elements
Crea flujos de compra inteligentes y atractivos
Stripe Elements es un conjunto de sofisticados componentes de interfaz de usuario (IU) prediseñados que te ayudan a crear flujos de compra ideales para equipos de escritorio y dispositivos móviles.
La mejor experiencia de pagos para tus clientes
Stripe Elements es fruto de la experiencia colectiva de los equipos de front-end, diseño y análisis de Stripe. Al permitir que los clientes introduzcan la información rápida y correctamente, Elements minimiza los errores de usuario y aumenta el número de pagos efectuados con éxito.
var style = {
base: {
color: '#303238',
fontSize: '16px',
fontFamily: '"Open Sans", sans-serif',
fontSmoothing: 'antialiased',
'::placeholder': {
color: '#CFD7DF',
},
},
invalid: {
color: '#e5424d',
':focus': {
color: '#303238',
},
},
};
Creado por nosotros, diseñado por ti
Stripe Elements se puede personalizar de modo que encaje a la perfección con tu página de compra. Ya no necesitarás páginas de pago alojadas, pues tendrás los bloques elementales necesarios para crear tu propio formulario de compra.
¡Pruébalo! Usa el editor para adaptar el estilo del objeto al estilo de tu formulario. Puedes utilizar la mayoría de las propiedades CSS.
Recopilación segura de datos de pago
Stripe Elements añade seguridad a la recopilación de datos de pago y ayuda a evitar que personas malintencionadas roben información sensible. Creamos un iframe seguro y aislamos de tu sitio web la información sensible, lo que elimina varios tipos de ataques, e igual te brindamos control visual completo.
La forma más fácil de cumplir la normativa PCI
Si usas Stripe Elements, cumplirás con la normativa PCI actual de la forma más sencilla, ya que los datos sensibles nunca llegarán a tus servidores. Reunirás los requisitos para cumplir con la normativa PCI sin la necesidad de largas y costosas auditorías. Incluso generamos automáticamente documentación sobre el cuestionario de autoevaluación (SAQ A).
Menos código. Menos casos extremos.
Stripe Elements incorpora funciones de validación de entrada, formateado, enmascaramiento, adaptación estética y gestión de errores. Todo esto permite crear una experiencia de pago más satisfactoria sin tener que dedicar tanto tiempo a mantener el código del proceso de compra o a resolver casos extremos.
// 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)'
}
}
});
Céntrate en tu producto y deja lo demás en nuestras manos
Gestionar un negocio online no es tarea fácil. Stripe Elements te permite aprovechar la experiencia colectiva de Stripe en materia de seguridad y creación/optimización de los procesos de compra para que puedas así centrarte en tu producto.
-
Compatible con el autorrellenado del navegador
Crea un formulario compatible con el rellenado automático de los datos de pago desde los principales navegadores de escritorio y móviles.
-
Compatibilidad con sistemas de terceros de rellenado automático
Crea un formulario compatible con los sistemas de rellenado automático de datos de pago que utilizan los programas de terceros más conocidos en este campo, como 1Password o LastPass.
-
Identificación de la marca de tarjeta
Valida los datos introducidos por tu cliente a través de la detección automática de la marca de la tarjeta del cliente que determina, por ejemplo, el formato y la validación de la información (p.ej., para tarjetas American Express, el CVC solo se acepta si tiene 4 dígitos).
-
Indicaciones sobre el formato del CVC de cada tarjeta
Minimiza los errores mostrando a tu cliente la ubicación del CVC/CVV de su tarjeta.
-
Enmascaramiento de datos introducidos
Reduce el número de errores con el enmascaramiento integrado de datos.
-
Formateado
Los datos se formatean automáticamente según las expectativas del cliente a medida que este los introduce.
-
Mensajes de error localizados
Dirígete a tu cliente en su propio idioma. Los mensajes de error se pueden mostrar en 15 idiomas distintos.
-
Marcadores de posición localizados
Muestra a tus clientes un marcador de posición localizado (p. ej., ZIP en los Estados Unidos o Postal Code en el Reino Unido).
-
Fácil cumplimiento de la normativa PCI (SAQ A)
Minimiza tus esfuerzos de PCI. Elements reúne los requisitos para la forma de validación del cumplimiento de la normativa PCI más sencilla: el cuestionario de autoevaluación SAQ Tipo A.
-
Compatibilidad con fuentes web
Usa las fuentes web que prefieras.
-
Compatibilidad con idiomas escritos de derecha a izquierda
Opción de introducir datos de derecha a izquierda para poder admitir idiomas que lo requieran.
-
Validación de datos en tiempo real
Los datos introducidos se validan en tiempo real, con lo que hay menos errores y se dejan menos transacciones a medias.
-
Payment Request API
Añade métodos de pago a través de la nueva W3C Payment Request API. Con un solo Element, se detecta automáticamente la mejor opción de pago para tu cliente.
-
Google Pay
Acepta Google Pay con un solo Element.
-
Microsoft Pay
Acepta Microsoft Pay con un solo Element.
-
Apple Pay
Acepta Apple Pay con un solo Element.
-
Destinos de clics inteligentes
Usa campos de introducción de datos seguros compatibles con el resto de tu formulario. Elements define automáticamente los destinos de los clics en las etiquetas y el relleno.
-
Introducción de datos aptos para dispositivos móviles
Cuando los clientes utilicen un dispositivo móvil, preséntales el teclado adecuado. Por ejemplo, si solo van a escribir números, muéstrales el teclado numérico.
-
Navegación optimizada para dispositivos móviles
Asegúrate de que, en los dispositivos móviles, tus clientes tengan flechas de navegación para desplazarse por los distintos campos de introducción de datos.
-
Accesibilidad (ARIA)
Cumple los estándares ARIA del W3C y mejora la accesibilidad para satisfacer las necesidades de todos tus clientes.
-
Recopilación dinámica de códigos postales
El código postal se recopila solo cuando hace falta, ya que Elements determina de forma dinámica en qué casos conviene hacerlo para reducir el fraude o aumentar la probabilidad de que una transacción llegue a realizarse con éxito.
-
Compatibilidad con números CJK/de ancho completo
Compatibilidad con números CJK, frecuentes en los teclados virtuales para chino, japonés y coreano.
-
Diseño adaptativo
Puedes adaptarte al tamaño de pantalla de tu cliente, ya que el diseño de Elements se ajusta automáticamente al espacio disponible, lo que facilita la introducción de datos en pantallas pequeñas.
-
Enlaces a React
Integra Elements con React usando react-stripe-elements.
-
Estilos totalmente personalizables
Crea un formulario exactamente a tu medida con la modularidad y los estilos personalizables de Elements.