WEB VIEW with individual form

Hi,

Help me please add html form with submit to request POST to server and view form and submit button in WebView?

For example need POST with form and view in WEBView

I dont know how to make that work, But you could definitely and easily recreate that form in the composer

Please help to how I can do it?
I understand that can create with form, but how can send POST request with data of this form and open answer from server in WebView?

if you choose to make it with the composer, you dont need to use the webview, you will need to send the request through an http function

All right. This is what I also tried to implement. but I also need the user of the application to give a result after sending a request to the server - in the form of a payment system, for example. how to display it to the client if not in webview?

Отправлено с iPhone

if you ca share some screenshots will hlp understand better


Снимок экрана 2022-03-20 в 17.07.36

Снимок экрана 2022-03-20 в 17.08.00

Each https request also has its response. Use that data to bind it to a page variable or whatever and use in the composer.
It should look like
outputs["HTTP request"].response
And after that there are properties.

Unfortunately, there is no return response for the request, you just need to display the html form with the filled fields in the client’s browser in the web view and make the form submit. In response to submitting the form, the user will be shown a payment page.

How do You show the payment page?
Is it a “open url” with some properties? Do You redirect the user to the payment page?
I feel like when the form is submitted two things happen. You record the “order” in one place and in the meantime (not after that and not from the same resource) You redirect the user to the payment page.
Or is the payment page provided by the payment solution?

At the beginning of my question on the forum, an html form was specified, which I was able to form using the POST method in htyp reqest aae fields, but here’s how to send it to appgyver submit and transfer to the page of the system with the right fields filled in to reflect this to the application client?

What happens when the server receives the POST request? I still don’t get that part. And I think the solution lies in understanding this.

After submit html form must open this page with data from fields of form:

https://secure.wayforpay.com/pay

Maybe you understand more than me in this docs:

https://wiki.wayforpay.com/ru/wiki/default/test

So this is what You try to achieve. I get it. This says that the POST request HAS response. There you can see all of its properties. Among them I cannot see the redirect url. Which means that it redirects automatically.

Now the problem is that You send an HTTP request from the appgyver app and then do not show the payment form. Because You cannot show that payment form.

The only way I can think of doing it is to:

  • copy the sample form You have
  • add a webview to Your appgyver page
  • in the webview go to “HTML content”
    • set its value to the formula, add the form you have and then
    • replace the value “” with your data from the appgyver app.
    • it will look terrible in the formula editor, but it should work.

So you would have something like this:

<div onload="document.paymentPost.submit()">
<form id="paymentPost" method="post" action="https://secure.wayforpay.com/pay" accept-charset="utf-8">
  <input name="merchantAccount" value=appVars.merchantAccount>
  <input name="merchantAuthType" value=data.merchantAuthType>
  <input name="merchantDomainName" value="www.market.ua">
  <input name="orderReference" value="DH1647804875">
  <input name="orderDate" value="1415379863">
  <input name="amount" value="1547.36">
  <input name="currency" value="UAH">
  <input name="orderTimeout" value="49000">
  <input name="productName[]" value="Процессор Intel Core i5-4670 3.4GHz">
  <input name="productName[]" value="Память Kingston DDR3-1600 4096MB PC3-12800">
  <input name="productPrice[]" value="1000">
  <input name="productPrice[]" value="547.36">
  <input name="productCount[]" value="1">
  <input name="productCount[]" value="1">
  <input name="clientFirstName" value="Вася">
  <input name="clientLastName" value="Пупкин">
  <input name="clientAddress" value="пр. Гагарина, 12">
  <input name="clientCity" value="Днепропетровск">
  <input name="clientEmail" value="some@mail.com">
  <input name="defaultPaymentSystem" value="card">
  <input name="merchantSignature" value="3eec28d9dbf8a72a9bdd932d32db2eba">
  <input type="submit" value="Test">
</form>
</div>

The first two inputs were the example. Edit it as you need and paste in the formula.
The above form should in fact send the post request after loading. If that doesn’t work try this:

