Braintree for Flutter Web

[nyilkhan]

I am trying to integrate Braintree with my Flutter web application, I saw that this plugin is currently only available for iOS and Android. Are there any good solutions for implementing for flutter web, especially Braintree's client side Drop in UI.

[pikaju]

I have not come up with a good solution to this problem yet. It might be possible to use Flutter's native platform views to embed some HTML and JavaScript into a Flutter widget.

[Pragya007]

@Pikaju How to show the saved cards in vault, how to get client token?

[dan1229]

Are there plans to add support for Flutter Web?

[pikaju]

I currently don't have plans to implement it myself, but pull requests are always welcome.

[SeriousMonk]

I don't have enough experience to implement this, but this looks like it could be the solution for web implementation: https://www.youtube.com/watch?v=yYxIWEQgOe4

[dan1229]

@FRANIAZA if you'd like I can share some code - I got a hacky solution eventually going that uses the dropin Javascript API to get the nonce, return the promise and convert it to a future

it's not perfect but it works on web, never cleaned it up enough to add it to the package as i couldn't figure out how to do the multiplat code

[SeriousMonk]

@FRANIAZA if you'd like I can share some code - I got a hacky solution eventually going that uses the dropin Javascript API to get the nonce, return the promise and convert it to a future

it's not perfect but it works on web, never cleaned it up enough to add it to the package as i couldn't figure out how to do the multiplat code

Yes please, any help is greatly appreciated;

[dan1229]

@FRANIAZA you got it - please email me i cant find your contact info

[SeriousMonk]

@dan1229 I sent you an email

[quseappdeveloper]

Is there any update on this. Anyone implemented successfully and running in production?

@dan1229 Can you share the code please.

[dan1229]

@quseappdeveloper I actually wrote a blog post about this if you wanna check it out https://blog.danielnazarian.com/blog/posts/faf92b76-094d-47af-b8d5-3bccfbb4a642/

I used it in production for a few months and didn't have any major issues - it does well and with some effort could be pretty seemless but there's definitely a bit to be desired

[NkITaa]

@dan1229 the link to your block post doesn't work any more. Im currently also in the process of integrating it. I would love to see your approach, I just started taking a look at GraphQl to achieve this integration. Im guessing that u simply use the js library for flutter and through that it should be pretty straight forward to integrate Braintree with the help of their documentation.

I don't know if it still is a topic that interests you, but if you want we can connect and talk about it, also I would love to see your solution

[dan1229]

Ohp that makes sense the urls got updated a bit ago - https://blog.danielnazarian.com/blog/posts/faf92b76-094d-47af-b8d5-3bccfbb4a642/

The main thing is the repo which is on my profile - that said happy to still talk about this! I’m not sure my approach is flawless or even the right one but it definitely did the job while I needed it. Main thing that kept me from making a PR here was I didn’t really understand separating out the different platforms for the package.

Feel free to reach out though happy to help in any way I can

[NkITaa]

Hi @dan1229 its me again. I was wondering whether u tried your approach again? I abandoned my idea of using GraphQl & looked into ur solution today. Its pretty weird because it seems that ur example repository doesnt work. Im stuck in an endless loading screen; was that a thing that you encountered?

P.S A weird thing is that there are no errors -> maybe a problem lies in the required.js but I cant really figure it out

[dan1229]

Hey there! Sorry to say I haven't tried my approach in quite a minute at this point - since a bit before the blog post admittedly. I can take a look at the repo sometime soon and see if there's anything obvious I can fix but I no longer have that Braintree account i.e., no keys so it's a bit tricky.

required.js definitely was the source of a good bit of headache for me - I remember there being ways to work around that as well though if that's causing issues.

Admittedly could be a Flutter issue as well - Flutter has changed A LOT since I've written the post and definitely since I made this solution so could be some weirdness around the Promise conversion or something as well purely as a guess.

I'll take a look though!

[NkITaa]

@dan1229 I will take a Look at it as well, maybe we can fix it

I think that u don't even need a Braintree account to reproduce the problem, like u I'm guessing that it has something todo with required.js

[NkITaa]

@dan1229 I already found a little mistake u made; it isnt huge but u call ur function in line 60 in ur main.dart wrongly, you just wrote showDialogBraintree(), u call it correctly with () => showDialogBraintree() or () { showDialogBraintree() }

Im sure this was by accident ;)

[dan1229]

@NkITaa wow great catch thank you! I wrote this long after I did the original solution so def a good chance of some mistakes. Updated the repo thank you again :)

[claudius-kienle]

I also developed a solution that is based on the code of @dan1229 . My code doesn't a Dialog to show the braintree flow but a standard widget. It is also more error-resistant (afaik) and enables PayPal usage. The code is published as gist: https://gist.github.com/claudius-kienle/5d38cce6e973ff359b843e1182191929 Feel free to ask if anything is unclear:)