Integración del widget

El widget de Aplazame te permite mostrar una simulación de las cuotas de una financiación junto al precio de tus productos. Puedes elegir entre una integración básica que controlas desde tu panel de control de Aplazame y una integración avanzada si deseas tener la máxima flexibilidad.

<script src="https://aplazame.com/static/aplazame.js"
        data-aplazame="api_public_key"
        data-sandbox="true"></script>

Integración básica

 

<div data-aplazame-simulator
     data-amount="2900"
     data-currency="EUR"
     data-country="ES"
     data-view="product"></div>
Parámetro Tipo Requerido Descripción
data-amount decimal si Cantidad a financiar en céntimos. Este campo se puede omitir si se usa data-price
data-currency ISO 4217 si Moneda en la que se venderá el artículo.
data-country ISO 3166-1 si País donde aplicará la venta.
data-view enum no Vista dónde se incluye el widget, corresponde con la pestaña de personalización del panel de control.
Los posibles valores son: product, cart

Por omisión se usará: product

Integración avanzada

  • Selecciona a continuación qué tipo de widget quieres incluir.
  • Configura los distintos parámetros de acuerdo a tus necesidades. Aplica los colores que desees, elige la alineación y decide si quieres que tu widget use la funcionalidad de título inteligente y el branding de Aplazame o no.
  • El código de ejemplo de tu widget se irá actualizando en función de los valores que definas. Una vez tengas el diseño que buscabas, sólo tienes que copiar el código para llevártelo a tu tienda online y ¡listo!
Título inteligente
Alineación del widget
Branding

<div data-aplazame-simulator
     data-amount="2900"
     data-currency="EUR"
     data-country="ES"
     data-type="button"
     data-option-text-color="#ff0000"
     data-option-btn-text-color="#00ff00"
     data-option-btn-bg-color="#0000ff"
     data-option-branding="true"
     data-option-title-smart="true"
     data-option-title-default="Págalo a plazos"
     data-option-title-zero-interest="Consíguelo sin intereses"
     data-option-disable-modal="false">
</div>
Parámetro Tipo Requerido Descripción
data-type enum no Permite elegir el tipo de widget. Las opciones son:
text, button, select, big-button

Por omisión se usará el que se haya definido en el panel de control
data-option-text-color color css no Establece el color del texto que queda fuera del botón.
data-option-btn-text-color color css no Establece el color del texto del botón.
data-option-btn-bg-color color css no Establece el color del fondo del botón.
data-option-branding boolean no Indica si debe mostrarse o no el logotipo de Aplazame en la parte inferior del widget
data-option-title-smart boolean no Indica si debe mostrarse o no el texto en la parte superior del widget. Este texto cambiará en función de si hay alguna campaña sin intereses activa.

Texto normal: Págalo a plazos
Texto sin intereses: ¡Consíguelo sin intereses!
data-option-title-default texto no Esta opción permite personalizar el texto que aparece encima del widget cuando no hay campañas sin intereses activa.
data-option-title-zero-interest texto no Esta opción permite personalizar el texto que aparece encima del widget cuando hay campañas sin intereses activa.
data-option-custom-styles boolean no Indica si los estilos se heredan de la tienda true o se usan los de Aplazame false.
data-option-disable-modal boolean no Indica si debe dejar de mostrarse la modal de información para los tipos text y button. El valor por omisión es false.

Personalizar CSS

Precio variable

<div data-aplazame-simulator
     data-currency="EUR"
     data-country="ES"
     data-price="form#article .regular-price .price"
     data-qty="form#article input[name='qty']"></div>
Parámetro Tipo Requerido Descripción
data-currency ISO 4217 si Moneda en la que se venderá el artículo.
data-country ISO 3166-1 si País donde aplicará la venta.
data-price selector css si Selector CSS que indique el elemento que contiene el precio final. Se actualiza en vivo si hay cambios en el precio. Si se usa conjuntamente con data-amount, se mostrará el valor de este último y de data-price si el precio cambia.
data-qty selector css no Selector CSS que indique el elemento que contiene el número de artículos. Si está definido, la cantidad a financiar se calculará multiplicando price*qty."

Simulación de crédito

GET https://api.aplazame.com/instalment-plan-simulator?amount=20000&currency=EUR&payday=12
Accept: application/vnd.aplazame.v1+json
Authorization: Bearer publicKey

Respuesta

HTTP/1.1 200 OK
X-Aplazame-Media-Type: aplazame.v1
Content-Type: application/json

{
  "options": {
    "num_instalments": [
      1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
    ],
    "calendar": [
      1, 2, 3, 4, 5, 6, 7, 8, 9,
      10, 11, 12, 13, 14, 15, 16, 17, 18, 19,
      20, 21, 22, 23, 24, 25, 26, 27, 28
    ],
    "downpayment_amount": 0,
    "max_credit_amount": 150000,
    "has_instalment_downpayment": true,
    "first_payment_date": "2015-08-12"
  },
  "choices": [
    {
      "annual_equivalent": 2500,
      "amount": 17325,
      "num_instalments": 1,
      "downpayment_amount": 3000,
      "total_interest": 325,
      "total_fees": 0,
      "discounts": 0
    }
  ]
}