<form id="paymentPost" method="post" action="https://secure.wayforpay.com/pay" accept-charset="utf-8">
  <input name="merchantAccount" value=appVars.merchantAccount>
  <input name="merchantAuthType" value=data.merchantAuthType>
  <input name="merchantDomainName" value="www.market.ua">
  <input name="orderReference" value="DH1647804875">
  <input name="orderDate" value="1415379863">
  <input name="amount" value="1547.36">
  <input name="currency" value="UAH">
  <input name="orderTimeout" value="49000">
  <input name="productName[]" value="Процессор Intel Core i5-4670 3.4GHz">
  <input name="productName[]" value="Память Kingston DDR3-1600 4096MB PC3-12800">
  <input name="productPrice[]" value="1000">
  <input name="productPrice[]" value="547.36">
  <input name="productCount[]" value="1">
  <input name="productCount[]" value="1">
  <input name="clientFirstName" value="Вася">
  <input name="clientLastName" value="Пупкин">
  <input name="clientAddress" value="пр. Гагарина, 12">
  <input name="clientCity" value="Днепропетровск">
  <input name="clientEmail" value="some@mail.com">
  <input name="defaultPaymentSystem" value="card">
  <input name="merchantSignature" value="3eec28d9dbf8a72a9bdd932d32db2eba">
  <input type="submit" value="Test">
</form>
<script>window.onload = function(){
  document.forms['member_signup'].submit();
}
</script>

Also note that I am not sure if You can get any response data back to appgyver this way. So it would take some further tweaking to get the status message etc back inside appgyver app. But it should definitely show the result on the checkout website. So You could add a close button to the webview somewhere so the user can return to the app.

Hope this helps.

Unfortunately it not work

Maybe this variant is more success for use with AppGyver app?

Oh yess. Sorry I overlooked that. It reads all of the " as string breaks.
I cannot come up with a solution for this right now. Sorry.

So yeah in fact the problem with this is that " character breaks the strings. But just today I figured out how to escape that character in the formula editor.
You escape a character with backwards slash: \

So the above text would look something like:

"<div onload=\"document.paymentPost.submit()\">
<form id=\"paymentPost\" method=\"post\" action=\"https://secure.wayforpay.com/pay\" accept-charset=\"utf-8\">  
<input name=\"merchantAccount\" value="+appVars.merchantAccount+">  
<input name=\"merchantAuthType\" value=data.merchantAuthType>  
<input name=\"merchantDomainName\" value="+pageVars.domainName+">  
<input name=\"orderReference\" value="+pageVars.orderReference+">  
<input name=\"orderDate\" value="+pageVars.orderDate+">  
<input name=\"amount\" value="+pageVars.amount+">  
<input name=\"currency\" value="+pageVars.currency+">  
<input name=\"orderTimeout\" value="+pageVars.orderTimeout+">  
<input name=\"productName[]\" value="+pageVars.productName[0]+">  
<input name=\"productName[]\" value="+pageVars.productName[1]+">  
<input name=\"productPrice[]\" value="+pageVars.productPrice[0]+">  
<input name=\"productPrice[]\" value="+pageVars.productPrice[1]">  
<input name=\"productCount[]\" value="+pageVars.productCount[0]+">  
<input name=\"productCount[]\" value="+pageVars.productCount[1]">  
<input name=\"clientFirstName\" value="+pageVars.clientFirstName+">  
<input name=\"clientLastName\" value="+pageVars.clientLastName+">  
<input name=\"clientAddress\" value="+pageVars.clientAddress+">  
<input name=\"clientCity\" value="+pageVars.clientCity+">  
<input name=\"clientEmail\" value="+pageVars.clientEmail+">  
<input name=\"defaultPaymentSystem\" value="+pageVars.paymentSystem+">  
<input name=\"merchantSignature\" value="+pageVars.merchantSingature+">  
<input type=\"submit\" value=\"Test\"><\/form><\/div>"

Just a few notes that I noticed during adding in all those escape characters…
You should most definitely not use page variables but some data resource or so for security reasons as the first thought. It is especially true for the merchant signature and similar values.
Also you should have a list of objects that is for the products. In that you could have 3 properties. Product name, price and count. Now this whole part should be rebuilt dynamically since your user could choose more then 1 or 2 items to purchase. For that I would use a MAP() formula and give it the whole html line as the object…

Honestly, I feel like you should choose a different payment provider. For example stripe. There are a lot more people here on the forum who already could setup payments with stripe. I myself have not did it, but will try a different payment method in the future for sure. This is definitely a little bit too complicated to integrate into a no-code platform.

Hope it helps.

Thank you very much, but nothing don’t work

I like to use Stripe, but this service is not work in Ukraine

May be you know how integrate PayPal in AppGyver?

Снимок экрана 2022-03-22 в 22.08.06.png