Checkout Éxito

Corresponde a la compra completada.

Checkout:

Corresponde al detalle de la venta.

variable	dato
`{{ site.countryIso }}`	País de la tienda `cl` Chile `mx` Mexico `pe` Perú
`{{checkout.numberDocumentTax}}`	- Número de documento tributario - Número de la compra en la pantalla de pedidos
`{{checkout.storePick}}`	Tipo de Retiro del pedido `0` Despacho / Envío a domicilio `1` Retiro en tienda
`{{checkout.id}}`	ID del carro
Comprador
`{{checkout.name}}`	Nombre Comprador
`{{checkout.lastName}}`	Apellido Comprador
`{{checkout.email}}`	Email Comprador
`{{checkout.phone}}`	Teléfono Comprador
`{{checkout.clientCode}}`	número de documento de identidad
Despacho
`{{checkout.shippingName}}`	Nombre tipo de Despacho
Dirección de Despacho
`{{checkout.country}}`	Pais de la Dirección
`{{checkout.state}}`	Estado / Región
`{{checkout.city}}`	Ciudad
`{{checkout.street}}`	Calle
`{{checkout.number}}`	Número de la dirección
`{{checkout.cityZone}}`	Comuna / Distrito
`{{checkout.postcode}}`	Código postal
`{{checkout.buildingNum}}`	Número del Edificio / Número Interior
`{{checkout.shippingComment}}`	Comentario o indicación del Cliente
Retiro
`{{checkout.pickName}}`	nombre de la persona que retira
`{{checkout.pickCode}}`	rut de la persona que retira
Medio de pago
`{{checkout.payId}}`	ID
`{{checkout.payType}}`	nombre
`{{checkout.createAt}}`	Fecha de Compra
`{{checkout.createAtZone}}`	`new` Fecha de Compra con zona horario del país
`{{checkout.totalCart}}`	Total de Compra
`{{checkout.shippingCost}}`	Costo del Despacho
`{{checkout.total}}`	Valor total de compra carro + despacho
`{{total_discount}}`	Suma de todos los descuentos
Compra
`{{cart}}`	`object` detalle de carro

Detalle de carro:

mantiene estructura de cart_d.

{% for item in cart %}
     {{item.quantity}}
     {{item.value}}
     {{item.discount}}
     {{item.name}}
     {{item.subTotal}}
     {{item.id}}
     {{item.discountId}}
     {{item.image}}
     {{item.variantId}}
     {{item.sku}}
     {{item.link}}
     {{item.description}}
{% endfor %}

variable	valor
`{{item.quantity}}`	cantidad de unidades
`{{item.value}}`	precio unitario del producto
`{{item.discount}}`	descuento del producto
`{{item.name}}`	nombre del producto
`{{item.subTotal}}`	precio final (cantidad * precio unitario)
`{{item.id}}`	id del producto
`{{item.discountId}}`	id del descuento
`{{item.image}}`	imagen del producto
`{{item.variantId}}`	id de la variante del producto
`{{item.sku}}`	sku del producto
`{{item.link}}`	link del producto en el sitio
`{{item.description}}`	descripción del producto

Medio pago Transferencia

SI el medio de pago es una transferencia bancaria la variable checkout.pay.commonData.PAY_BANK_NAME vendrá definida por el nombre del banco a transferir

variable	valor
`{{checkout.pay.commonData.PAY_BANK_NAME }}`	Nombre del banco
`{{checkout.pay.commonData.PAY_BANK_TYPE}}`	Tipo de Cuenta
`{{checkout.pay.commonData.PAY_BANK_ACCOUNT}}`	Numero de cuenta
`{{checkout.pay.commonData.ACCOUNT_NAME}}`	Titular de la cuenta
`{{checkout.pay.commonData.PAY_BANK_RUT}}`	Identificación del titular
`{{checkout.pay.commonData.PAY_BANK_EMAIL}}`	Correo del titular

De esta forma puedes evaluar si pagan con transferencia bancaria o con otro medio de pago

{% if checkout.pay.commonData.PAY_BANK_NAME %}
   pago con transferencia 
{% else %}
   pago con otro medio de pago
{% endif %}

Componentes

Mejoras de la versión 2

No evalúa los medios de pagos por ID por lo que permite tener más de un banco para pagar, evalúa que el banco tenga nombre para cargar su información
Incorpora medio de pago Yape

Para agregar Yape es necesario subir una imagen formato PNG con el nombre QR_YAPE.png en el menú Diseño > Archivos

