Get started with Apple Pay on the Web

Tom Grant: Boas-vindas! Meu nome é Tom, e sou membro da equipe de E-Commerce do Apple Pay. Desde o lançamento do Apple Pay, trabalhei com diversas equipes técnicas para ajudar a lançar integrações de comércio eletrônico do Apple Pay para lojas e portais de pagamento.e confirmar os dados Hoje, tenho o prazer de compartilhar alguns dos principais conhecimentos e melhores práticas acumuladas ao longo dos anos, e mostrar como integrar o Apple Pay ao site usando a API Payment Request. O Apple Pay foi lançado nos EUA em outubro de 2014. Desde então, fizemos progressos incríveis. O Apple Pay já está disponível em mais de 75 mercados no mundo, e milhões de marcas o integraram em apps e sites. O Apple Pay usa credenciais de cartão com token específicas do dispositivo. As transações do Apple Pay são processadas como um cartão comum de crédito ou débito. A Apple não processa pagamentos do Apple Pay, então você ainda precisará utilizar um provedor de serviços de pagamento. Pode ser o mesmo provedor que você usa para receber pagamentos online atualmente. Para entender melhor o processo de pagamento, vamos ver o que acontece durante uma transação do Apple Pay na Internet. O fluxo de transação começa quando o cliente clica no botão Apple Pay e a página de pagamento aparece, permitindo selecionar e confirmar os detalhes. O cliente autentica a transação, e os dados de pagamento são criptografados e transmitidos ao site. O site envia o objeto de pagamento do Apple Pay para o servidor do estabelecimento. O servidor recebe o objeto de pagamento e envia os dados para o provedor de serviços de pagamento para processamento. O provedor faz a descriptografia dos dados de pagamento, depois formata e envia uma mensagem de autorização à entidade adquirente, que então envia o pagamento para a rede de pagamento. A rede de pagamento desfaz o token dos dados e envia o número do cartão ao emissor para autorização. A confirmação do pagamento é enviada de volta pela rede, e o cliente vê uma marca de seleção na página de pagamento. Esse processo parece muita coisa , mas, na verdade, tudo acontece em poucos segundos. Agora que sabemos o que acontece nos bastidores durante uma transação do Apple Pay na Internet, vamos entender na experiência do cliente. Para fazer isso, vamos acessar o site de demonstração do Apple Pay em applepaydemo.apple.com. Esse site é um ótimo recurso para entender o Apple Pay na Internet e permite configurar e testar transações sem cobranças no cartão. Se você estiver com dificuldades ao trabalhar na integração, o site de demonstração do Apple Pay é um ótimo lugar para descobrir o que está acontecendo. Essa ferramenta é compatível com diversos tipos de configuração do Apple Pay, incluindo informações de envio, solução de erros e muito mais. Mas, por enquanto, vamos simplificar e manter as configurações padrão para ver como é uma transação simples . Tudo começa ao clicar no botão Apple Pay. Um modal aparecerá na tela, que é a página de pagamento. O cliente seleciona as opções de pagamento e autentica a transação. A transação é enviada para processamento, e o resultado é exibido na parte inferior da página de pagamento. Ao concluir o pagamento, a página de pagamento será dispensada. É bem simples. Fizemos um exemplo de pagamento. Agora que você viu como é uma transação típica do Apple Pay, vamos fazer a preparação para aceitar o Apple Pay. Vamos dar uma olhada na integração do Apple Pay com a API Payment Request. A API Payment Request fornece um padrão para vários navegadores que permite obter pagamentos, endereço de envio e informações de contato de clientes. Você pode usar essas informações para processar o pedido. A API Payment Request simplifica a jornada de pagamento e garante segurança, consistência e acessibilidade. Se já tiver integrado o Apple Pay à API JavaScript do Apple Pay, você deve saber as etapas deste vídeo. Veja o que é preciso fazer para integrar o Apple Pay. Primeiro, vou mostrar as etapas necessárias para configurar o ambiente para aceitar o Apple Pay. Depois, vou mostrar como implementar o Apple Pay, desde a criação de uma solicitação de pagamento até a conclusão de uma transação. Por fim, vou mostrar ferramentas que podem ser usadas para testar a implementação do Apple Pay. Temos muito o que abordar, e, ao final da sessão, você terá uma visão aprofundada sobre como integrar o Apple Pay ao seu site. Vamos começar configurando o ambiente. Primeiro, confirme se o seu provedor de serviços de pagamento aceita transações do Apple Pay. Ele também pode oferecer o Apple Pay por meio do próprio SDK, que pode ser uma maneira fácil e confiável de adicionar o Apple Pay ao seu site. Confirme se o servidor tem um certificado SSL válido e consegue usar a versão TLS 1.2 ou a mais recente. Isso será necessário para se comunicar com os servidores do Apple Pay. Por fim, verifique se todas as páginas em que o Apple Pay é exibido são https://. Após confirmar, podemos começar a criar as credenciais que você usará na configuração do Apple Pay. Existem duas maneiras principais de criar essas credenciais. Você mesmo pode criá-las e gerenciá-las por meio do Apple Developer Portal ou se registrar diretamente no provedor de serviços de pagamento. Para entender a configuração específica necessária para o site, entre em contato com o provedor de serviços de pagamento para obter mais informações. Nas etapas a seguir, vou mostrar como criar e gerenciar suas credenciais por meio do Apple Developer Portal. Talvez a organização já tenha uma conta do Apple Developer, sobretudo se já tiver um app na App Store. Peça ao administrador da conta para adicionar você nas seções Usuários e acesso no App Store Connect. Se a organização ainda não tiver uma conta, cadastre-se em developer.apple.com. No ponto central de cada transação do Apple Pay está o identificador do comerciante, identificando que o Apple Pay é aceito. Isso é exclusivo para cada comerciante, e recomendamos o uso de uma string no estilo de nome de domínio reverso. Em seguida, crie um Payment Processing Certificate. Será usado para criptografar e descriptografar com segurança os dados de pagamento transmitidos pelos dispositivos dos clientes. Você provavelmente receberá uma solicitação de assinatura de certificado do provedor de serviços de pagamento para criar, pois será a parte que descriptografará a transação. Em seguida, crie um certificado de identidade do comerciante. Esse certificado é usado para verificar a identidade de comerciante quando o cliente inicia um pagamento. Por fim, registre e verifique os domínios e subdomínios em que você exibirá o botão Apple Pay no seu site. Para fazer isso, você deverá inserir o domínio totalmente qualificado que deseja verificar na seção Domínio do comerciante no Apple Developer Portal. Será gerado um arquivo para baixar e colocar no caminho conhecido no servidor. Em seguida, você clicará no botão Verificar, e os servidores da Apple entrarão em contato com esse local para verificar a presença. Com o ambiente configurado e o ID de comerciante criado, agora você pode implementar o Apple Pay no seu site. Para entender melhor o que estamos construindo, vamos ver em mais detalhes uma transação do Apple Pay na Internet. Ela começa quando o cliente clica ou toca no botão Apple Pay. O site cria uma solicitação de pagamento contendo todos os detalhes da transação e entra em contato com o servidor do comerciante para solicitar uma nova sessão. Depois que a identidade do comerciante é verificada, os servidores do Apple Pay geram e retornam um objeto de sessão do comerciante. Isso é repassado ao site para concluir o processo de validação. O cliente pode confirmar os detalhes na página de pagamento e autenticar a transação usando o Face ID, Touch ID ou senha. Os dados de pagamento são gerados no dispositivo do usuário e enviados aos servidores do Apple Pay para serem criptografados com o Payment Processing Certificate específico do comerciante. Os dados de pagamento retornam ao seu site. Os dados são enviados ao provedor de serviços de pagamento para serem descriptografados e processados. O status do pagamento retorna pelo provedor de serviços de pagamento. O site notifica o usuário se a transação foi bem-sucedida e, em caso afirmativo, a página de pagamento é dispensada. Esse processo global pode ser agrupado em quatro etapas principais: apresentação do Apple Pay, validação do comerciante, autenticação do pagamento e processamento do pagamento. A primeira é apresentar o Apple Pay, que inclui mostrar o botão Apple Pay e a página de pagamento. O próximo passo é a validação do comerciante, em que os certificados são trocados entre a Apple e o servidor do comerciante usando TLS bidirecional. Depois temos a autenticação do pagamento, em que o pagamento é confirmado e gerado. Por último, a fase de processamento do pagamento, que é em grande parte tratada entre o comerciante e o provedor de serviços de pagamento. Juntas, essas etapas formam a base de um pagamento comum do Apple Pay na Internet. Vamos usar esse fluxo para estruturar nossa abordagem de implementação do Apple Pay. Vamos começar apresentando o Apple Pay como opção de pagamento em nosso site. Você deve exibir o botão Apple Pay sempre que o cliente estiver usando um dispositivo compatível. Para verificar se o dispositivo do cliente é compatível com o Apple Pay, chame ApplePaySession.canMakePayments. É importante considerar que tipo de botão melhor se adapta à finalização de compra. A API do Apple Pay fornece muitos tipos de botões e estilos para usar no site, para poder escolher o botão que melhor se adapta ao fluxo da experiência de compra. Use os botões fornecidos pelo sistema para sempre usar a fonte, cor, legenda e estilo aprovados pela Apple. O botão pode ser importado para o site usando JavaScript ou CSS, e o estilo, tipo e localização podem ser facilmente definidos com atributos. Para adicionar o botão usando o SDK JavaScript, carregue o script do botão da rede de distribuição de conteúdo. Você pode definir propriedades CSS, como o raio da borda, para alinhar melhor o botão com a interface de usuário atual. Por fim, adicione o elemento do botão Apple Pay à página, definindo os atributos de estilo, tipo e idioma. Neste exemplo, escolhemos usar o estilo de botão preto com a legenda "Finalize com o Apple Pay" e traduzimos para o alemão. Para ver as opções disponíveis do botão Apple Pay, vamos voltar ao site de demonstração do Apple Pay visto anteriormente. Aqui, você pode alterar de forma rápida e fácil os atributos e propriedades CSS do botão Apple Pay, vendo o resultado em tempo real na parte inferior da página. Esta é uma maneira rápida e fácil de gerar botões Apple Pay e copiar e colar o código no site. Aqui você pode selecionar o tipo de botão. Eu escolhi preto. Depois, você pode escolher o tipo que melhor se adapta à situação. O último atributo é o idioma. Vamos traduzir para o alemão como no exemplo anterior. Mais abaixo, você tem as propriedades CSS, como largura do botão, altura, raio do canto e preenchimento. A configuração do botão é exibida e atualizada dentro do bloco de código logo abaixo das opções. Isso pode ser copiado e colado no código existente. Existem vários tipos de solicitação de pagamento disponíveis, permitindo apresentar ao cliente informações adicionais sobre a transação. Uma transação típica é um pagamento único, mas o Apple Pay também oferece opções de solicitação para pagamentos recorrentes, como assinaturas; pagamentos de recarga automática, como recargas de cartão de loja; e pagamentos adiados, como para uma pré-venda. Por enquanto, vejamos como criar uma solicitação para pagamento único. Para aceitar pagamentos do Apple Pay usando a API Payment Request, você precisa especificá-lo como forma de pagamento usando o identificador, neste caso apple.com/apple-pay. Junto com o identificador, também precisamos incluir alguns dados associados. Isso inclui um número de versão, e recomendamos usar a versão mais recente disponível, pois vem com todas as funcionalidades mais recentes do Apple Pay. Confira developer.apple.com para obter as informações mais recentes. Também precisamos do merchantIdentifier configurado anteriormente, a quais recursos e redes você deseja oferecer suporte e o código do país do local em que o pagamento será processado. É muito importante definir corretamente para gerar um criptograma compatível em mercados PSD2. A inclusão dos detalhes de contato necessários para o endereço de cobrança do cliente, o endereço de envio (ou os dois) é opcional. Aqui, solicitamos o endereço de envio do cliente. No entanto, confiança e privacidade são extremamente importantes ao solicitar os dados do cliente. Solicite apenas as informações necessárias para realizar a transação e obter a melhor conversão com o Apple Pay. Agora, você precisa criar um objeto com detalhes para a transação. Isso inclui itens de exibição, em que você pode incluir impostos, cobranças e descontos; opções de envio, para que o cliente escolha como o pedido será enviado, o que é ótimo para oferecer a opção de Express Checkout, e, por fim, o total, contendo a moeda e o valor a ser cobrado e uma etiqueta com o nome do comerciante. O valor do nome do comerciante deveria ser o nome que o cliente associa à empresa e será exibido ao lado da palavra "pagar" na página de pagamento. O objeto de detalhes é também onde você inclui os modificadores para a transação. Os modificadores contêm detalhes da transação que se aplicam apenas em determinadas condições. Por exemplo, você pode adicionar uma sobretaxa para pagamento com cartão de crédito. Nesse espaço, você incluirá os detalhes para um pagamento recorrente, como uma assinatura, por exemplo. Agora podemos reunir todos esses elementos para iniciar um nova solicitação de pagamento. Crie um novo objeto de solicitação de pagamento e passe os métodos, os detalhes e as opções para o construtor. Como vimos, um dos grandes benefícios do Apple Pay é que ele pode ser usado como um opção de Express Checkout para melhorar a conversão. Você vai querer que a experiência seja a mais perfeita possível. Para isso, verifique se o usuário tem um cartão disponível para efetuar o pagamento antes de exibir o botão Apple Pay. Isso pode ser feito usando o método canMakePayment da Solicitação de Pagamento. Esse método verifica se o cliente está usando um dispositivo e navegador compatíveis com o Apple Pay e só funcionará se o cliente tiver um cartão disponível para efetuar o pagamento. Quando o cliente toca no botão Apple Pay, você deve usar o método exibir para mostrar a página de pagamento. Assim que página de pagamento for exibida, ela mostra a animação de processamento e inicia imediatamente o processo de validação do comerciante. Vamos ver tudo o que está envolvido. O processo de validação do comerciante é concluído para cada transação do Apple Pay na web e é uma medida de segurança importante para garantir que o pagamento seja processado por um comerciante legítimo e autorizado. Isso ajuda a proteger os usuários de transações fraudulentas e aumenta a segurança geral do processo de pagamento. Existem três partes no processo de validação do comerciante: o site do comerciante, o servidor do comerciante e o servidor do Apple Pay. Ao pressionar o botão Apple Pay, a validação do comerciante é acionada automaticamente com uma chamada para o gerenciador de validação do comerciante. Dentro desse gerenciador, uma chamada precisará ser feita para um endpoint no servidor do comerciante solicitando a criação de uma nova sessão usando o nome de host estático, apple-pay-gateway.apple.com, como URL de validação. Para garantir que os certificados permaneçam seguros, a solicitação aos servidores do Apple Pay deve vir do servidor do comerciante, e não do diretamente do navegador. Isso ocorre para que os certificados de identidade do comerciante permaneçam seguros, não sejam compartilhados com usuários e terceiros e não possam imitar seu site. Para solicitar uma nova sessão, o servidor do comerciante cria um payload de solicitação de sessão e o publica nos servidores do Apple Pay usando TLS bidirecional. O certificado usado para a conexão é o certificado de identidade do comerciante. Depois que a identidade do comerciante for validada, um novo objeto de sessão do comerciante será gerado e retornado ao servidor. Esse objeto não deve ser modificado, caso contrário, a validação do comerciante falhará. Depois, o objeto da sessão do comerciante é repassado ao navegador. Em seguida, você passa o objeto da sessão do comerciante para o método de conclusão para concluir o processo de validação do comerciante. O sistema ativará a página de pagamento para interação com o cliente. Vamos ver como realizar esse processo no código. Ao pressionar o botão Apple Pay, o gerenciador de validação do comerciante será acionado. Dentro desse gerenciador, uma chamada deve ser feita para um endpoint no servidor para processar a solicitação da sessão do comerciante. Quando recebido pelo navegador, o objeto da sessão do comerciante é passado como JSON e usado no callback completo para finalizar o processo. A validação bem-sucedida do comerciante resulta na atualização da pagina de pagamento para notificar o cliente de que o pagamento está pronto para ser confirmado. A validação malsucedida do comerciante fará com que a página de pagamento seja descartada logo após o cliente clicar no botão Apple Pay. Se estiver tendo problemas na validação do comerciante, você pode usar o console da ferramenta Inspetor Web integrada do Safari para registrar erros e objetos ao trabalhar na validação do comerciante. O Inspetor Web inclui várias ferramentas avançadas para depurar e inspecionar páginas online, extensões da web e WKWebViews. Ao executar o Inspetor Web no Mac, você pode usá-lo para depurar o código em execução em qualquer dispositivo conectado. Para saber mais sobre o Inspetor Web, consulte "Redescubra os recursos do Safari para desenvolvedores" da WWDC23. Depois de vermos a validação do comerciante, vamos nos aprofundar na autenticação de pagamentos. Quando o usuário altera ou atualiza campos na página de pagamento, essas seleções são compartilhadas por meio de gerenciadores de eventos, permitindo que o site responda à entrada do usuário. Exemplos desses gerenciadores são a forma de pagamento selecionada pelo cliente, incluindo códigos de cupom, a opção de envio escolhida é atualizada; ou há alterações na localização do endereço de entrega. Quando o navegador chamar um desses gerenciadores, você terá 30 segundos para processar e chamar a função callback updateWith. Verifique todas as chamadas do servidor para conferir se a validade do endereço de envio é em 30 seg. Caso a função callback não seja chamada nesse período, aparecerá uma mensagem na página de pagamento informando que o pagamento não pôde ser concluído. Vamos investigar o gerenciador onshippingaddresschange com mais detalhes. Antes de o usuário autenticar a transação, as informações de contato de envio editadas são compartilhadas com o site do comerciante. Para fins de privacidade, isso inclui apenas os dados necessários para calcular os custos finais da transação, como impostos ou frete. Depois de receber essas informações, você poderá calcular os totais relevantes. Se você identificar que há um problema no endereço ou nas informações de contato fornecidas pelo cliente, você também poderá criar as próprias mensagens de erro personalizadas. As mensagens de erro permitem destacar os campos que precisam de atenção e fornecem orientações claras e práticas para facilitar aos clientes a solução rápida de problemas e a conclusão de transações. Quando o Apple Pay fornece os dados, você pode realizar a mesma validação que faria para qualquer campo de entrada manual que você tem hoje no site. Ao identificar que há um problema no endereço ou nas informações de contato do usuário, você pode usar ApplePayError para criar uma mensagem de erro personalizada. Os detalhes fornecidos em um ApplePayError incluem um código de erro que identifica a área da página de pagamento com o erro; campo de contato, que é o campo específico na página de pagamento com o erro; e, finalmente, a mensagem personalizada a ser exibida na página de pagamento. O ApplePayError é repassado à atualização com o callback do evento. Você também pode verificar o endereço completo e as informações de contato do usuário depois de autorizar a transação com o Face ID, Touch ID ou senha. Se houver um problema nas informações de endereço do usuário, você poderá permitir uma nova tentativa da transação e destacará os problemas que precisam ser corrigidos. Se houver objetos de erro anexados à matriz de erros, você poderá impedir que o usuário finalize a compra até que as informações estejam no formato esperado pelas regras de validação. É recomendável ser o mais flexível possível com os formatos de endereço para que os usuários possam realizar uma transação bem-sucedida. Também dentro do payload do Apple Pay está o token de pagamento, contendo as informações necessárias para processar a transação. Se você realiza a descriptografia do token de pagamento, fará isso agora. Na maioria dos casos, o provedor de serviços de pagamento cuidará do processo de descriptografia, e você poderá enviar o token diretamente para processamento. Esse token também conterá o nome de exibição do cartão usado na transação, que inclui a rede e os últimos quatro dígitos do número do cartão. Será diferente do token específico do dispositivo, e você deverá usá-lo para indicar ao cliente qual cartão foi usado para a transação, como no e-mail de confirmação do pedido ou no comprovante. Então, essa foi a autenticação de pagamento. Para terminar, vamos ver o processamento de pagamentos. Após o processo ser realizado pelo provedor de serviços de pagamento, o resultado deverá ser passado ao método completo para avisar o cliente do resultado. Em uma transação bem-sucedida, isso ocorre quando há a aprovação. A página é atualizada com uma marca de seleção e passa para a conclusão do pagamento do Apple Pay. Se um pagamento falhar, você poderá transmitir a falha para o gerenciador de resposta. A página de pagamento mostra um ponto de exclamação, e o cliente precisa tentar novamente, ou você pode ignorar a página. E, com isso, vimos as quatro etapas principais necessárias para implementar o Apple Pay. Mas é claro que nenhuma conversa sobre implementação está completa sem mencionar os testes. Por fim, vamos analisar rapidamente o teste de solução. Para fazer isso, acesse o site de testes do sandbox do Apple Pay . Você encontrará números de cartão de crédito de sandbox que podem ser provisionados em dispositivos para testar a integração de front-end e o processo de descriptografia. Tenha em mente que os cartões de crédito de sandbox não serão processados com êxito se forem enviados para um ambiente de processamento de pagamentos de produção. Os cartões de crédito de sandbox são ótimos para testes. No entanto, recomendamos que os testes sejam realizados com cartões reais antes de enviar por push a implementação para produção. Testar com cartões reais garante que o fluxo completo do processo de pagamento funcione conforme o esperado. E isso encerra os testes e a visão geral dos primeiros passos de como usar o Apple Pay na web. Falei bastante, desde configuração e implementação até testes de sandbox. Mas, antes de encerrar, vou passar algumas etapas para ajudar a continuar a jornada de integração com o Apple Pay. Primeiro, não deixe de acessar o site de demonstração do Apple Pay. É o melhor ponto de partida ao criar a solução do Apple Pay. Revise o Guia de Integração do Comerciante vinculado a esta sessão. Ele fornece muitos detalhes sobre cada etapa do caminho para uma implementação bem projetada de Apple Pay. E, por fim, confira a seção do Apple Pay do Human Interface Guidelines. Você encontrará orientações detalhadas da interface do usuário sobre como apresentar o Apple Pay e a página de pagamento no seu site. Agradeço a presença e desejo sucesso na integração do Apple Pay.