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.

Loading aplazame.js

info

You must include aplazame.js on the pages where the widget should appear. Check all the integration options.

aplazame.js

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

require.js

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

  require(['aplazame'], function (aplazame) {
    aplazame.init({
      public_key: "api_public_key", // replace with merchant public_key
      sandbox: false
    });
  });

caution

The value of sandbox must be false for production environment

Parameter	Type	Required	Description
public-key	string	yes	Your public key.
sandbox	boolean	yes	Set if the requests will be in sandbox mode (true) or production (false).

Customize legal text

There is the option to customize the legal text displayed under the odds simulator. This will allow the financing values (purchase amount, ticket amount, installment amount, opening commission, APR, etc.) to be dynamic and show the real amounts for the purchase that the customer is making. To do this, just enter the following variables in braces within the value of the data-option-legal-text.

Variable	Description
order_amount	Shopping cart amount
total_amount	Total amount
principal_amount	Amount to finance
instalments_amount	Fee amount
num_instalments	Number of installments
downpayment_amount	Total down payment
tax	Opening commission
tae	TAE
tin	TIN

note

An example of legal text with variables would be the text that comes by default:

Example of financing with APLAZAME for a cart of {order_amount } over {num_instalments } months, with payments starting 20 days after the application. A down payment of {downpayment_amount } is required, which the user must pay by card at the time of the transaction. The amount to be financed is the difference between the cart value and the down payment: {principal_amount }.
A total of {num_instalments } monthly installments of {instalments_amount } are requested.
Opening fee: {tax }.

Customize CSS

tip

To further customise the widget, there is the option data-option-custom-styles.

Set the CSS Customisation documentation of the Widget to to learn more.

Variable price

caution

The variable price is only configurable in the product 'Instalment plans'.

In case you prefer to use a dynamic value of an element of the page instead of a pre-set value, it can be defined by a CSS selector indicated in the data-price property instead of data-amount.

<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.conjuntamente con data-amount, se mostrará el valor de este último y de data-price si el precio cambia.
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.