​
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 !

​
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 !