Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.saalal.com/llms.txt

Use this file to discover all available pages before exploring further.

Card UI

Fonctionnement

Alal Card UI est une page web avec un style configurable qui permet d’afficher les données de carte. Le processus suivant décrit comment Alal Card UI fonctionne :
  1. Le backend de votre application soumet la référence de la carte ainsi l’url vers un fichier css et requiert la création de la page via Get Access Token Card API Reference
Lorsque vous souhaitez modifier le CSS de la carte, modifier juste le CSS sur votre backend et soumettez à nouveau l’url via Get Access Token Card API Reference
curl --location 'https://sandbox.saalal.com/api/v1/cards/auth/access_token' \
--header 'Accept: application/json' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer ....' \
--data '{
    "reference": "366583c6-ba0d-4339-ac44-ccddf53bed4d",
    "css_url": "https://youserver.com/card.css"
}'
  1. Ajouter l’url renvoyée dans la réponse embedded_ui à un iframe sur la page web de votre choix
index.html
<html>

<head></head>

<body>
    <iframe
        id="card-iframe"
        allow="clipboard-write"
        width=600 height=300
        src="https://sandbox.saalal.com/embedded-card-reveal/test_POw86MhB8lPJoenu1lUWudUHhKei34bWbGeVxRxbCpkqLWYluE">
    </iframe>
    <script>
        window.addEventListener("message",
            function (e) {
                console.log("event", e);
                if (e.origin !== 'https://sandbox.saalal.com') return;

                if (e.data.isCopied === true) {
                    alert(e.data.copyElt + " copied!");
                }
            },
            false);
    </script>
</body>

</html>

  1. Et voila !
Embedded UI