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://cdn.aplazame.com/aplazame.js"
        data-aplazame="api_public_key"
        data-sandbox="true"></script>

Pago a plazos

Integración básica

 

<div data-aplazame-widget-instalments
     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
Texto legal

<div data-aplazame-widget-instalments
     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"
     data-option-legal-advice="true"
     data-option-legal-text="Ejemplo de financiación con APLAZAME para una cesta de 1.000,00€ a 12 meses y que comienza a pagar a los 20 días desde la solicitud. Se solicita una entrada de 85,14 € que el usuario debe pagar a través de su tarjeta en el momento en que realiza la operación. El importe a financiar es la diferencia entre el valor de la cesta y la entrada: 914,86€. Se solicitan 12 mensualidades de 85,14€. Comisión de apertura: 0,00€. TIN: 22,11% TAE: 24,5%. Importe total adeudado: 1.021,70€. Sujeto a la aprobación por parte de APLAZAME, S.L.">
</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.
data-option-legal-advice boolean no Indica si debe mostrarse el texto legal justo después del widget. El valor por omisión es false.
data-option-legal-text texto no Esta opción permite personalizar el texto legal que aparece debajo del widget.

Existe la opción de personalizar el texto legal que se muestra bajo el simulador de cuotas. Eso te permitirá que los valores de la financiación (importe de la compra, importe de la entrada, importe de las cuotas, comisión de apertura, TAE, etc) sean dinámicos y muestren los importes reales para la compra que el cliente esté realizando. Para ello, sólo hay que introducir las siguientes variables entre llaves dentro del valor del atributo data-option-legal-text.

Variable Descripción
order_amount Importe de la cesta
total_amount Importe total adeudado
principal_amount Importe a financiar
instalments_amount Importe de la cuota
num_instalments Número de cuotas
downpayment_amount Entrada
tax Comisión de apertura
tae TAE
tin TIN

Pago en 15 días

  • 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 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!
Alineación del widget
Branding

<div data-aplazame-widget-paylater
     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-align="center">
</div>
Parámetro Tipo Requerido Descripción
data-type enum no Permite elegir el tipo de widget. Las opciones son:
text, button, link

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-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-widget-instalments
     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

Aquí puedes consultar como integrar el SDK

GET https://api.aplazame.com/instalment-plan-simulator?amount=20000&currency=EUR&country=ES&payday=12&view=product
Accept: application/vnd.aplazame.v1+json
Authorization: Bearer api_public_key
Parámetro Tipo Requerido Descripción
amount decimal si Cantidad a financiar.
currency ISO 4217 no Código de la moneda del pedido.
country ISO 3166-1 no Código de país.
payday entero no Día de pago seleccionado, hoy por defecto.
view enum no Estilo del 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

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
    ],
    "highlighted_num_instalments": [
      3, 6, 9, 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
    ]
  },
  "choices": [
    {
      "first_payment_date": "2019-07-12"
      "instalments": [
        {
          "annual_equivalent": 2450,
          "amount": 14973,
          "num_instalments": 1,
          "downpayment_amount": 5241,
          "total_interest": 214,
          "total_tax_amount": 0,
          "total_fees": 0
        },
        {
          "annual_equivalent": 2450,
          "amount": 6772,
          "num_instalments": 2,
          "downpayment_amount": 6772,
          "total_interest": 315,
          "total_tax_amount": 0,
          "total_fees": 0
        },
        ...
        ...
        ...
        {
          "annual_equivalent": 2450,
          "amount": 1707,
          "num_instalments": 12,
          "downpayment_amount": 1707,
          "total_interest": 2186,
          "total_tax_amount": 0,
          "total_fees": 0
        }
      ]
    }
  ]
}