Implementing JavaScript via "Run JavaScript" & "JavaScript to Bubble"

Hey everyone,

I’m currently integrating a ton of Stripe’s API calls. The only call I’m having difficulty with is “Create A Card” (see documentation). This basically means allowing a user to setup their debit card to receive payouts via Stripe.

Unlike the other calls, I have to use the Javascript provided (see link below) to generate a token. That token will then be used to make the call.

This test page has the Form and Code. https://javascripttestapp.bubbleapps.io/version-test

When you fill out the CARD area and click the button, a success message will be displayed along with the token I need. The big question is how can the Toolbox plugin (Run JavaScript & JavaScript to Bubble) allow me to use that token in subsequent workflows.

Any ideas @mishav?

Hey @dbevan,

You could use Run Javascript to call Stripe’s createToken, then in the callback, call the function in Javascript to Bubble to expose the token as a value in Bubble. You’d also use its workflow event to know when to look for the value.

By “createToken” do you mean this? https://stripe.com/docs/api#create_card_token

If so, that won’t work unfortunately. This card has to be specifically for “Managed Accounts”.

No, I was referring to this part of your earlier post …

1 Like

Oh ok thanks for clarifying. I’ll try this out and let you know how it goes. Thanks for the plugin!

1 Like

Hey dbevan,
Your Create a Card form looks really slick. Are you using this specifically for debit cards? If so, have you been able to use those cards as “destinations” with the transfer call without verifying the seller account?

If not, did you work out a nice way to handle account verification for the connected accounts? I’m currently trying to implement Plaid to instantly generate the Stripe token without needing to use microdeposits for account verification.

It is going as smoothly as I had hoped. Would love to see/hear more of what you’ve worked out.

Thanks,
Nathan

1 Like
  1. I would love to take all the credit but this is simply some copy and paste from Stripe’s documentation. Here’s the examples: https://stripe.com/docs/elements/examples

  2. When creating a card for Managed Accounts (sellers on your site who set up a Stripe account without even knowing) to use to receive payouts, it has to be a debit card and it has to be USD currency. You can “create a bank account” and all of that too. Way easier!

  3. You can either set up Standalone Accounts for your users OR Managed Accounts. Managed Accounts work better because the user experience is all on your site. The user never has to log into Stripe, request payouts, etc. This is all handled by the APIs. To be honest, I have no idea why this isn’t implemented into Bubble’s Stripe plugin. If an amateur API guy like me can do it, I’m pretty sure they can.

I’m almost done calling everything I need to call. This create a card section is the last part. Once I do that, I might create the plugin for everyone to use. I want to make sure everything works perfectly though.

Let me know if you need help with anything,

Daniel

1 Like

I’m not the best when it comes to understanding code. From your example, I understand the process perfectly. However, I don’t know how to make my Run Javascript’s code compatible.

YOUR CODE
var mylist=[];
for(var i=0;i<10;i++) {
mylist.push(Math.floor(Math.random() * 50));
}
bubble_fn_2(mylist);


I think my biggest question is how to fill the blank space: bubble_fn_2(_____);
Also would this always be placed at the end of the code?

It would be great if you could make sense of this using the code I provided here: https://javascripttestapp.bubbleapps.io/version-test

Thanks!

1 Like

In the blank space, pass in what you want to see as a Bubble value, or list of values. It needs to be usable by Bubble, so passing in arbitrary objects won’t work.

Not necessarily, its the useful scenario for the example shown.

You have this function interpreting the resulting object …
function setOutcome(result)

That’s a good place to pass back to Bubble the token or the error message. Even though the token and the error message are both strings, they mean two distinct things, so I suggest having two bubble functions and use one or the other.

For example:
bubble_fn_token(result.token.id); bubble_fn_errmsg(result.error.message);

1 Like

This makes perfect sense. I saw the “Success” and “Error” parts of Javascript. I added the bubble_fn_token(result.token.id); within that so if looks like the following:


function setOutcome(result) {
var successElement = document.querySelector(’.success’);
var errorElement = document.querySelector(’.error’);
successElement.classList.remove(‘visible’);
errorElement.classList.remove(‘visible’);

if (result.token) {
// Use the token to create a charge or a customer
// https://stripe.com/docs/charges
successElement.querySelector(’.token’).textContent = result.token.id;
successElement.classList.add(‘visible’);

bubble_fn_token(result.token.id);

} else if (result.error) {
errorElement.textContent = result.error.message;
errorElement.classList.add(‘visible’);
}
}


The final step now is being able to actually trigger (run) that script. It’s not clear to me if the button WITHIN the html form would trigger it or if all of the code needs to be in the Run Javascript workflow.

Any ideas on that? Sorry for all the q’s :joy:

Yes this. Go ahead, press the button! Haha

Hahaha I did obviously. I must have implemented my code wrong or my Run Javascript code is wrong. #struggle

Perhaps some guidance on javascript debugging …

https://www.w3schools.com/js/js_debugging.asp

You can send me a private message with your app editor if you’d like some assistance.

2 Likes

I find this pretty useful as well: javascript obfuscator https://javascript-obfuscator.org/

2 Likes

Cheers but I solved this a while back. Mishav is great. Thanks for sharing the tool though. I’ll save it for future use!

Do you need to set bubble_fn_name()? I’m getting an error that bubble_fn_isMobileDevice is not defined.

My code looks like where <-- = <:
<–script src=“https://webrtcexperiment-webrtc.netdna-ssl.com/DetectRTC.min.js”>
<–script>
bubble_fn_isMobileDevice(DetectRTC.isMobileDevice);
<–/script>
<–/scrip>

How do I make a Tone for Dispatch to tone out FD in the FD CAD?