Redirecting to the Hosted Payment Page of a PSP from Vaadin Application

Flow
1

Hi,

I am building a Vaadin application that needs to redirect a user to a hosted payment page of a payment service provider such as Stripe or Global payments. The HPP integration requires Javascript to be used to send the request and I am wondering what is the best way to go from the Java environment to Javascript with Vaadin Flow.

The PSP integration guidelines are as follows:

Java - set up the payment request

......

try {
    String hppJson = service.charge(new BigDecimal("19.99"))
    .withCurrency("EUR")
    .withHostedPaymentData(hostedPaymentData)
    .withAddress(billingAddress, AddressType.Billing)
    .withAddress(shippingAddress, AddressType.Shipping)
    .serialize();

    // TODO: pass the HPP request JSON to the JavaScript, iOS or Android Library

} catch (ApiException exce) {
    // TODO: Add your error handling here
}

So as the TODO above mentions this is the JSON structure with all the relevant details of the payment,
and it needs to be passed to the PSP using their javascript library which needs to do something like this.

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="rxp-hpp.js"></script>
<script>
    $(document).ready(function() {
      $.getJSON("sdkRequestEndpoint", function(jsonFromRequestEndpoint) {
        RealexHpp.setHppUrl("https://pay.sandbox.realexpayments.com/pay");
        // When using full page redirect your Response URL must be an absolute link
        RealexHpp.redirect.init("payButtonId", "https://www.example.com/responseUrl", jsonFromRequestEndpoint);
      });
    });
</script>

Once the payment transaction is complete the HPP will return to the return URL specified so we are back to a Java environment again.

So my question is what is the best way in Vaadin flow to do this?
I have used executeJavaScript() before to redirect to other URLs with parameters on the URL but I am not sure if this will work in this case or if this is the best approach. I think I read somewhere that this was not in keeping with the philosophy of Flow.

      UI.getCurrent().getPage().executeJavaScript(.....)

Or should I create a new element using the TemplateModel approach and try to pass the JSON structure to that from Java and use
a button in the element with an onClick() function that runs javascript.

Grateful for any suggestions or comments,

John.