Hi all, hope you can help me with this one.

 

I am trying to recreate the following (working) HTML form within an Outsystems web application:


<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick"/>
<input type="hidden" name="business" value="myemail@yahoo.com"/>
<input type="hidden" name="item_name" value="General Fund Contribution"/>
<input type="hidden" name="item_number" value="GF-1"/>
<input type="hidden" name="item_name" value="Widget">
<input type="hidden" name="item_number" value="Wid-001">
<input type="hidden" name="amount" value="1">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="currency_code" value="GBP">
<input type="hidden" name="return" value="http://mysite.com">
<input type="hidden" name="cancel_return" value="http://mysite.com">
<input type="hidden" name="no_note" value="1"/>
<input type="hidden" name="currency_code" value="GBP"/>
<input type="hidden" name="tax" value="0"/>
<input type="submit" value="Submit">
</form>

Embedding the above as an escaped expression doesn't work - as when you click the submit button the page just locks up. I've read around and understand the HTTP Request Handler library or the ardoHTTP library are my best bet, but how exactly do i make this work for the above?


Thanks

Tom


Why are you trying to manually create an arbitrary HTML form?

Perhaps the PayPal Connector could help:

https://www.outsystems.com/forge/572/

If not, can you elaborate on what you're trying to accomplish, and why you're trying to do it by hand?

Andrew

I have an application which dynamically generates a paypal "donate" button, which is linked to the current user's paypal account. The code above works perfectly in a simple HTML page, but i cant replicate the behaviour in OS. 

The desired behaviour is:

  • The user clicks the submit button
  • They are redirected to PayPal and make a deposit
  • They then are returned to the URL specified in the above form

I don't really want to use the PayPal connector as it doesn't offer what i need, and in any case the above code works find - I just don't know how to construct it in OS. 

Perhaps any other examples of a POST form would help, but i haven't been able to find them!

Thanks

Tom

Tom,

Take a look at the source of a screen in your application, using the browser dev tools. What you'll find is that the entire screen is wrapped in a <form> tag already, so if you add the expression above as an unescaped expression, you end up with a nested form, which isn't allowed in HTML 5.

You might try, though I don't know if it would work, adding a "form" attribute, per this discussion on StackOverflow: https://stackoverflow.com/a/28528359. Keeping in mind that if you need to support IE 11, that attribute isn't supported, per https://caniuse.com/#feat=form-attribute.

Right, ok - I see, thanks. 

I'm happy to use the HTTP request / ardoHTTP extensions as an alternative, but unsure how to take the above form and convert it into a the right action flow to achieve the desired behaviour?


Thanks

Tom

So, another approach, which I just did a quick test on, is to use a second form, inserted alongside the normal page form, using jQuery, and then have the submit button inside the flow of the document, using the form attribute that I mentioned earlier, pointing to the Paypal donate form. So if you add the following to the Screen JavaScript property:

SyntaxEditor Code Snippet

$(function(){
    $("form").after("<form id='ppdonate' action='https://www.paypal.com/cgi-bin/webscr' method='post'>" + 
        "<input type='hidden' name='cmd' value='_xclick'/>" +
        "<input type='hidden' name='business' value='myemail@yahoo.com'/>" +
        "<input type='hidden' name='item_name' value='General Fund Contribution'/>" +
        "<input type='hidden' name='item_number' value='GF-1'/>" +
        "<input type='hidden' name='item_name' value='Widget'>" +
        "<input type='hidden' name='item_number' value='Wid-001'>" +
        "<input type='hidden' name='amount' value='1'>" +
        "<input type='hidden' name='no_note' value='1'>" +
        "<input type='hidden' name='currency_code' value='GBP'>" +
        "<input type='hidden' name='return' value='http://mysite.com'>" +
        "<input type='hidden' name='cancel_return' value='http://mysite.com'>" +
        "<input type='hidden' name='tax' value='0'/>" +
    "</form>");
});

It will insert the donate form immediately following the default screen form. Then, inside your page, where you want the button to appear, you can use an unescaped expression like so:

SyntaxEditor Code Snippet

"<input type='submit' value='Submit' form='ppdonate'>"

Note that you'll want to style the button as you want it to appear. You could also use an image with the type of submit as well, etc.

I have tested this alongside a normal button that executes a server action, and both will work side-by-side. 

To be very clear, I am not saying that this is the right way to do this, but it does work. 

Hope that helps!

After playing around with the code a bit, I decided to wrap this up as a simple Forge component.

If you're interested, give it a try:

https://www.outsystems.com/forge/5401/

Just need to drag the button where you want it on the screen, and configure the properties similar to how you have them in the markup above.

Andrew,

Have only just seen this - sorry for the delay. 

We eventually used a Javascript solution to dynamically build the HTML and then linked the click of our "Donate" button to the forms submit action. 

Awesome that you made the effort to build a component - many thanks, I'm sure this will help a lot of people. 

Regards

Tom