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.

Probarlo Consultar 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 introduzcan la información rápida y correctamente, Elements minimiza los errores de usuario y aumenta el número de pagos efectuados con éxito.

  • Validación en tiempo real

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

  • Localización

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

  • Formateado y enmascaramiento

    Haz que la introducción de datos sea más fácil y clara 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 de Payment Request (que incluye Google Pay).

  • Función autorrellenar

    Asegúrate de que los datos se rellenen 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 si procede.

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 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.

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;
}
Gestión 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 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.
You’re viewing our website for Switzerland, but it looks like you’re in the United States. Switch to the United States site