Stripe Elements

Crie fluxos de checkout elegantes e inteligentes

O Stripe Elements consiste em componentes de IU predefinidos e sofisticados que ajudam a criar os seus próprios fluxos de checkout com telas perfeitas para desktops e dispositivos móveis.

Experimente Explore a documentação

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

A melhor experiência de pagamento para os seus clientes

O Stripe Elements foi criado com base na experiência coletiva das equipes de front-end, projeto e análises da Stripe. O Elements ajuda os clientes a inserir informações com rapidez e precisão, minimizando os erros do usuário e aumentando o número de pagamentos bem-sucedidos.

  • Validação em tempo real

    Forneça automaticamente feedback em tempo real durante a digitação do cliente para garantir a detecção antecipada de erros.

  • Localização

    Detecte dinamicamente as informações necessárias de acordo com o país do cartão e localize-as da forma adequada.

  • Formatação e mascaramento

    Facilite e simplifique a entrada de dados para os usuários ajustando a formatação ao que eles veem no cartão.

Número do cartão
MM/AA
CVC
CEP
Visa 5556 04 / 21
Amex 98431 07 / 19
Compre com
  • Apple Pay e Payment Request

    Integre uma única vez para usar o Apple Pay e a API de Payment Request (incluindo o Google Pay).

  • Preenchimento automático

    Garanta o funcionamento consistente do preenchimento automático em todas as plataformas e navegadores para agilizar o checkout dos clientes.

  • Rapidez de resposta

    Adapte-se a diferentes tamanhos de tela (de desktops a dispositivos móveis) e acione o teclado numérico quando necessário.

Número do cartão
MM/AA
CVC
CEP
Visa 5556 04 / 21
Amex 98431 07 / 19
Compre com
var style = {
  base: {
    color: '#303238',
    fontSize: '16px',
    fontFamily: '"Open Sans", sans-serif',
    fontSmoothing: 'antialiased',
    '::placeholder': {
      color: '#CFD7DF',
    },
  },
  invalid: {
    color: '#e5424d',
    ':focus': {
      color: '#303238',
    },
  },
};

Criado por nós, projetado por você

O Stripe Elements pode ser personalizado para um ajuste perfeito na página de checkout. O Elements elimina a necessidade de páginas de pagamento hospedadas. Em vez disso, ele disponibiliza os componentes básicos para criar o seu próprio formulário de checkout.

Experimente! Edite o objeto de estilo no editor para combinar com o estilo do seu formulário. Você pode usar a maioria das propriedades do CSS.

Colete dados de pagamento com segurança

O Stripe Elements aumenta a segurança da coleta de dados de pagamento e ajuda a evitar que usuários mal-intencionados roubem qualquer informação confidencial. Geramos um iframe seguro e isolamos informações confidenciais do seu site (o que elimina categorias de ataques inteiras), sem prejudicar o seu controle visual completo.

Conformidade com PCI simplificada

O Stripe Elements é a forma mais fácil de se manter atualizado com os regulamentos de PCI atuais: nenhum dado confidencial chega aos seus servidores. Você se qualifica para a forma mais fácil de conformidade com PCI, evitando auditorias urgentes e de alto custo. Geramos automaticamente a documentação do questionário de autoavaliação (SAQ A).

Reduza o uso de código e os casos extremos.

O Stripe Elements incorpora validação, formatação, mascaramento, aplicação de estilo e tratamento de erros de entrada de dados. Isso significa que você reduz o tempo gasto na manutenção do código de checkout e na resolução de casos extremos ao criar uma melhor experiência de pagamento.

Formatação
// 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);
});
Validação
// 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])
  }
}
Carga útil
// 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;
}
Tratamento de erros
Stripe.card.createToken(payload, (status, res) => {
  if (res.error) {
    window.scrollTo(0, 0);
    $('.ui.form').form('add errors', [res.error.message]);
  }
  stripeResponseHandler(res);
});
Localização
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)'
    }
  }
});

Mantenha o foco nos produtos e deixe o resto com a gente

