Injecting API response into jS script

  • lucvs6078-1296990210990674043

    Lucvs

    4 months 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
  • lucasg-1297191559996903486

    Lucas G

    4 months ago

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

    Lucvs

    4 months ago

    Was just about to delete post, figured already
  • lucasg-1297191664854761584

    Lucas G

    4 months ago

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

    Lucvs

    4 months ago

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

    Lucas G

    4 months ago

    Glad you got it working
  • lucvs6078-1297192051707871343

    Lucvs

    4 months ago

    Appreciate the help though πŸ™‚
    πŸ‘1
  • lucvs6078-1297227530281029712

    Lucvs

    4 months 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.
  • lucasg-1297230221195346011

    Lucas G

    4 months ago

    Sure though posting it here could help other users so it's preferable
  • lucvs6078-1297230916858417265

    Lucvs

    4 months ago

    1297230915780477130-
    1297230916241985616-
    1297230916623532062-
  • Tod-1297230919354028174

    Tod

    4 months ago

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

    Lucvs

    4 months 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?
  • lucasg-1297233572700098621

    Lucas G

    4 months ago

    Is your page refreshing when the form submits
  • lucvs6078-1297233727210131456

    Lucvs

    4 months ago

    The page itself isn't
  • lucvs6078-1297234653736075315

    Lucvs

    4 months ago

    Everything happens in iframe. As mentioned the console is logging correctly as well
  • lucasg-1297235739129675808

    Lucas G

    4 months ago

    Is this code provided by solidgate?
  • lucasg-1297236004700422195

    Lucas G

    4 months 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-1297236006029754459

    Tod

    4 months ago

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

    Lucas G

    4 months ago

    You also likely need to add Prevent default to the form
  • lucvs6078-1297236591537815568

    Lucvs

    4 months ago

    No, coded it myself.
  • lucvs6078-1297237001497743452

    Lucvs

    4 months ago

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

    Lucas G

    4 months 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
  • lucasg-1297237650381471815

    Lucas G

    4 months ago

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

    Lucvs

    4 months 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.
  • lucasg-1297238632238940190

    Lucas G

    4 months ago

    Is the form submitter properly listening for the event?
  • lucvs6078-1297238893703467121

    Lucvs

    4 months ago

    Could be where I went wrong
  • lucasg-1297238899180965928

    Lucas G

    4 months 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
  • lucvs6078-1297238981947166781

    Lucvs

    4 months 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-1297239175287935026

    Tod

    4 months ago

    Great energy @Lucvs! Your continuous contribution to the toddle Community just made you advance to Community Level 2!
  • lucasg-1297239272373620869

    Lucas G

    4 months ago

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

    Lucvs

    4 months ago

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

    Lucas G

    4 months ago

    So you got it working now?
  • lucvs6078-1297242141785063455

    Lucvs

    4 months ago

    Nope, just tried editing the code quickly with your remarks
  • lucvs6078-1297242605708644455

    Lucvs

    4 months ago

    So it seems like the communication between iframe and parent window is working correctly.
    1297242604668325948-
    1297242605414776923-
  • But for some reason ctx.triggerActionEvent is not triggering?
  • lucasg-1297243842990571621

    Lucas G

    4 months ago

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

    Lucvs

    4 months ago

    Just injecting it into a script tag in toddle editor, to see that it works.
  • lucasg-1297244177523806299

    Lucas G

    4 months 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
  • lucvs6078-1297244317634793543

    Lucvs

    4 months ago

    sure thing
  • lucasg-1297244533536591933

    Lucas G

    4 months ago

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

    Lucvs

    4 months ago

    It's triggering!
    πŸ”₯1
  • lucasg-1297244857823264818

    Lucas G

    4 months ago

    Great
  • lucvs6078-1297244899606790234

    Lucvs

    4 months 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.
  • lucasg-1297244985434964079

    Lucas G

    4 months ago

    Try to use as many of the native features as possible
  • Yes, likely actually
  • lucvs6078-1297245137201532989

    Lucvs

    4 months ago

    I assume this must be because alert only triggers on page load?
  • lucasg-1297245148924612732

    Lucas G

    4 months ago

    Script tags in particular I find is best to use the least amount possible
  • lucvs6078-1297245231393013922

    Lucvs

    4 months ago

    Yeah makes sense I guess
  • lucasg-1297245290704666677

    Lucas G

    4 months ago

    It’s annoying to properly trigger them
  • lucvs6078-1297245404122972221

    Lucvs

    4 months 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
  • lucasg-1297245497601556631

    Lucas G

    4 months 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
  • lucasg-1297245994467201125

    Lucas G

    4 months 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
  • lucasg-1297246264206950430

    Lucas G

    4 months ago

    Your original handler was probably a better way to do it
  • lucasg-1297246625101516982

    Lucas G

    4 months ago

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

    Lucas G

    4 months 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
  • lucvs6078-1297249981110943745

    Lucvs

    4 months 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.