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.
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.
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.
// 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)'
}
}
});
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.