Apple Pay com Appmax JS

Este guia fornece instruções detalhadas para a integração do Apple Pay utilizando o Appmax JS.

Sobre o Apple Pay

O Apple Pay é uma solução de pagamento digital da Apple que permite aos usuários realizarem compras com cartão de crédito de forma rápida, segura e conveniente por meio de dispositivos compatíveis, como iPhone, iPad, Apple Watch e Mac.

Utilizando tecnologia de tokenização e autenticação biométrica (Face ID ou Touch ID), o Apple Pay elimina a necessidade de inserir manualmente dados do cartão em cada transação, reduzindo o tempo de checkout e aumentando a conversão de pagamentos. Além disso, transações realizadas via Apple Pay não possuem risco de receberem chargebacks por fraude.

⚠ Importante: O Apple Pay é compatível apenas com o navegador Safari e dispositivos Apple com suporte a este método de pagamento.

1. Instalação do Script

Adicione o script do AppmaxScripts ao seu projeto inserindo o seguinte código dentro da seção <head> ou antes do fechamento do <body>:

<script src="https://scripts.appmax.com.br/appmax.min.js"></script>

2. Inicializar o AppmaxScripts

Após o carregamento do script, é necessário inicializar o AppmaxScripts informando:

sucess: callback para pagamento aprovado.
error: callback para erros de pagamento.
externalId (opcional): um identificador externo do pedido.
update (necessário para Apple Pay): função que deve retornar, a cada chamada, o estado mais atualizado do checkout.

<script>
  const sucess = (data) => {
    console.log('Pagamento aprovado:', data);
  };

  const error = (error) => {
    console.error('Erro no pagamento:', error);
  };

  // Função que retorna dados sempre atualizados do checkout
  const update = () => getCheckoutData();

  // externalId (opcional) para rastreamento externo
  const externalId = 123456;

  document.addEventListener('DOMContentLoaded', () => {
    if (!window.AppmaxScripts) {
      console.error('AppmaxScripts não carregado.');
      return;
    }

    // Inicialização mínima (sem Apple Pay):
    window.AppmaxScripts.init(sucess, error);

    // Inicialização completa (com Apple Pay):
    window.AppmaxScripts.init(sucess, error, externalId, update);
  });
</script>

3. Mantendo `update` Atualizado (Exemplo com JS Puro)

Para que update sempre reflita as mudanças do usuário:

Capture referências aos campos do formulário:

const installmentsInput = document.getElementById('installments');
const freightInput      = document.getElementById('freight');
const discountInput     = document.getElementById('discount');
const productItems      = () => document.querySelectorAll('.product-item');

Crie uma função que leia valores atuais e monte o objeto de checkout, o código abaixo é apenas um exemplo:

function getCheckoutData() {
  const products = Array.from(productItems()).map(item => ({
    name:     item.querySelector('.product-name').textContent,
    price:    parseFloat(item.querySelector('.product-price').value),
    quantity: parseInt(item.querySelector('.product-quantity').value, 10)
  }));

  const freight  = parseFloat(freightInput.value  || 0);
  const discount = parseFloat(discountInput.value || 0);
  const totalItems = products.reduce((sum, p) => sum + p.price * p.quantity, 0);

  return {
    orderId:      sessionStorage.getItem('order_id') || '',
    total:        totalItems + freight - discount,
    freight:      freight,
    discount:     discount,
    installments: parseInt(installmentsInput.value, 10) || 1,
    products:     products
  };
}

Use getCheckoutData dentro de update:
```
const update = () => getCheckoutData();
```

4. Configuração do botão Apple Pay

Para ativar o Apple Pay, adicione o atributo obrigatório data-appmax-apple-pay no botão de pagamento:

<button
  type="submit"
  class="appmax-apple-pay-btn"
  data-appmax-apple-pay
>
  Pagar com Apple Pay
</button>

⚠ Importante:

O botão só será exibido em dispositivos compatíveis com Apple Pay via Safari.

Use o layout oficial da Apple; a classe CSS appmax-apple-pay-btn segue esse padrão.

5. Configuração de Parcelas

Para permitir que o usuário selecione o número de parcelas:

<input
  type="number"
  id="installments"
  name="installments"
  appmax-form-element="installments"
  min="1"
  max="12"
/>

Requisitos:

Aceita apenas valores numéricos de 1 a 12.

6. Armazenamento do ID do Pedido

Durante a criação do pedido, salve o ID no sessionStorage:

<script>
  sessionStorage.setItem('order_id', '123456');
</script>

7. Exemplo completo

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://scripts.appmax.com.br/appmax.min.js"></script>
  <title>Checkout Apple Pay</title>
</head>
<body>
  <form id="payment-form" method="POST">
    <div class="form-group">
      <label for="installments">Parcelas:</label>
      <input
        type="number"
        id="installments"
        name="installments"
        appmax-form-element="installments"
        min="1"
        max="12"
      />
    </div>
    <div class="form-group">
      <label for="freight">Frete:</label>
      <input type="number" id="freight" name="freight" step="0.01" />
    </div>
    <div class="form-group">
      <label for="discount">Desconto:</label>
      <input type="number" id="discount" name="discount" step="0.01" />
    </div>

    <button
      type="submit"
      class="appmax-apple-pay-btn"
      data-appmax-apple-pay
    >
      Pagar com Apple Pay
    </button>
  </form>

  <script>
    const sucess = (data) => console.log('Pagamento aprovado:', data);
    const error   = (err)  => console.error('Erro no pagamento:', err);

    // Reutiliza a função de obtenção de dados sempre atualizados
    const update = () => getCheckoutData();
    const externalId = 123456;

    document.addEventListener('DOMContentLoaded', () => {
      sessionStorage.setItem('order_id', '123456');
      window.AppmaxScripts.init(sucess, error, externalId, update);
    });
  </script>
</body>
</html>

8. Resumo de requisitos e compatibilidade

Compatibilidade: Safari em dispositivos Apple.
Init:
- init(sucess, error) → sem Apple Pay.
- init(sucess, error, externalId, update) → com Apple Pay.
update: obrigatório para suporte a Apple Pay; deve ler sempre valores atuais do formulário.
externalId: opcional, mas recomendado.
Parcelas: input numérico de 1 a 12.
Order ID: deve estar em sessionStorage antes de chamar init.

teles/appmax-readme.md