PricingDocsAcademy
Bluesky ...
Wed, Dec 11, 10:28 PM

Injecting API response into jS script

  • Lucvs

    1 month ago

    Hi there,

    I'm setting up a payment integration for our app, which requires API responses from a backend SDK we have hosted on AWS lambda.

    Upon a button click, I've tried to set the API responses as variables, and piece the variables together by concatenating the varibles with pieces of the script, and then injecting it into a script tag.

    For some reason this flow doesn't work, but when I just insert the scripts manually with the API responses they do work, thus I'm led to believe I'm doing something wrong in terms of injecting the API response into my jS function.

    Any ideas?
    βœ…1
  • Lucas G

    1 month ago

    LIkely because the script is running on load and the variables aren't set yet
  • So it is incomplete
  • Lucvs

    1 month ago

    Was just about to delete post, figured already
  • Lucas G

    1 month ago

    Use custom actions instead so you have control over when to fire them
  • Nice, what was your fix?
  • Lucvs

    1 month ago

    Yes, that's what I did
    πŸ‘1
  • Get API responses as variables, pass to custom action as arguments
  • Lucas G

    1 month ago

    Glad you got it working
  • Lucvs

    1 month ago

    Appreciate the help though πŸ™‚
    πŸ‘1
  • Lucvs

    1 month ago

    @Lucas G can I dm regarding an issue I'm having with events in custom actions? Been trying to fix it last 2 hrs, but can't figure for some reason.
  • Lucas G

    1 month ago

    Sure though posting it here could help other users so it's preferable
  • /attachments/1296990210990674043/1297230915780477130/Screenshot_2567-10-19_at_18.11.12.png

    Lucvs

    1 month ago

  • Tod

    1 month ago

    Great energy @Lucvs! Your continuous contribution to the toddle Community just made you advance to Community Level 1!
  • Lucvs

    1 month ago

    So basically, want to to trigger a flow every time a form is submitted in our payment iframe
  • It's logging everything in the console, but for some reason it's not triggering the test alert I have set up.
  • Do you have an idea where I may be going wrong?
  • Lucas G

    1 month ago

    Is your page refreshing when the form submits
  • Lucvs

    1 month ago

    The page itself isn't
  • Lucvs

    1 month ago

    Everything happens in iframe. As mentioned the console is logging correctly as well
  • Lucas G

    1 month ago

    Is this code provided by solidgate?
  • Lucas G

    1 month ago

    I'd prefer to try to do a few things in a native way but if you've gone this far, you might as well handle the form event in the code as well
  • Tod

    1 month ago

    Great energy @Lucas G! Your continuous contribution to the toddle Community just made you advance to Community Level 32!
  • Lucas G

    1 month ago

    You also likely need to add Prevent default to the form
  • Lucvs

    1 month ago

    No, coded it myself.
  • Lucvs

    1 month ago

    The first version was much simpler, but I tried many different approaches to get the events working, to no avail unfortunately
  • Lucas G

    1 month ago

    I use Stripe and I have to initiate Stripe.js in a similar way, though I don't append the script to head. In my case, I handle the event submission in the code
  • Lucas G

    1 month ago

    For example
    async function initStripe() {
    ..getElemnt...
    mount()
    formSubmitEvent => { send to stripe else show error }
    }
  • Are you seeing the form initialize successfully?
  • Lucvs

    1 month ago

    My issue is that I need to use the response for conditional logic in Toddle, since Toddle can't receive webhooks from Solidgate.
  • Yep, form is initializing and functional, just the events I can seem to figure out for some reason.
  • Lucas G

    1 month ago

    Is the form submitter properly listening for the event?
  • Lucvs

    1 month ago

    Could be where I went wrong
  • Lucas G

    1 month ago

    You could probably just add the triggerActionEvent directly to the code in the code where you initialize the form
  • I don't see an event listener or anything
  • Lucvs

    1 month ago

    That's what I did, I thought a listener wouldn't be necessary actually
  • So, I'd need an event listener, to be able to trigger the events in the toddle editor?
  • Tod

    1 month ago

    Great energy @Lucvs! Your continuous contribution to the toddle Community just made you advance to Community Level 2!
  • Lucas G

    1 month ago

    It might be a scoping thing. Currently I don't see how the form event would actually be happening
  • Lucvs

    1 month ago

    I made a global function with ctx.triggerActionEvent and then under the different form submits I called on that function
  • Lucas G

    1 month ago

    So you got it working now?
  • Lucvs

    1 month ago

    Nope, just tried editing the code quickly with your remarks
  • /attachments/1296990210990674043/1297242604668325948/Screenshot_2567-10-19_at_18.57.27.png

    Lucvs

    1 month ago

    So it seems like the communication between iframe and parent window is working correctly.
  • But for some reason ctx.triggerActionEvent is not triggering?
  • Lucas G

    1 month ago

    Where are you using the alert variable?
  • Does it show if you use the built in console log action
  • Lucvs

    1 month ago

    Just injecting it into a script tag in toddle editor, to see that it works.
  • Lucas G

    1 month ago

    Ah does the script tag run accordingly
  • Can you use the console log action or set a simple span with the variable to check it instead
  • Lucvs

    1 month ago

    sure thing
  • Lucas G

    1 month ago

    Your form event might be triggering correctly but it’s just not reflected on the page
  • Lucvs

    1 month ago

    It's triggering!
    πŸ”₯1
  • Lucas G

    1 month ago

    Great
  • Lucvs

    1 month ago

    I guess the primary take-away is to remember listener, and not to use jS alert for testing
  • Maybe some of the 14 versions i wrote before, actually worked lol.
  • Lucas G

    1 month ago

    Try to use as many of the native features as possible
  • Yes, likely actually
  • Lucvs

    1 month ago

    I assume this must be because alert only triggers on page load?
  • Lucas G

    1 month ago

    Script tags in particular I find is best to use the least amount possible
  • Lucvs

    1 month ago

    Yeah makes sense I guess
  • Lucas G

    1 month ago

    It’s annoying to properly trigger them
  • Lucvs

    1 month ago

    In case that a script is crucial, I guess it would have to be through custom actions right?
  • More or less how I solved my first problem earlier today
  • Lucas G

    1 month ago

    Yeah I personally recommend custom actions/functions whenever needed
  • If native actions can’t do it
  • You get a lot more control when using them
  • Lucas G

    1 month ago

    In this case, you may actually be cool to go back to no event listener so you don’t have to bother with removing it, etc
  • Lucas G

    1 month ago

    Your original handler was probably a better way to do it
  • Lucas G

    1 month ago

    And the prevent default is likely not required either since the one you’re loading most likely handles it properly
  • Lucas G

    1 month ago

    Test to make sure that adding it doesn’t accidentally break the form πŸ˜… I was thinking there was a form built in toddle originally
  • Lucvs

    1 month ago

    Will do, thanks a lot for the help!
    πŸ‘1

Stop scrolling. Start building.

toddle is a visual web app builder that rivals custom code β€” but accessible to your entire team!

Try toddle β€” it's free!

Β© Copyright 2024 toddle. All rights reserved.