Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Vaadin Javascript Component

Dylan BRADFORD
5 years ago Jul 13, 2016 12:39pm

Hi everyone,

I tried to integration Stripe (Payment Checkout solution) into my application in vain, the problem is that most Checkout solution as Form based with input fields and integrate fine with vaadin such as PayPal (I use a FormSender or CustomLayout even though I could not find for the latter to add input field dynamically in the form html even with the "location").

Anyway my point is below the form with Javascript from Stripe, this looks dangerous to me to execute the JS with the form where some code is added dynamically to the DOM (Button "Pay with Card" and token for the payment), and I understood Vaadin is pretty safe removing potential dangerous JS from my component:

Stripe Checkout html:

<form action="" method="POST"> <script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key="pk_test_xxx" data-amount="999" data-name="name" data-description="Widget" data-image="/img/documentation/checkout/marketplace.png" data-locale="auto" data-zip-code="true" data-currency="eur"> </script> </form>

So I wrote a Javascript Component from Vaadin example and managed to get the form html loaded within a Window or CustomLayout, but the JS component does not display (Button "Pay with Card") and the JS from stripe does not seems to be executed. I added all anotation & inspected the page everything seems fine , but it does not work !

I used the following example where xhtml variable was set to the "<form...> above": https://vaadin.com/blog/-/blogs/vaadin-7-loves-javascript-components.

Any idea or help on that matter would be great, I guess the onStateChange does only retrieve btw client & server the xhtml injected above and probably the associated DOM does not execute the script inside the form...

Marco Collovati
5 years ago Jul 13, 2016 1:25pm
Dylan BRADFORD
5 years ago Jul 13, 2016 2:15pm
Marco Collovati
5 years ago Jul 13, 2016 2:27pm
Dylan BRADFORD
5 years ago Jul 13, 2016 2:33pm
Dylan BRADFORD
5 years ago Jul 13, 2016 2:35pm
Marco Collovati
5 years ago Jul 13, 2016 2:38pm
Dylan BRADFORD
5 years ago Jul 13, 2016 2:50pm
Dylan BRADFORD
5 years ago Jul 13, 2016 2:52pm
Marco Collovati
5 years ago Jul 13, 2016 3:01pm
Dylan BRADFORD
5 years ago Jul 13, 2016 3:14pm
Dylan BRADFORD
5 years ago Jul 13, 2016 3:24pm
Dylan BRADFORD
5 years ago Jul 13, 2016 3:29pm

From chrome console, maybe this warning is a hint on the way the form html is badly inserted:
Resource interpreted as Document but transferred with MIME type application/x-javascript: "https://checkout.stripe.com/checkout.js".

Marco Collovati
5 years ago Jul 13, 2016 4:03pm

I don't know if it could help but adding class attribute to the script element make the button work for me.

scriptEl.setAttribute("class", "stripe-button");

 

Dylan BRADFORD
5 years ago Jul 13, 2016 6:23pm
Marco Collovati
5 years ago Jul 13, 2016 6:31pm