Como configurar o Apple Pay no Storefront 2.0 via Braintree

O Apple Pay é um meio de pagamento da Apple que permite que clientes paguem usando cartões salvos no app Wallet, carteira da Apple, de forma rápida e segura. No contexto da Wake, o Apple Pay é oferecido através da Braintree e funciona exclusivamente no Storefront 2.0.

Caso ainda esteja no Storefront 1.0, fale com sua agência parceira e consulte essa doc para uma migração facilitada.

Requisitos para usar Apple Pay na sua loja

Para que o Apple Pay funcione corretamente na sua loja Wake, é necessário:

• Estar utilizando o Storefront 2.0 da Wake.
• Ter uma conta ativa na Braintree com suporte a Apple Pay.
• Ter uma conta de desenvolvedor Apple (Apple Developer Account) para criação/gestão dos certificados e configuração do domínio.
• Entender a restrição de uso:
  • O Apple Pay só aparece para usuários usando o navegador Safari em dispositivos Apple (iPhone, iPad ou Mac compatíveis) com o Apple Pay configurado no Wallet.
  • Clientes em outros navegadores ou dispositivos (por exemplo, Chrome, Android) não conseguirão finalizar pagamento via Apple Pay.

Listamos abaixo o passo a passo técnico necessário para configurar a Apple Pay via Brantree, mas ressaltamos que você receberá ajuda do time da própria Braintree durante todo o processo. Documentação de referência https://developer.paypal.com/braintree/docs/guides/apple-pay/configuration/javascript/v3/

1. Chaves necessárias e configuração no Admin Wake

Para configurar o método de pagamento Apple Pay, você precisará obter algumas chaves junto da Braintree as quais devem ser inseridas no admin.

As chaves que você deve obter (com o time responsável pela conta Braintree) são:

• merchant-id
• merchant-account-id
• public-key
• private-key
• wake-token
• provider
• store-name 

Observação: esses dados ficam disponíveis no painel da Braintree (ou via time técnico/parceiro que está integrando a conta) e são específicos de cada loja/conta.

Permitir Múltiplas Transações por Split? Esta feature flag deve ser habilitada para lojas que operam com múltiplos Centros de Distribuição (CDs) e utilizam o rateio de pagamento (split) entre eles. A ativação depende da compatibilidade técnica do conector utilizado. 

Nota: Atualmente, o conector Apple Pay - Braintree não suporta esta funcionalidade.

Tipo Pagamento: Deverá ser preenchido com a forma de pagamento configurada, neste caso Cartão;

1.1 Configurando o conector Apple Pay no Admin

• Acesse o Admin da Wake com um usuário que tenha permissão para configurar meios de pagamento.
• Navegue até o menu de Pagamentos ou Meios de pagamento (nome pode variar conforme a configuração da sua conta).
• Localize o conector Apple Pay (Braintree).
• Preencha os campos do conector com os valores correspondentes:
  • Merchant ID → merchant-id
  • Merchant Account ID → merchant-account-id
  • Public Key → public-key
  • Private Key → private-key
  • Wake Token → wake-token
  • Provider → provider
     
• Salve as configurações.

Após salvar, a sua loja já estará integrada ao Apple Pay via Braintree do ponto de vista de credenciais e backend.

2. Criação de Merchant ID dentro do Apple Developer

Antes de mais nada, acesse o portal Apple Developers e crie uma conta de desenvolvedor.

• Depois de logado na sua conta Apple Devoloper, acesse  https://developer.apple.com/account/resources/certificates/list 
• Clique em “Identifiers” e depois no símbolo de + 

• Na tela que se abre busque por “Merchant ID” e clique em continuar.

• Configure um nome para o seu Merchant ID (será usado para encontrá-lo na lista de merchants IDs que você tiver) e o domínio que deve ser no formato merchant.com.sualoja.
• Feito isso, seu Merchant ID estará criado!
   

3. Configuração do Apple Pay na Braintree (ambiente de produção)

Depois do Merchant ID já criado dentro do Apple Develper, é hora de registrá-lo dentro da Braintree, seguindo o fluxo descrito na documentação oficial da Braintree para Apple Pay, presente neste link.

• Acesse o painel de produção da Braintree
• Abra as configurações de processamento
  • Clique no ícone de engrenagem (⚙) no canto superior direito.
  • No menu, clique em Account Settings.

• Dentro do menu Processing Options, será listado uma série de meios de pagamento. 
  • Role até encontrar Apple Pay e ative o toggle desse pagamento
  • Ao lado de Apple Pay, clique em Options.

• Adicione seu Apple Merchant Certificates (iOS)
  • Clique em +Add e, na tela que aparece, clique em “Certificate Signing Request”, conforme imagem abaixo. Isso irá baixar um arquivo no seu computador.

Salve em um local seguro e de fácil acesso.

4. Adicionando o “Certificate Signing Request” na Apple Developer: 

Após a conclusão do passo anterior, volte para o seu Apple Developer por meio do link https://developer.apple.com/account/resources/certificates/list

• Dentro de “certificates” clique no símbolo +
  

• Na tela que se abrirá, scrolle até encontrar o setor “Apple Pay Payment Processing”. Selecione e clique em continuar

• Selecione o seu Merchant ID criado no passo 3
• Na tela seguinte, procure pelo setor “Apple Pay Payment Processing Certificate “ e clique no botão Create Certificate

8. Escolha o arquivo baixado do portal da Braintree e que você salvou no seu computador, e faça o upload

9. Por último, faça o download do Certificado que você acabou de criar por meio do botão Download que aparecerá na sua tela:

Salve o arquivo em local de fácil acesso

5. Fazendo o Upload do Certificado na Braintree

Volte para o portal da Braintree e realize o upload do certificado que você acabou de criar e baixar no passo anterior, dentro do portal da Braintree por meio da tela abaixo, clicando no botão “Choose File”:

10. Finalmente: tudo pronto!

Com tudo isso configurado, seus clientes elegíveis verão o botão Apple Pay no checkout e poderão concluir seus pedidos com poucos toques, usando o wallet da Apple.