# Exibindo as formas de pagamento de um produto

Esse artigo tem como objetivo demonstrar como exibir informações de pagamento de um produto, para isso há diversas formas e cabe ao desenvolvedor escolher qual melhor atende a suas necessidades:

1.  **{{ product.payment }}**

   Essa chamada tem como principio exibir um bloco pronto com as formas de pagamentos configuradas na loja, para edita-lo é possível utilizando apenas 'css' e 'js'.

    
2.  **{{ product.payment\_option\_details }}**

   Assim como o `product.payment` esse índice retorna as informações de pagamento do produto, só que de uma forma mais detalhada, ele trás os elementos de forma separada, o que possibilita ao desenvolvedor realizar a implementação utilizando apenas as informações  que precisa. Esse índice é trazido também nas variações do produto, dessa forma é possível obter as formas de pagamento de cada variação.

   **Exemplo de retorno do índice**

```json
[payment_option_details] => Array
        (
            [0] => Array
                (
                    [display_name] => Boleto - TrayCheckout
                    [plots] => 1
                    [value] => 45.00
                )

            [1] => Array
                (
                    [display_name] => Cartão Amex - TrayCheckout
                    [plots] => 5
                    [value] => 10.60
                )
        )
```

**Exemplo de implementação**

```html
{% for payment in product.payment_option_details %}
  {% if payment.plots == 1 %}
  <h2 clas="PrecoPrincipal" >{{ settings.currency }} {{ payment.value }}</h2>
    <span> à vista no {{ payment.display_name }}</span>
  {% else %}
    {% if payment|length > 1 %}
     <br><span> ou </span>
    {% endif %}
    em <span>{{ payment.plots }} vezes de {{ settings.currency }} {{ payment.value }}
    no {{ payment.display_name }}</span>
  {% endif %}
{% endfor %}
```

&#x20;

1. &#x20;**API de Produto**

   &#x20;

   É possível também exibir as formas de pagamento utilizando a API de Produto como mostra o exemplo abaixo:

   **Exemplo**&#x20;

   Crie um arquivo dentro da pasta `elements/snippets` como o conteúdo abaixo:

```javascript
<script>
  $(document).ready(function(){
    var productId = {{ product.id }}
    $.ajax({
      method: "GET",
      url: "/web_api/products/"+productId
    }).done(function( response, textStatus, jqXHR ) {
      var payment = response.Product.payment_option_details
      var avista, ou, prazo;
      $( payment ).each(function( index ) {
        console.log(this);
        if(this.plots ==1){
          avista = `
            <h2 clas="PrecoPrincipal" > R$ ${this.value}</h2>
            <span> à vista no ${ this.display_name }</span>`;
        }else{
          if(index > 1)
            ou = `<br><span> ou </span>`;
         prazo = `
          em <span>${ this.plots } vezes de R$ ${ this.value }
          no ${ this.display_name }</span>`;
        }
        $(".product-price"+productId).append(avista, ou ,prazo);
      });
    }).fail(function( jqXHR, status, errorThrown ){
      var response = $.parseJSON( jqXHR.responseText );
    });
   });
</script>
```

Faça a chamada abaixo onde deseja exibir as formas de pagamento:

```html
<div class="product-payment">
  <div class="product-price{{ product.id }}">
  </div>
  {% element 'snippets/payment' {
      "product": product
  } %}
</div>
```

Lembre-se de configurar o modo de demonstração do preço do produto em sua loja. Para isso acesse ***Configurações > Produto > Geral > Preço*** e escolha as opções desejadas.


---

# 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/desenvolver/exibindo-as-formas-de-pagamento-de-um-produto.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.