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>

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!

<div data-aplazame-widget-instalments
     data-amount="2900"
     data-currency="EUR"
     data-country="ES"
     data-type="button"
     data-option-text-color="#333A3E"
     data-option-btn-text-color="#FFFFFF"
     data-option-btn-bg-color="#267BBD"
     data-option-branding="true"
     data-option-downpayment-info="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="${ simulator_legal_text }"
     data-option-url-more-info="https://www.aplazame.com"
     data-option-url-more-info-hide-mobile="true">
</div>

Personalizar el texto legal

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.

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!

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

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>

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

(window.aplazame = window.aplazame || []).push(function (aplazame) {
  // Retorna una promesa
  aplazame.simulator({amount: 20000, currency: 'EUR', country: 'ES', payday: 12, view: 'product'})
    .then(function success (result) {
      var choices = result.choices;
      var options = result.options;
    }), function error (response) {});
})

requirejs.config({
    // baseUrl: 'scripts',
    paths: {
      aplazame: 'https://cdn.aplazame.com/aplazame.js'
    }
});

require(['aplazame'], function (aplazame) {
  aplazame.init({
    sandbox: true,
    // reemplazar con la clave pública de la tienda
    publicKey: "api_public_key"
  });

  // Retorna una promesa
  aplazame.simulator({amount: 20000, currency: 'EUR', country: 'ES', payday: 12, view: 'product'})
    .then(function success (result) {
      var choices = result.choices;
      var options = result.options;
    }, function error (response) {});
});

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
        }
      ]
    }
  ]
}