#lachiu_error

1 messages · Page 1 of 1 (latest)

soft tigerBOT
#

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1483499617126715442

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

green swallow
#

Not sure if it's wise to share the steps to reproduce here 🤔

wicked tendon
#

Hi there,
I am not sure I fully understand the issue. What exactly is going wrong like what happens and what would you expect to happen instead?

green swallow
#

Well we're not entirely sure if it's a token that can be publicly shared in the first place.

# 
{
    "namespace": "@sail/ui",
    "message": "sdk-rpc-syn",
    "data": {
        "clientId": "xxx"
    }
}
#

This object is exposed from the Stripe SDK

wicked tendon
#

Ok, and how do you initialize and use Sail UI?

green swallow
#

We are not using Sail UI

#

This is a simple HTML document with the bare minimum to setup postMessages and the SDK to initialize the component

#

There's no CSS from our end added even

wicked tendon
#

would you mind sharing your code so I can double check where this is coming from?

green swallow
#

Are you sure that's a good idea? It's a public forum in the end 😛

wicked tendon
#

Generally yes, but if you feel worried, we can also transfer this chat to a support ticket and we can communicate via email?

green swallow
#

Up to you, it seems to be a token from the Sail UI library that you guys use for the components. I've no interest in this.

wicked tendon
#

It's ok with me

green swallow
# 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='https://connect-js.stripe.com/v1.0/connect.js' async></script>
</head>
<body>
  <h1>Payments</h1>
  <div id="container"></div>
  <div id="error" hidden>Something went wrong!</div>
  <button id="test">test</button>
  <script>
    window.addEventListener('load', async () => {
        if (ans.success) {
            StripeConnect.onLoad = () => {
                const stripeConnectInstance = StripeConnect.init({
                    publishableKey: "pk_",
                    fetchClientSecret: () => { return ''; } // Secret here
                });
                const paymentComponent = stripeConnectInstance.create("payments");
                const container = document.getElementById("container");
                container.appendChild(paymentComponent);
            }
        }

        setTimeout(() => {
            triggerToast('Payment successful!', 'success');
        }, 2000);

        document.getElementById('test').onclick = () => {
            triggerToast('Payment successful!', 'success');
        };
    });

    function triggerToast(msg, type = 'success') {
        window.parent.postMessage({
            type: 'SHOW_TOAST',
            message: msg,
            status: type
        }, '*');
    }

    let activeToken = null;

    window.addEventListener('message', (event) => {
        const data = event.data;
        
        if (data.type === 'SET_TOKEN') {
            activeToken = data.token;
            console.log("Token received and ready for use!", activeToken);
            
            initializeProviderLogic(activeToken);
        }
    });

    function initializeProviderLogic(token) {}
  </script>
</body>
</html>
#

On the other page where you show the above page as an iframe you add:

window.addEventListener('message', (event) => {
    console.log("Received message from iframe:", event.data);
});
green swallow
wicked tendon
#

Ok, looking into this...

#

Ok, got it. The Sail/UI message stems from the Embedded Components. They are using Sail/UI internally.

green swallow
#

Exactly

wicked tendon
#

You can just ignore the message