# Referências múltiplas

Mostrar o valor total e vários itens no botão de pagamento.

Quando o carrinho tem vários itens e quer mostrar o valor no botão
(`config.showAmount: true`), adiciona uma **referência de pagamento por item**.

## Adicionar todas de uma vez

```js
const button = facipay.generateButton({
  createOrder: async () => referenceNumber,
  options: {
    config: { showAmount: true },
  },
});

button.render('#facipay-button-container');

button.addAllPaymentReferences(cart.items.map((item) => ({
  referenceNumber: String(item.id),
  referenceDescription: item.name,      // ignorado pela SDK
  referenceAmount: item.price,          // AOA, inteiro
  referenceQuantity: item.quantity,
  referenceTotalQuantity: item.stock_quantity,
})));
```

## Adicionar uma a uma

```js
button.addPaymentReference({
  referenceNumber: '123456789',
  referenceDescription: 'T-Shirt Wow Media',
  referenceAmount: 5000,
  referenceQuantity: 1,
  referenceTotalQuantity: 20,
});
```

## Atualizar quantidade

Quando o cliente muda a quantidade no carrinho, mantenha o botão sincronizado:

```js
async function onQuantityChange(item, newQuantity) {
  await updateCartOnServer(item.id, newQuantity);
  facipay.button.updateQuantity(String(item.id), newQuantity);
}
```

## Via atributos HTML

Para um único item, pode declarar a referência no próprio container:

```html
<div id="facipay-button-container"
     data-single-reference-number="123456789"
     data-single-reference-amount="5000"
     data-show-amount="true">
</div>
```

<Warning>
`referenceAmount` é **inteiro em AOA, sem decimais**. O total mostrado no botão é a soma de
`referenceAmount × referenceQuantity` de todas as referências.
</Warning>

<Card title="Próxima receita: Tratamento de erros" icon="arrow-right" href="/pt/sdk/recipes/error-handling">
  Erros, estados de carregamento e popups bloqueados.
</Card>