1 min de leitura ·

[Ajuda] Como preencher automaticamente os dados do cartão em meu site?

Olá, gostaria de saber como posso fazer para que em meu ecommerce, quando o cliente for fazer o pagamento na forma de cartão, verificar se tem algum cartão salvo na conta google e se tiver aparecer para ele usar e auto preencher automaticamente. Não achei nada sobre isso, alguem poderia me ajudar? Os campos input devem ter algum id especifico para o navegador reconhecer e fazer essa verificação?

EDIT:

Consegui descobrir. Para quem quiser saber mais, o link é https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete, lá tem todos os tipos de autocomplete.

Pedroaf0

9 meses atrás

Opa fico feliz que já tenha encontrado, navegando por ai lembrei do seu post olha o que encontrei:

<form><h5>Payment card</h5><div class="CardInput"><div class="input-group with-label"><input class="form-control" type="text" dir="auto" tabindex="0" maxlength="23" inputmode="numeric" aria-label="Card Number"><label>Card Number</label></div><span class="right-addon"></span></div><div class="input-group with-label"><input class="form-control" type="text" dir="auto" tabindex="0" inputmode="text" aria-label="Cardholder Name"><label>Cardholder Name</label></div><section class="inline-inputs"><div class="input-group with-label"><input class="form-control" type="text" dir="auto" tabindex="0" maxlength="5" inputmode="numeric" aria-label="MM/YY"><label>MM/YY</label></div><div class="input-group with-label"><input class="form-control" type="text" dir="auto" tabindex="0" maxlength="3" inputmode="numeric" aria-label="CVC"><label>CVC</label></div></section></form>

hallolobong0

9 meses atrás

op, beleza?
Acho que não é tão simples assim como você está imaginando, até porque é uma imensa falha de segurança fazer isso. O meio que eu imagino que voce precisaria usar é consumir alguma api do google pay para fazer isso.
https://developers.google.com/pay/api/web/overview

Silvair

9 meses atrás

Acho que o que ele está querendo saber, não é como armazenar os dados do cartão do cliente, mas é como ativar o recurso do Google Pay, o qual já tem essa funcionalidade de salvar os dados do cartão de crédito e sugerir o preenchimento de forma automática, ao fazer compras em qualquer checkout online.

Respondendo a pergunta:

O Google Chrome usa vários padrões para identificar que uma página se trata de um checkout e preencher os dados do cartão armazenados no Google Pay:

1. Elementos HTML

O Chrome procura por elementos HTML específicos que são comumente usados em páginas de checkout, como:

<input> com o tipo "text" e o nome "cardNumber" ou similar.
<input> com o tipo "text" e o nome "expirationDate" ou similar.
<input> com o tipo "text" e o nome "cvv" ou similar.
<select> com o nome "country" ou similar.
<select> com o nome "state" ou similar.
<input> com o tipo "submit" e o valor "Comprar" ou similar.

Ex.:

<input type="text" name="cardNumber"\>
<input type="text" name="expirationDate"\>
<input type="text" name="cvv"\>
<select name="country"\>
<select name="state"\>
<input type="submit" value="Comprar"\>

2. JavaScript

O Chrome também pode usar JavaScript para identificar páginas de checkout. Ele procura por funções JavaScript que são comumente usadas para processar pagamentos, como:

Funções que validam o número do cartão, data de vencimento e CVV.
Funções que enviam os dados do cartão para um servidor de pagamento.

3. Metadados da página

O Chrome pode analisar os metadados da página, como o título e a descrição, para determinar se a página é um checkout.

4. Machine Learning

O Chrome usa machine learning para identificar páginas de checkout com mais precisão. O modelo de machine learning é treinado em um conjunto de dados de páginas de checkout e páginas que não são de checkout.

5. Experiência do usuário

O Chrome também leva em consideração a experiência do usuário. Se o Chrome detectar que um usuário está tentando preencher um formulário de checkout manualmente, ele poderá oferecer a opção de preencher automaticamente o formulário com os dados do Google Pay.

Basicamente, o que você deve fazer é tentar seguir estas convenções.

Uma outra dica interessante, é dar uma inspensionada em alguns checkouts bem consolidados, como por exemplo o do Mercado Livre:

uriel

9 meses atrás

Se ta na conta google vc não tera acesso!
Mas o proprio Chrome faz isso automaticamente!
Desde que os nomes dos campos estejam corretos para o Chrome entender

pdw

Autor

9 meses atrás

Então, essa era minha dúvida, qual o id do input colocar. Mas já descobri aqui.

Para quem quiser saber mais, o link é https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete, lá tem todos os tipos de autocomplete.