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!
<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"
data-option-default-instalments="6">
</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-downpayment-info | boolean | no | Indica si debe mostrarse o no el importe del pago inicial en la parte superior 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. |
data-option-url-more-info | texto | no | Esta opción permite personalizar la página destino del botón ‘¿Quieres saber más?’ |
data-option-url-more-info-hide-mobile | boolean | no | Esta opción permite ocultar el botón ‘¿Quieres saber más?’. Únicamente en versión mobile. |
data-option-default-instalments | decimal | no | Permite configurar el número de cuotas seleccionadas que mostrará el widget por defecto |
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.
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!
<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¤cy=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
}
]
}
]
}