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.

Probar Explorar la documentación

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 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 ingresen la información en forma rápida y correcta, Elements minimiza los errores de usuario y aumenta la cantidad de pagos efectuados con éxito.

  • Validación en tiempo real

    Proporciona retroalimentación de manera automática y en tiempo real mientras tu cliente ingresa los datos, para que los errores se detecten con prontitud.

  • Localización

    Detecta de forma dinámica los datos que se necesitan ingresar según el país de tu tarjeta y localízalos de manera adecuada.

  • Formateado y enmascaramiento

    Haz que el ingreso de datos sea más fácil y claro para tus usuarios utilizando el mismo formato que ven en su tarjeta.

Número de tarjeta
MM / AA
CVC
Código postal
Visa 5556 04 / 21
Amex 98431 07 / 19
Compra con
  • Apple Pay y Payment Request

    Haz una sola integración para Apple Pay y la API Payment Request (que incluye Google Pay).

  • Función autocompletar

    Asegúrate de que los datos se completen de forma automática y uniforme en todas las plataformas y navegadores para agilizar el proceso de compra para tus clientes.

  • Receptividad

    Adáptate a distintos tamaños de pantalla (tanto de equipos de escritorio como de dispositivos móviles) y recurre al teclado numérico cuando corresponda.

Número de tarjeta
MM / AA
CVC
Código postal
Visa 5556 04 / 21
Amex 98431 07 / 19
Compra con
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 se adapte a la perfección a tu página de compra. Ya no necesitarás páginas de pago alojadas, ya que 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 agrega seguridad a la recopilación de datos de pago y ayuda a evitar que personas malintencionadas roben información confidencial. Creamos un iframe seguro y aislamos de tu sitio web la información confidencial, lo que elimina varios tipos de ataques, a la vez que 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.

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

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 rellenado automático 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 ingresados
    Reduce la cantidad 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 el alcance de la normativa PCI. Elements cumple con 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 ingresados se validan en tiempo real, con lo que hay menos errores y se dejan menos transacciones a medias.
  • API Payment Request
    Acepta métodos de pago a través de la nueva API Payment Request de W3C con un solo Element que 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 clicks inteligentes
    Usa campos de ingreso de datos seguros compatibles con el resto de tu formulario. Elements define automáticamente los destinos de los clicks 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 ingreso 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 el ingreso 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.
You’re viewing our website for Brazil, but it looks like you’re in the United States. Switch to the United States site