# 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`                                                                                                               | ![](/files/8FR1xOpDSJ8IFzXiLe8C) |
| `.pag-itau`                                                                                                             | ![](/files/zTdVG8iOJPzsOB3cizwx) |
| `.pag-bradesco`                                                                                                         | ![](/files/3NStu0U13HH4l1JTqc0H) |
| `.pag-caixa`                                                                                                            | ![](/files/imv7mJDvrz5hhpny7Nr6) |
| <p><code>.pag-avista</code></p><p><code>.pag-banrisul</code></p>                                                        | ![](/files/CqbMkJN6VZ2Nyu2vxYjI) |
| `.pag-pix`                                                                                                              | ![](/files/7HfDO8Do7lt4TuAyrdLw) |
| `.pag-bank_billet`                                                                                                      | ![](/files/Yu1YLO2mBsVqVpOzZSit) |
| `.pag-deposit`                                                                                                          | ![](/files/nhnkFUVeCFZETSkpyXcV) |
| <p><code>.pag-</code></p><p><code>.pag-base</code> </p><p><code>.pag-bcash</code> </p><p><code>.pag-billing</code> </p> | ![](/files/4lBepj7XPrRKO8St5kvR) |
| `.pag-visa`                                                                                                             | ![](/files/Dje5TXMjtIA7aTAtVOTl) |
| `.pag-visaelectron`                                                                                                     | ![](/files/da7dzDVEZ2CPlHwiOlpB) |
| `.pag-mastercard`                                                                                                       | ![](/files/f9uNRJpjOQFUSk5fGYW0) |
| `.pag-maestro`                                                                                                          | ![](/files/8YEuAxL3MgRmleCYa6TD) |
| `.pag-elo`                                                                                                              | ![](/files/sh4fe1bvQQVc7Hnwx35p) |
| `.pag-jcb`                                                                                                              | ![](/files/2Zi69eAOmlORloUdSFok) |
| `.pag-hiper`                                                                                                            | ![](/files/ARvxg9dKhJgPcEDe350I) |
| `.pag-hipercard`                                                                                                        | ![](/files/bwLYtTbfyV03QrWTfOe6) |
| `.page-amex`                                                                                                            | ![](/files/19BhN4q2eHGM1hHgDRJs) |
| `.pag-diners`                                                                                                           | ![](/files/wug9ZcLyYdP4XiwGHjIM) |
| `.page-aura`                                                                                                            | ![](/files/xbrE5uA5OsnFOK80fwDh) |
| `.pag-discover`                                                                                                         | ![](/files/nvNxaYP4GFaAlWJmCAPg) |
| `.pag-pagseguro`                                                                                                        | ![](/files/PQZBY63X5DoFJLy3MU2y) |
| `.pag-mercadopago`                                                                                                      | ![](/files/VjuEVgYsftlwmdiJm0Fp) |
| `.pag-vindi`                                                                                                            | ![](/files/o41bdlQV0Gv8tNDKCgoH) |
| `.pag-paypal`                                                                                                           | ![](/files/ww3iEuvWwbaYhJYtZQXm) |
| `.pag-moip`                                                                                                             | ![](/files/sQNOhGTrfHKPwmY709Jr) |
| `.pag-peela`                                                                                                            | ![](/files/juXonNOyQ0RsDgqeCcS8) |
| `.pag-check`                                                                                                            | ![](/files/wlzOnSiJghgJL1LCKwIV) |
| `.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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://partners.tray.com.br/themes/construindo-seu-template/core-web-vitals/desempenho/sprite-formas-de-pagamentos.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.