Checkout process
Test environment
- Test mode
- Test data
API Requests
Checkout creation
SDK Javascript
SDK iOS
SDK Android
Order confirmation
Capture of the order
Widget Integration
Order API
Campaigns API
POS Integration

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.

The value of sandbox must be false for production environment

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

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

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

});

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

Instalments payment

Basic integration

If you use the basic configuration, you will be able to customize it from the control panel, in the customisation view of the widget in the tab corresponding to the data-view value.

<div data-aplazame-widget-instalments
     data-amount="5900"
     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!

Text Button Select Big button

External text color

Button text color

Button background color

Smart title

Yes No

Widget alignment

Branding

Yes No

Legal text

Yes No

Down payment

Yes No

In addition to the mandatory parameters of the basic integration, the advanced configuration will be automatically used when including a data-option-*.

The default values in this case are those shown in this documentation.

Note that when you change the values in the form it will be updated in the sample code.

<div data-aplazame-widget-instalments
     data-amount="5900"
     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"
     data-option-default-instalments="6"
     data-option-out-of-limits="hide"
     data-option-customer-id="12345678A">
</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.
data-option-default-instalments	decimal	no	Allows you to configure the number of instalments that the widget will display by default
data-option-out-of-limits	text	no	Allows you to show an alternative widget if the cart total does not meet the requirements to display the widget. If we want the alternative widget to appear, the value must be 'show', the value by default is: 'hide'.
data-option-customer-id	text	no	Customer document id. If the customer meets the requirements, the widget will show that the credit is pre-approved.

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

Un ejemplo de texto legal con variables sería el texto que viene por defecto:

Ejemplo de financiación con APLAZAME para una cesta de {{ order_amount }} a {{ num_instalments }} meses y que comienza a pagar a los 20 días desde la solicitud. Se solicita una entrada de {{ downpayment_amount }} 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: {{ principal_amount }}. Se solicitan {{ num_instalments }} mensualidades de {{ instalments_amount }}. Comisión de apertura: {{ tax }}. TIN: {{ tin }} TAE: {{ tae }}. Importe total adeudado: {{ total_amount }}. Sujeto a la aprobación por parte de APLAZAME, S.L.

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!

Button Text Extended Text

External text color

Button text color

Button background color

Widget alignment

Branding

Yes No

<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

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

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

Variable price

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

Pay in 4

In case the merchant supports the product 'Pay in 4', you can add the parameter data-pay-in-4 =' true' to the installment payment widget . This will cause a change in the design of the widget, which will show the necessary information only for 'Pay in 4'.

If the widget has the attribute data-pay-in-4 but the merchant does not support the product' Pay in 4' or the amount to finance (data-amount) is too high, the widget it will behave exactly like the installment payment widget, as long as the merchant supports the 'Installment payment' product, inheriting all its attributes.

<div data-aplazame-widget-instalments
     data-amount="5900"
     data-currency="EUR"
     data-country="ES"
     data-view="product"
     data-pay-in-4></div>

Parameter	Type	Required	Description
data-pay-in	boolean	yes	The attribute should be true or empty to work properly. This field causes a complete change in the rendering of the wdiget in case the merchant supports the product 'Pay in 4'. In case it does not support it or the total of the checkout does not meet the requirements for the product, it will behave exactly the same as the 'Payment in installments' widget

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

(window.aplazame = window.aplazame || []).push(function (aplazame) {
  // Returns a promise
  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,
    // replace with store public key
    publicKey: "api_public_key"
  });

  // Returns a promise
  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) {});
});

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

Tiendas por categoría

Aumenta tus ventas

Elige tu sector:

Recursos para comercios

Productos

Dónde utilizar Aplazame

Widget Integration

Instalments payment

Basic integration

Advanced integration

Customise legal text

Pay in 15 days

Customise CSS

Variable price

Pay in 4

Credit simulation