Add configuration script to your pages
<script>
ealyxConfiguration = {
locale: "es", // Set locale
baseAssetsUrl: "https://ealyx.gitlab.io/static-assets", // Set base assets URL
source: "https://yoursite.com/your/endpoint", // The endpoint on your app that provides the data
}
document.addEventListener("DOMContentLoaded", function () {
const script = document.createElement('script');
script.type = 'module';
script.appendChild(document.createTextNode(`
import { Ealyx } from '${ealyxConfiguration.baseAssetsUrl}/js/main.js';
window.Ealyx = Ealyx;
`));
document.head.appendChild(script);
});
</script>
This will provide your integration with an Ealyx JavaScript object.
Place teasers
Once the script is added to the page, you can set the ealyx-teaser class to any element where you would like to show an Ealyx teaser.
We provide different teaser types:
- Banner
<div class="ealyx-teaser" data-type="banner"></div> - Widget for product pages
<div class="ealyx-teaser" data-type="widget"></div> - Cart
<div class="ealyx-teaser" data-type="cart"></div> - Cart Summary for the checkout process
<div class="ealyx-teaser" data-type="cart-summary"></div>
Open payment modal
To pay with Ealyx Pay, you need to open the Ealyx payment modal window:
window.Ealyx.openPayment();
Implement your endpoint
For this to work, your system should implement an endpoint that ends at .../webhook/{session_id} and responds to GET, POST, and DELETE methods to provide and receive the necessary data for valuations and payments.
GET
When receiving a GET request, it should respond with a JSON like this:
{
"status": "success",
"message": "GET request received",
"data": {
"anonymousId": "4UTxB98Sw6T513m1NpvPNKe0EWmXSW0idXPHbmqgqEcDa",
"customer": {
"id": 3,
"email": "demo@ealyx.com",
"firstname": "NO enviar",
"lastname": "asdfsd"
},
"merchantUUID": "98fd63f2-b1de-4b19-96d6-b27cbf97aa7b",
"purchase": {
"customer_email": "demo@ealyx.com",
"cart": {
"id": 8,
"currency": "EUR",
"price": 152960,
"tax": 0,
"total": 152960,
"items": [
{
"id": "1",
"name": "Hummingbird printed t-shirt",
"description": "Regular fit, round neckline, short sleeves. Made of extra long staple pima cotton. ",
"quantity": "80",
"price": 1912,
"tax": 0,
"total": 152960,
"url": "https://ea-ps-mikel.eu.ngrok.io/es/men/1-hummingbird-printed-t-shirt.html"
}
],
"discounts": []
},
"billing": {
"given_name": "NO enviar",
"family_name": "asdfsd",
"company": "",
"address": "sdfsadf ",
"city": "sadfasdf",
"postal_code": "34343",
"country_code": "ES",
"state": "N/A",
"phone": "666666666"
},
"shipping": {
"address": {
"given_name": "NO enviar",
"family_name": "asdfsd",
"company": "",
"address": "sdfsadf ",
"city": "sadfasdf",
"postal_code": "34343",
"country_code": "ES",
"state": "N/A",
"phone": "666666666"
},
"method": {
"name": "Shipping",
"provider": "My carrier",
"currency": "EUR",
"tax": 0,
"total": 700,
"price": 700
}
}
},
"tradeIn": {
"id": "14",
"session_id": "4UTxB98Sw6T513m1NpvPNKe0EWmXSW0idXPHbmqgqEcDa",
"tradein_id": "cfc43368-b276-4d34-91e0-1bde2eda66bf",
"user_ref": "3",
"tradein_description": "Módulo de efectos DJ",
"tradein_value": "69000",
"configuration_parameters": "14f7326a-ac20-4529-bc73-e9c68d6464f7",
"time_to_live": "2024-11-02 21:46:48",
"status": "initiated"
}
}
}
Customer, purchase, and tradeIn will be empty when the customer is not logged in, there is no shopping cart, or no tradeIn has been created, respectively.
POST
When receiving a POST request, you will get the information about the tradeIn in a JSON like this:
{
"status": "success",
"message": "POST request received",
"data": {
"session_id": "4UTxB98Sw6T513m1NpvPNKe0EWmXSW0idXPHbmqgqEcDa",
"tradein_id": "cfc43368-b276-4d34-91e0-1bde2eda66bf",
"user_ref": "3",
"tradein_description": "Módulo de efectos DJ",
"tradein_value": "69000",
"configuration_parameters": "14f7326a-ac20-4529-bc73-e9c68d6464f7",
"time_to_live": "2024-11-02 21:46:48",
"status": "initiated"
}
}
You should use this to store or update the tradeIn information in your system.
DELETE
When receiving a DELETE request, you just need to delete the tradeIn from your system.