# Sprite formas de pagamentos

#### O que é Sprite de imagens

Sprite de imagens é uma técnica que combina várias pequenas imagens em uma unica imagem maior. Ao utilizar esse método reduzimos o número de requisições HTTP.

Por exemplo, se uma loja utiliza 10 ícones pequenos de 30 x 30 pixels, carregá-los separadamente resultaria em 30 requisições diferentes. Usando sprite, esses 10 ícones seriam combinados em uma imagem 300 x 300 pixels e somente uma única requisição precisaria ser feita.

Para exibir as imagens individuais corretamente carregadas por Sprinte, usamos a propriedade CSS `background-position`.

#### Sprite de imagens de pagamentos

A Tray disponibiliza a técnica de sprites para as imagens das formas de pagamento. Como a maioria das lojas possuem diversas formas de pagamento e elas geralmente são exibidas em ícones, usa-la faz muito sentido.

Utilizamos a classe `.pag` para identificar onde a imagem de pagamento deve ser carregada e a classe `.pag-lazy` para efetivamente carregar o sprite das imagens de pagamento. Cada forma de pagamento é identificada por uma classe própria iniciando por `.pag-`. 

A tabela abaixo mostra a classe e uma imagem representativa. A imagem carregada pode ser ligeiramente diferente.

| Classe                                                                                                                  | Ícone                                                                                                                                                                                                                           |
| ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `.pag-bb`                                                                                                               | ![](https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2FDghDcUEOuDCtWKnNvLDV%2Fbb.png?alt=media\&token=adcf824f-727d-4470-bf39-6b637d41ea81)                 |
| `.pag-itau`                                                                                                             | ![](https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2F4lIdkpuILJ65o1ycWlFf%2Fitau.png?alt=media\&token=eb977972-4a55-4cbf-a2ea-4405e0a2e028)               |
| `.pag-bradesco`                                                                                                         | ![](https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2FvStlt2JX9Lx6o9liTVa1%2Fbradesco.png?alt=media\&token=0821d0a5-1f89-4a92-9508-ab39893777c1)           |
| `.pag-caixa`                                                                                                            | ![](https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2Fup8NbDznBKGGztIsZXTm%2Fcaixa.png?alt=media\&token=8b25dc57-34a8-40ab-8602-e99d63663540)              |
| <p><code>.pag-avista</code></p><p><code>.pag-banrisul</code></p>                                                        | ![](https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2F7qbv1basTmARZBpztK4v%2Fbranrisul.png?alt=media\&token=b354a1c1-ac9f-4018-a0f7-5e7ab175807a)          |
| `.pag-pix`                                                                                                              | ![](https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2Fdgmv24aigS9tJc9OMO0A%2Fpix.png?alt=media\&token=08967f22-c249-47e3-bedc-ba154239dce0)                |
| `.pag-bank_billet`                                                                                                      | ![](https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2FoPYDRxNlzgja0lwaELYo%2Fboleto.png?alt=media\&token=30c57ef1-9257-4f16-af4b-ae03db48415e)             |
| `.pag-deposit`                                                                                                          | ![](https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2FfEYAAxpZFTSa5qGxIhdt%2Fdep%C3%B3sito.png?alt=media\&token=9c9c6506-72b4-4abe-9e4f-ee3d1a43ddcc)      |
| <p><code>.pag-</code></p><p><code>.pag-base</code> </p><p><code>.pag-bcash</code> </p><p><code>.pag-billing</code> </p> | ![](https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2Fv4EcYUYvc68BBo6nRKsz%2Fdinheiro.png?alt=media\&token=06eb7e7c-fa83-41b5-a09f-beb56d620511)           |
| `.pag-visa`                                                                                                             | ![](https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2FDiEBEWoAiCzTOYqQdYSX%2Fvisa.png?alt=media\&token=842c6a39-2acb-409c-bd28-ecb4ed185bb3)               |
| `.pag-visaelectron`                                                                                                     | ![](https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2F9caybCYCpbUQAceffNGJ%2Fvisa-electron.png?alt=media\&token=74acc227-d4eb-4b8f-9adf-11ee4ae9187c)      |
| `.pag-mastercard`                                                                                                       | ![](https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2FM4CmNHRI3qxSgoCyAZBs%2Fmaestro.png?alt=media\&token=3c64e89c-fb65-409f-b9cb-6b20914b244b)            |
| `.pag-maestro`                                                                                                          | ![](https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2FBx84YTqDTClN6bBnmUKI%2Fmastercard-maestro.png?alt=media\&token=afbe54dc-88c6-4a2d-a870-26e1427346df) |
| `.pag-elo`                                                                                                              | ![](https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2FWTMRn3IgRS3otFNR2GVV%2Felo.png?alt=media\&token=2cf9c196-09c8-46d3-9c04-b6f723761049)                |
| `.pag-jcb`                                                                                                              | ![](https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2FrULnkWFqOtzZTDwSVlNn%2Fjcb.png?alt=media\&token=021f4117-0be8-4038-b22e-413885f81b6e)                |
| `.pag-hiper`                                                                                                            | ![](https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2FV4jA55W0MZs84p1txMNk%2Fhiper.png?alt=media\&token=c7b289e5-e1c4-49d6-b2e0-c3f8cc0acfd0)              |
| `.pag-hipercard`                                                                                                        | ![](https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2Fo9shGTCfbdjdWKv9cPGQ%2Fhipercard.png?alt=media\&token=e07a04f9-7f83-443b-8888-5b49c7e44ef9)          |
| `.page-amex`                                                                                                            | ![](https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2FyemP3bblVBmeHnzwsdkd%2Famex.png?alt=media\&token=da5d2795-35d3-4edc-a57b-5222be69ce21)               |
| `.pag-diners`                                                                                                           | ![](https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2FVQ1vgeWilo3M4TgLFGv5%2Fdiners.png?alt=media\&token=55b02a78-6ba5-45c4-8e27-19d1b7731c32)             |
| `.page-aura`                                                                                                            | ![](https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2FqClIqUjH1jyfHABvruQy%2Faura.png?alt=media\&token=24f600a0-16df-4f0d-9a02-be75640ec3f1)               |
| `.pag-discover`                                                                                                         | ![](https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2FXapCziWQhTmroefnIEJd%2Fdiscover.png?alt=media\&token=9870bb7a-d056-4412-88a6-dc3a4ee44db5)           |
| `.pag-pagseguro`                                                                                                        | ![](https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2F783OIWIdwbYR3bw8CUJN%2Fpagseguro.png?alt=media\&token=fd6d7e97-6d60-4b3c-b195-4a057652ddf5)          |
| `.pag-mercadopago`                                                                                                      | ![](https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2FOGBwf9qnt3cD3c10gyVz%2Fmercado-pago.png?alt=media\&token=2e02c7d5-1100-4378-a831-742ac64e4801)       |
| `.pag-vindi`                                                                                                            | ![](https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2FAYfrOlfEMj7ROYI5jRAD%2Fvindi.png?alt=media\&token=22005761-779c-4d5a-9a3f-00c560cff7b0)              |
| `.pag-paypal`                                                                                                           | ![](https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2FMIVJ1d0NzxA8bUhuELTS%2Fpaypal.png?alt=media\&token=ff166a8e-312e-4c77-8393-2b148bece457)             |
| `.pag-moip`                                                                                                             | ![](https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2FGJT1GGfYlIEZb4o2PWnl%2Fmoip.png?alt=media\&token=fdf92eb5-2747-4a6c-abc9-7ff1145bb39a)               |
| `.pag-peela`                                                                                                            | ![](https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2FAhWiPlkA8YDdzpkmd3Wd%2Fpeela.png?alt=media\&token=15f58e20-5256-4e96-81c2-4684ded89919)              |
| `.pag-check`                                                                                                            | ![](https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2F0Zv5QXukmYw5pbCRIbaF%2Fcheque.png?alt=media\&token=6e8b3384-8d16-47e9-89c0-3ee94bc628e1)             |
| `.pag-dinheiromail`                                                                                                     |                                                                                                                                                                                                                                 |

O código abaixo mostra a implementação dos ícones de forma de pagamento utilizando a técnica de sprinte.

{% code title="Código" %}

```html
<ul class="payment-list row">
    {% for payment in paymentMethods.order %}
        <li class="col-sm-2 col-xs-2 payment-form">
            <i class="pag {{ payment.sprite_class }}" aria-label="{{ payment.display_name }}"></i>
        </li>
    {% endfor %}
    {% for payment in paymentMethods.credit %}
        <li class="col-sm-2 col-xs-2 payment-form">
            <i class="pag {{ payment.sprite_class }}" aria-label="{{ payment.display_name }}"></i>
        </li>
    {% endfor %} 
</ul>
```

{% endcode %}