{{ 'load checkout' | get_component }}
{% comment %} version julio 2023 {% endcomment %}
<div class="container">
    <div class="row">
        {% if checkout.numberDocumentTax > 0 %}
            <div class="col-12 my-2 text-right">
                Número de Documento: {{checkout.numberDocumentTax}}
            </div>
        {% endif %}
        <section class="col-md-6 col-lg-4">
            <div class="card mb-3">
                <h5 class="card-header">Tus Datos</h5>
                <ul class="list-group list-group-flush text-left">
                    <li class="list-group-item">
                        <strong>{{checkout.name}} {{checkout.lastName}}</strong>
                    </li>
                    {% if checkout.clientCode %}
                    <li class="list-group-item">
                        <span class="badge badge-pill badge-light">
                        {% case site.countryIso %}
                            {% when 'cl' %}Rut
                            {% else %}DNI
                        {% endcase %}
                        </span>
                            {{checkout.clientCode}}
                    </li>
                    {% endif %}
                    {% if checkout.phone %}
                    <li class="list-group-item">
                        <span class="badge badge-pill badge-light"><i class="fas fa-phone"></i></span>
                        {{checkout.phone}}
                    </li>
                    {% endif %}
                    <li class="list-group-item">
                        <span class="badge badge-pill badge-light"><i class="far fa-envelope"></i></span>
                        {{checkout.email}}
                    </li>
                </ul>
            </div>
        </section>
        <section class="col-md-6 col-lg-4">
            {% if checkout.storePick == 0 %}
                <div class="card mb-3">
                    <h5 class="card-header">{% if site.countryIso == "mx" %} Envío a Domicilio {% else %} Despacho a Domicilio {% endif %}</h5>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <span class="badge badge-pill badge-light">
                                <i class="fas fa-truck"></i>
                            </span> {{checkout.shippingName}}
                        </li>
                        <li class="list-group-item">
                            <div class="row">
                                <div class="col-auto pr-2">
                                    <span class="badge badge-pill badge-light">
                                        <i class="fas fa-map-marker-alt"></i>
                                    </span>
                                </div>
                                <div class="col pl-0">
                                    {{checkout.street | capitalize }}
                                    {% if checkout.buildingNum %} Depto. {{checkout.buildingNum}} {% endif %}</br>
                                    {{checkout.cityZone | capitalize }}</br>
                                    {{checkout.state | capitalize }}{% if checkout.postcode.size > 0 %}, {{checkout.postcode}}{% endif %}
                                </div>
                            </div>
                        </li>
                    </ul>
                    {% if checkout.shippingComment.size > 0 %}
                        <div class="card-footer">
                            <i>"{{checkout.shippingComment | capitalize | strip }}"</i>
                        </div>
                    {% endif %}
                </div>
            {% else %}
                <div class="card mb-3">
                    <h5 class="card-header">Tienda de Retiro</h5>
                    <div class="card-body">
                        <h5 class="card-title">{{storeDeliveredInfo.name}}</h5>
                        <div class="row">
                            {% if storeDeliveredInfo.address != '' %}
                                <div class="col-auto pr-2">
                                    <span class="badge badge-pill badge-light">
                                        <i class="fas fa-map-marker-alt"></i>
                                    </span>
                                </div>
                                <div class="col pl-0">
                                    {{storeDeliveredInfo.address}}</br>
                                    {% if storeDeliveredInfo.municipality %}
                                        {{storeDeliveredInfo.municipality}},
                                    {% endif %}
                                    {% if storeDeliveredInfo.city %}
                                        {{storeDeliveredInfo.city }},
                                    {% endif %}
                                    {% if storeDeliveredInfo.country %}
                                        {{storeDeliveredInfo.country}}
                                    {% endif %}
                                    <div class="mt-2">
                                        {% capture map %}{{ storeDeliveredInfo.address }} {{ storeDeliveredInfo.municipality }} {{ storeDeliveredInfo.city }} {{storeDeliveredInfo.country}}{% endcapture %} 
                                        <a  class="d-print-none btn-sm btn-primary" 
                                            href="https://www.google.com/maps/place/{{map | url_encode}}"
                                            target="_blank">Ver Mapa</a>
                                    </div>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
                {% if checkout.pickName != "" %}
                <div class="card mb-3">
                    <h5 class="card-header">Persona Autorizada para Retirar</h5>
                    <div class="card-body">
                        <strong class="text-capitalize">{{checkout.pickName}}</strong><br>
                        {% if checkout.pickCode != "" %}
                            <span class="badge badge-pill badge-light">
                            {% case site.countryIso %}
                                {% when "cl" %}Rut
                                {% else %}DNI
                            {% endcase %}
                            </span>
                            {{checkout.pickCode}}
                        {% endif %}
                    </div>
                </div>
                {% endif %}
            {% endif %}
        </section>
        <section class="col-md-12 col-lg-4">
            <div class="card mb-3">
                <h5 class="card-header">
                    Forma de Pago
                </h5>
                <!-- el metodo de pago tiene un atributo pay_bank_name imprime información del banco -->
                {% if checkout.pay.commonData.PAY_BANK_NAME %}
        
                <div class="card-body">
                    <h5 class="card-title">Tranferencia Bancaria </h5>
                    <p><small>
                        Para confimar la compra debes realizar una <ins>transferencia</ins> a la siguiente cuenta:</br>
                    </small></p>
                    <div class="row">
                        <div class="col-md-6 col-lg-12">
                            <div class="row">
                                <div class="col-3">
                                    <span class="badge badge-pill badge-light">Monto</span>
                                </div>
                                <div class="col-9">
                                   <strong> {{checkout.total | money_filter}}</strong>
                                </div>
                                <div class="col-3">
                                    <span class="badge badge-pill badge-light">Banco</span>
                                </div>
                                <div class="col-9">
                                    {{checkout.pay.commonData.PAY_BANK_NAME | capitalize}}
                                </div>
                                <div class="col-3">
                                    <span class="badge badge-pill badge-light">Tipo Cta.</span>
                                </div>
                                <div class="col-9">
                                    {{checkout.pay.commonData.PAY_BANK_TYPE | capitalize}}
                                </div>
                                <div class="col-3">
                                    <span class="badge badge-pill badge-light">N° Cta.</span>
                                </div>
                                <div class="col-9">
                                    {{checkout.pay.commonData.PAY_BANK_ACCOUNT}}
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-12">
                            <div class="row">
                                <div class="col-3">
                                    <span class="badge badge-pill badge-light">Títular</span>
                                </div>
                                <div class="col-9">
                                    {{checkout.pay.commonData.ACCOUNT_NAME}}
                                </div>
                                <div class="col-3">
                                    <span class="badge badge-pill badge-light">
                                        {% case site.countryIso %}
                                            {% when 'cl'%}Rut
                                            {% else %}DNI
                                        {% endcase %}
                                    </span>
                                </div>
                                <div class="col-9">
                                    {{checkout.pay.commonData.PAY_BANK_RUT}}
                                </div>
                                <div class="col-3">
                                    <span class="badge badge-pill badge-light"><i class="far fa-envelope"></i></span>
                                </div>
                                <div class="col-9">
                                    {{checkout.pay.commonData.PAY_BANK_EMAIL}}
                                </div>
                            </div><!--row-->
                        </div><!-- col-md-6-->
                    </div><!-- row -->
                </div><!-- card-body -->
                {% if checkout.pay.commonData.PAY_DISCOUNT != '0' %}
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                           {{checkout.pay.commonData.PAY_DISCOUNT}}% de descuento con este medio de pago
                        </li>
                    </ul>
                {% endif %}
                <div class="card-footer d-print-none">
                    <small class="text-muted">
                        Una vez confirmado el pago habilitaremos tu compra para <strong>{% if checkout.storePick == 0 %} 
                        {% if site.countryIso == "mx" %} Envío a Domicilio {% else %} Despacho a Domicilio {% endif %}{% else %} Retiro en tienda {% endif %}</strong> 
                    </small>
                    <div class="input-group mt-2 d-print-none">
                        <select id="irbanco" class="custom-select item">
                            <option value="#">Selecciona tu banco</option>
                            {% case site.countryIso %}
                                {% when 'cl' %}
                                    <!-- bancos de chile -->
                                    
                                    <option value="https://www.bice.cl">Banco BICE</option>
                                    <option value="https://www.bancochile.cl">Banco Chile</option>
                                    <option value="https://www.bancoconsorcio.cl">Banco Consorcio</option>
                                    <option value="https://www.bancocredichile.cl">Banco CrediChile</option>
                                    <option value="https://www.bancoedwards.cl">Banco Edwards Citi</option>
                                    <option value="https://www.bancoestado.cl">Banco Estado</option>
                                    <option value="https://www.bancofalabella.cl">Banco Falabella</option>
                                    <option value="https://www.bancointernacional.cl/">Banco Internacional</option>
                                    <option value="https://www.itau.cl">Banco Itaú</option>
                                    <option value="https://www.bancoripley.cl">Banco Ripley</option>
                                    <option value="https://www.santander.cl">Banco Santander</option>
                                    <option value="https://www.bancoedwards.cl">Banco Edwards Citi</option>
                                    <option value="https://www.bancosecurity.cl">Banco Security</option>
                                    <option value="https://www.bci.cl">Banco Bci</option>
                                    <option value="https://www.corpbanca.cl">CorpBanca</option>
                                    <option value="https://www.scotiabankchile.cl">Scotiabank</option>
                                    <option value="https://www.scotiabankchile.cl/Scotiabank-Azul/home">Scotiabank Azul (ex BBVA)</option>
                                {% when 'pe' %}
                                    <!-- bancos de perú -->
                                    <optgroup label="Bancos">
                                        <option value="https://www.agrobanco.com.pe/">Agrobanco</option>
                                        <option value="https://www.banbif.com.pe/Personas"> BanBif | Banco Interamericano de Finanzas</option>
                                        <option value="https://www.bancoazteca.com.pe/">Banco Azteca</option>
                                        <option value="https://www.bancomercio.com/elbanco">Banco de Comercio</option>
                                        <option value="https://www.bn.com.pe/">Banco de la Nación</option>
                                        <option value="https://www.bancofalabella.pe/home">Banco Falabella</option>
                                        <option value="https://www.bancognb.com.pe/">Banco GNB</option>
                                        <option value="https://www.bancoripley.com.pe/">Banco Ripley</option>
                                        <option value="https://www.bbvacontinental.pe/">BBVA Continental</option>
                                        <option value="https://www.viabcp.com/"> BCP | Banco credito de Perú</option>
                                        <option value="https://interbank.pe/">Interbank</option>
                                        <option value="https://www.mibanco.com.pe/">Mi Banco</option>
                                        <option value="https://www.crediscotia.com.pe/">Financiera Crediscotia</option>
                                        <option value="https://www.scotiabank.com.pe/Personas/Default">Scotiabank</option>
                                    </optgroup>
                                    <optgroup label="Cajas">
                                        <option value="https://www.cajaarequipa.pe/">Caja Arequipa</option>
                                        <option value="https://www.cajahuancayo.com.pe/">Caja Huancayo</option>
                                        <option value="https://www.cmacica.com.pe/">Caja Ica</option>
                                        <option value="https://www.cajapiura.pe/">Caja Piura</option>
                                        <option value="https://www.cajasullana.pe/">Caja Sullana</option>
                                        <option value="https://www.cajatrujillo.com.pe/">Caja Trujillo</option>
                                    </optgroup>
                                 {% when 'mx' %}
                                     <option value="https://www.bbva.mx/">BBVA</option>
                                     <option value="https://www.santander.com.mx/">Banco Santander</option>
                                     <option value="https://www.banamex.com/">Citibanamex</option>
                                     <option value="https://www.banorte.com/">Banorte</option>
                                     <option value="https://www.viabcp.com/">Banregio</option>
                            {% endcase %}
                        </select>
                        <div class="input-group-append">
                            <input  type="button" value="Ir a mi banco" class="btn btn-secondary"
                                    onclick="window.open( document.getElementById('irbanco').value ,'_blank');">
                        </div>
                        
                    </div><!-- input-group -->
                </div>
       <!-- si el tipo de pago es yape imprime imagen QR --> 
        {% elsif  checkout.pay.name == "Yape" %}
            <div class="row ">
                <div class="col-md-6 col-lg-12">  
                    <div class="card-body">
                        <img src="{{ 'QR_YAPE.png' | asset_url }}" 
                            class="img-fluid text-center" 
                            title="QR Yape" alt="QR Yape">
                    
                    </div>
                </div>
                <div class="col-md-6 col-lg-12">  
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <img src="{{checkout.pay.image }}" 
                                    class="img-fluid" 
                                    alt="{{checkout.pay.name}}" title="{{checkout.pay.name}}">
                        </li>
                        <li class="list-group-item">
                           <strong>{{checkout.total | money_filter}}</strong>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="card-footer">
                <ul class="text-muted pl-3">
                    <li>Abre tu <strong>Aplicación Yape</strong></li>
                    <li>Escanea este Código QR</li>
                    <li>Una vez confirmado el pago podemos habilitar tu compra para 
                    <strong>{% if checkout.storePick == 0 %} 
                               {% if site.countryIso == "mx" %} Envío a Domicilio {% else %} Despacho a Domicilio {% endif %}
                        {% else %} Retiro en tienda {% endif %}</strong></li>
                </ul>
            </div>
        {% else %}
             <!-- no es ninguno de los sistemas de pagos anteriores imprime la imagen del medio de pago --> 
                
                {% if checkout.pay.image.size > 0 %}
                    <img src="{{checkout.pay.image }}" 
                    class="card-img-top" 
                    alt="{{checkout.pay.name}}" title="{{checkout.pay.name}}">
                {% else %}
                    <div class="card-body">
                        <h5>{{checkout.pay.name}}</h5>
                    </div>
                {% endif %}
                <ul class="list-group list-group-flush text-left">
                    <li class="list-group-item">
                        Monto pagado: <strong>{{checkout.total | money_filter}}</strong>
                    </li>
                    <li class="list-group-item">
                        <span class="badge badge-pill badge-light px-1">
                            <i class="far fa-calendar-check"></i>
                        </span> {{checkout.createAtZone |  date: "%d/%m/%y %H:%M"}}
                    </li>
                </ul>
                {% if checkout.pay.commonData.PAY_DISCOUNT != '0' %}
                    <div class="card-footer">
                        {{checkout.pay.commonData.PAY_DISCOUNT}}% de descuento con este medio de pago
                    </div>
                {% endif %}
            
        {% endif %}
        </div>
        </section>
    </div>
    <!--row-->

    {% comment %} detalle de compra {% endcomment %}
    <div class="card">
        <h5 class="card-header">Detalle de tu Compra</h5>
        <div class="card-body position-relative">
            <!-- marca de agua-->
            <div style="position:absolute;top:0;bottom:0; right:0;left:0;margin:auto; opacity: .2;text-align:center;overflow:hidden">
                <img src="{{site.logo}}" style="transform: rotate(-45deg);">
            </div>
            <!-- marca de agua:fin -->
            {% for item in cart %}
                    <div class="row text-lg-right {% unless forloop.last %}mb-2{% endunless %}">
                        <!-- imagen --> 
                        <div class="col-2 col-md-1 pr-0">
                            <div class="bs-img-square">
                                <picture>
                                {% if item.image.size > 0 %}
                                    <img src="{{item.image }}">
                                {% endif %}
                                </picture>
                            </div>
                        </div>
                        <section class="col-10 col-md-11">
                            <div class="row">
                                <div class="col-12 col-lg-5 text-left">
                                    <strong>{{item.name}}</strong><br>
                                    <span class="badge badge-pill badge-light">sku: {{item.sku}}</span>
                                </div>
                            
                                <div class="col col-lg-2 text-lg-right">
                                    {{item.value | money_filter}} unidad
                                </div>
                                <div class="col col-lg-2 text-right">
                                    {{item.quantity | round}} cant.
                                </div>
                                <div class="col col-lg-3 text-right">
                                    {{item.subTotal| money_filter}}
                                </div>
                            </div>
                        </section>
                    </div>
                </li>
            {% endfor %}
        </div>
        <div class="card-footer">
            <div class="row text-right">
                <div class="col-6 col-md-9">
                    </strong>Sub Total</strong>
                </div>
                <div class="col-6 col-md-3">
                    {{checkout.totalCart | money_filter}}
                </div>
                {% if total_discount > 0 %}
               
                    <div class="col-6 col-md-9">
                          Descuentos totales
                    </div>
                    <div class="col-6 col-md-3">
                        {{total_discount | money_filter}}
                    </div>
              
                {% endif %}
                {% if checkout.shippingReceivable == 0%}
                    <div class="col-6 col-md-9">
                        Despacho
                    </div>
                    <div class="col-6 col-md-3">
                        {{checkout.shippingCost | money_filter}}
                    </div>
                {% endif %}
                <div class="col-6 col-md-9 h4">
                        Total
                </div>
                <div class="col-6 col-md-3 h4">
                        {{checkout.total | money_filter}}
                    </div>
            </div>
        </div>
    </div>
    <div class="text-right d-print-none my-3">
        <a href="{{url_home}}" class="btn btn-secondary">
            <i class="fas fa-store"></i> Volver a la tienda
        </a>
        <button class="btn btn-success" onclick="window.print(); return false;">
            <i class="fas fa-print"></i> Imprimir
        </button>
    </div>
</div>

Checkout Éxito - Bsale-IO/template-docs GitHub Wiki

Checkout:

Detalle de carro:

Medio pago Transferencia

Componentes

Mejoras de la versión 2

Checkout éxito

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️