Widget Integration

The Aplazame widget allows you to show a simulation of the financing instalments next to the price of your products. You can choose between basic integration that you control from your Aplazame control panel and advanced integration if you want maximum flexibility.

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

Instalments payment

Basic integration

 

<div data-aplazame-widget-instalments
     data-amount="2900"
     data-currency="EUR"
     data-country="ES"
     data-view="product"></div>
Parameter Type Required Description
data-amount decimal yes Quantity to be financed in cents. This field can be omitted if the data-price is used
data-currency ISO 4217 yes Currency in which the item will be sold.
data-country ISO 3166-1 yes Country where the sale will apply.
data-view enum no The view where the widget is included corresponds to the customisation tab of the control panel.
The possible values are: product, cart

By default, the following will be used: product

Advanced integration

  • Select below the type of widget you want to include.
  • Configure the different parameters according to your requirements. Apply the colours you want, choose the alignment and decide whether you want your widget to use the smart title functionality and the Aplazame branding or not.
  • The example code of your widget will be updated according to the values you define. Once you have the design you are looking for, you just have to copy the code to take it to your online store, and that's it!
<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>
Parameter Type Required Description
data-type enum no Allows you to choose the type of widget. The options are:
text, button, select, big-button

By default, the one defined in the control panel will be used.
data-option-text-color css color no Set the colour of the text that is outside the button.
data-option-btn-text-color css color no Set the colour of the text of the button.
data-option-btn-bg-color css color no Set the colour of the background of the button.
data-option-branding boolean no Indicates whether or not to display the Aplazame logo on the bottom of the widget
data-option-downpayment-info boolean no Indicates whether or not the down payment should be shown at the top of the widget
data-option-title-smart boolean no Indicates whether or not the text should be shown at the top of the widget. This text will change depending on whether there is a campaign with no active interests.

Normal text: Pay it in instalments
Text interest free: Get it interest free!
data-option-title-default text no This option allows you to customize the text that appears above the widget when there are no active interest-free campaigns.
data-option-title-zero-interest text no This option allows you to customize the text that appears above the widget when there are active interest-free campaigns.
data-option-custom-styles boolean no Indicates whether the styles are inherited from the true store or whether the Aplazame false styles are used.
data-option-disable-modal boolean no Indicates whether you should stop displaying the information for the 'text' and 'button’ modal types. The default value is false.
data-option-legal-advice boolean no Indicates whether you should displaying the legal text after the widget. The default value is false.
data-option-legal-text text no This option allows you to customize the legal text that appears after the widget.
data-option-url-more-info text no This option allows you to customize the landing page of the button ‘¿Quieres saber más?’
data-option-url-more-info-hide-mobile boolean no This option allows you to hide the ‘¿Quieres saber más?’ button. Only in mobile version.

Customise legal text

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.

docs.api.table.variable Description
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

Pay in 15 days

  • Select below the type of widget you want to include.
  • Configure the different parameters according to your requirements. Apply the colours you want, choose the alignment and decide whether you want your widget to use the smart title functionality and the Aplazame branding or not.
  • The example code of your widget will be updated according to the values you define. Once you have the design you are looking for, you just have to copy the code to take it to your online store, and that's it!
<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>
Parameter Type Required Description
data-type enum no Allows you to choose the type of widget. The options are:
text, button, link

By default, the one defined in the control panel will be used.
data-option-text-color css color no Set the colour of the text that is outside the button.
data-option-btn-text-color css color no Set the colour of the text of the button.
data-option-btn-bg-color css color no Set the colour of the background of the button.
data-option-branding boolean no Indicates whether or not to display the Aplazame logo on the bottom of the widget
data-option-custom-styles boolean no Indicates whether the styles are inherited from the true store or whether the Aplazame false styles are used.
data-option-disable-modal boolean no Indicates whether you should stop displaying the information for the 'text' and 'button’ modal types. The default value is false.

Customise CSS

Variable price

<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>
Parameter Type Required Description
data-currency ISO 4217 yes Currency in which the item will be sold.
data-country ISO 3166-1 yes Country where the sale will apply.
data-price css selector yes CSS selector that indicates the element that contains the final price. It is updated live if there are changes in the price. If used in conjunction with data-amount, the value of the latter and data-price will be shown if the price changes.
data-qty css selector no CSS selector that indicates the element that contains the number of articles. If it is defined, the quantity to be financed will be calculated by multiplying price*qty.

Credit simulation

Here you can see how to integrate the 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
Parameter Type Required Description
amount decimal yes Quantity to be financed.
currency ISO 4217 no The currency code of the order.
country ISO 3166-1 no Country code.
payday integer no Payday selected, today/day by default.
view enum no Widget style, corresponds to the customisation tab of the control panel.
The possible values are: product, cart

By default, the following will be used: product

Response

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