A administração de uma empresa online é uma tarefa difícil. O Stripe Elements permite aproveitar o aprendizado coletivo da Stripe em segurança e criação/otimização de experiências de checkout para você manter o foco nos produtos.

  • Suporte a preenchimento automático no navegador
    Torne o seu formulário compatível com o preenchimento automático de dados de pagamento dos principais navegadores de desktops e dispositivos móveis.
  • Suporte a preenchimento automático de terceiros
    Torne o seu formulário compatível com o preenchimento automático de dados de pagamento dos principais softwares de preenchimento automático de terceiros (por exemplo, 1Password, LastPass).
  • Identificação da bandeira do cartão
    Valide a entrada de dados do cliente, detectando automaticamente a bandeira do cartão e usando recursos como formatação e validação de entrada (por exemplo, aceitando apenas CVCs de 4 dígitos para cartões American Express).
  • Dicas de CVC específicas por cartão
    Minimize os erros mostrando aos clientes a localização do CVC/CVV.
  • Mascaramento da entrada de dados
    Reduza os erros com o recurso incorporado de mascaramento da inserção de dados.
  • Formatação
    Formate automaticamente a inserção de dados conforme suas expectativas à medida que o cliente digita.
  • Mensagens de erro traduzidas
    Fale o idioma dos clientes com mensagens de erro em 15 idiomas.
  • Espaços reservados traduzidos
    Mostre aos clientes espaços reservados traduzidos (por exemplo, CEP no Brasil, ZIP nos Estados Unidos e Postal Code no Reino Unido).
  • Conformidade simplificada com PCI (SAQ A)
    Minimize o escopo de PCI: o Elements está qualificado para a forma mais fácil de validação da conformidade com PCI, o SAQ A.
  • Suporte a fontes da web
    Use as fontes da web que quiser.
  • Suporte a idiomas da direita para a esquerda
    Ofereça suporte à inserção de dados da direita para a esquerda para aceitar idiomas com esse tipo de escrita.
  • Validação de entrada de dados em tempo real
    Valide a inserção de dados em tempo real para minimizar erros e reduzir o abandono.
  • API Payment Request
    Aceite formas de pagamento por meio da nova API Payment Request do W3C com um único Element que detecta automaticamente a melhor opção de pagamento para o cliente.
  • Google Pay
    Aceite o Google Pay com um único Element.
  • Microsoft Pay
    Aceite o Microsoft Pay com um único Element.
  • Apple Pay
    Aceite o Apple Pay com um único Element.
  • Destinos de clique inteligentes
    Use campos de entrada seguros, compatíveis com o resto do formulário. O Elements define automaticamente destinos de clique em rótulos e preenchimentos.
  • Entrada de dados compatível com dispositivos móveis
    Mostre aos clientes o teclado de dispositivo móvel correto para facilitar a inserção de dados (por exemplo, exibindo o teclado numérico quando somente números forem necessários).
  • Navegação voltada a dispositivos móveis
    Assegure que os seus clientes possam usar setas de navegação nativas de dispositivos móveis para percorrer os campos de entrada de dados.
  • Acessibilidade (ARIA)
    Cumpra os padrões ARIA do W3C, aprimorando a acessibilidade para atender às necessidades de todos os clientes.
  • Coleta dinâmica de CEP
    Colete o CEP apenas quando for necessário. O Elements determina dinamicamente se a coleta do CEP aumentará a probabilidade de uma transação bem-sucedida ou minimizará fraudes.
  • Suporte a numerais CJK/largura total
    Aceite numerais CJK, normalmente utilizados em teclados de software chineses, japoneses e coreanos.
  • Layout ágil
    Adapte-se ao tamanho da tela do cliente: o Elements ajusta automaticamente o layout de acordo com o espaço disponível na tela do cliente, facilitando a inserção de dados em telas pequenas.
  • Vinculações ao React
    Integre o Elements ao React usando o Stripe.js do React.
  • Estilos totalmente personalizáveis
    Crie o formulário desejado com a modularidade e os estilos personalizáveis do Elements.
You’re viewing our website for Estonia, but it looks like you’re in the United States. Switch to the United States site