React Integration: How to connect react components with rails backend? - ruby-on-rails

Apologies if there is a simple answer to this, but I'm very new to react.
I'm building an application in react and I'm trying to integrate two basic forms (register/login) with a rails backend. I don't really need to authenticate the user at this point, I just need it to remember the user and create a session.
Is there an easy way to do this that avoids using something like Devise? If somebody could point me in the right direction, it would be greatly appreciated.
As I mentioned the forms will be very basic. Something like this:
<form>
<label for='email'>Email Address:</label>
<input type="text" name="email" />
<label for='password'>Password:</label>
<input type="text" name="email" />
<button> Login</button>
</form>
and
<form>
<label for='email'>First Name:</label>
<input type="text" name="first-name" />
<label for='password'>Last Name:</label>
<input type="text" name="last-name" />
<label for='email'>Email Address:</label>
<input type="text" name="email" />
<label for='password'>Password:</label>
<input type="text" name="password" />
<label for='password'>Confirm Password:</label>
<input type="text" name="password" />
<button> Register</button>
</form>
Thanks in advance.

You need to create Rest Api on your Rails backend. Once you have your API endpoints you can make calls from react on those endpoints using fetch or axios whichever u like.

First, your rails backend need to be a rest API, if already is, you need to make the request of your react app, I recommend you to use Axios

Related

How to convert HTML form to C# for PayPal subscription

I have the following HTML which works well for subscription payments in my test environment.
<form action="paypalWebAddress" method="post" target="_top">
<input type="hidden" name="cmd" value="_xclick-subscriptions"/>
<input type="hidden" name="business" value="myPaypalAccountId"/>
<input type="hidden" name="paymentaction" value="sale"/>
<input type="hidden" name="item_name" value="Subscription For abc123"/>
<input type="hidden" name="currency_code" value="GBP"/>
<input type="hidden" name="no_note" value="1" />
<input type="hidden" name="a3" value="50"/>
<input type="hidden" name="p3" value="6"/>
<input type="hidden" name="t3" value="M"/>
<input type="hidden" name="src" value="1" />
<input type="hidden" name="srt" value="0" /><!--needs to be never ending-->
<input type="hidden" name="return" value="www."/>
<input type="hidden" name="notify_url" value="www."/>
<input type="hidden" name="cancel_url" value="www."/>
<input type="hidden" name="custom" value="abc123"/>
<input TYPE="hidden" name="charset" value="utf-8">
<input type="hidden" name="bn" value="Me_Subscribe_WPS_UK" />
<input type="submit" name="submit" value="Make Payment"/>
</form>
I'm about to go live and concerned that some one could easily manipulate the DOM and I'm suddenly sending bogus payments. I feel it would be safer to somehow post these values from the code behind so the user can't tamper with the values but, the user will still need to use the PayPal interface in their browser to log in and subscribe.
PayPal-NET-SDK has a quick start and shows how to get going. I have completed this (copied and pasted and ran in debug mode) and it executes fine. However, this doesn't cover subscriptions, probably for the reason explained above (and would probably prevent them accessing the PayPal gui in their browser).
I get the option in the PayPal dashboard area to create a button and reference by button, but, this won't work for me as I need to be able to set the custom field per subscription as a user can subscribe to 1 or more services and each service is unique to that user.
I can't understand how to achieve this
If I understand this right, every subscription is unique per customer in your case and that won't work with the static buttons, so the API seems the only way to go.
The PayPal API does cover subscriptions, they're called Billing Plans. Because each subscription is different, you could create a new Billing Plan for each unique service (or combination of services). This can be done without any intermediate SDK using the HttpClient directly to their API.
Alternatively, the PayPal-NET-SDK you mentioned also seems to cover Billing plans. Their Sample application has quite a lot of examples on how to create, enumerate and issue Billing Plans. Make sure you check out the billing_agreement_tokens collection on the Payment class. You might add multiple "service" tokens there.
No matter how close you are to releasing, a lot of testing still seems to be in order here.
You can try using HttpClient, something like this will help
HttpContent content = new FormUrlEncodedContent(
new List<KeyValuePair<string, string>> {
new KeyValuePair<string, string>("key1",
"value1"),
new KeyValuePair<string,string>("key2","value2")
});
content.Headers.ContentType = new
MediaTypeHeaderValue("application/x-www-form-
urlencoded");
content.Headers.ContentType.CharSet = "UTF-8";
HttpResponseMessage resposne = await
client.PostAsync(new Uri("paypalWebAddress"),
content);
You should not hardcode the values in forms, instead you should create an API in the backend which will return the correspoding values.Then you can dynamically create the form based on the response of the API.
Make sure you create this form after you have received the response from the API.You can have a check like if response is null show some spinner.
<form action="paypalWebAddress" method="post" target="_top">
<input type="hidden" name="cmd" value="{response.cmd}"/>
<input type="hidden" name="business" value={response.business}"/>
<input type="hidden" name="paymentaction" value={response.action}/>
<input type="hidden" name="item_name" value="{response.item}"/>
<input type="submit" name="submit" value="Make Payment"/>
</form>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="business.test.com">
<input type="hidden" name="item_name" value="Memory Stick">
<input type="hidden" name="item_number" value="MEM32507725">
<input type="hidden" name="amount" value="3">
<input type="hidden" name="tax" value="1">
<input type="hidden" name="quantity" value="1">
<input type="hidden" name="currency_code" value="USD">
<!-- Enable override of buyers's address stored with PayPal . -->
<input type="hidden" name="address_override" value="1">
<!-- Set variables that override the address stored with PayPal. -->
<input type="hidden" name="first_name" value="John">
<input type="hidden" name="last_name" value="Doe">
<input type="hidden" name="address1" value="345 Lark Ave">
<input type="hidden" name="city" value="San Jose">
<input type="hidden" name="state" value="CA">
<input type="hidden" name="zip" value="95121">
<input type="hidden" name="country" value="US">
<input type="image" name="submit"
src="https://www.paypalobjects.com/en_US/i/btn/btn_buynow_LG.gif"
alt="PayPal - The safer, easier way to pay online">
</form>
On Click on buy now :
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<!-- Identify your business so that you can collect the payments. -->
<input type="hidden" name="business" value="herschelgomez#xyzzyu.com">
<!-- Specify a Buy Now button. -->
<input type="hidden" name="cmd" value="_xclick">
<!-- Specify details about the item that buyers will purchase. -->
<input type="hidden" name="item_name" value="Premium Umbrella">
<input type="hidden" name="amount" value="50.00">
<input type="hidden" name="currency_code" value="USD">
<!-- Prompt buyers to enter the quantities they want. -->
<input type="hidden" name="undefined_quantity" value="1">
<!-- Display the payment button. -->
<input type="image" name="submit" border="0"
src="https://www.paypalobjects.com/en_US/i/btn/btn_buynow_LG.gif"
alt="Buy Now">
<img alt="" border="0" width="1" height="1"
src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" >
</form>

Form string Post redirection in MVC

I was trying to integrate Payumoney Payment gateway in one of a E Commerce site developed in MVC4. To redirect to the gateway for payment I have to submit :
<form id="PostForm" name="PostForm" action="https://test.payu.in/_payment" method="POST">
<input type="hidden" name="lastname" value="">
<input type="hidden" name="address2" value="">
<input type="hidden" name="udf5" value="">
<input type="hidden" name="curl" value="">
<input type="hidden" language='javascript'>
var vPostForm = document.PostForm;
vPostForm.submit();
</script>
In ASP.Net, this is the code
Page.Controls.Add(new LiteralControl(strForm));
How to achieve this in MVC?
Thanks,
Prasant
Page.Controls.Add(new LiteralControl(strForm));
Instead of above line of code just write :
Response.Write(strForm);
Create it as partial. Put this markup in its view. And in your main view code use #Html.RenderPartial("Payment")

Setting paypal for mobile

I have created paypal button with this code
<form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post">
<!-- Order id. -->
<input type="hidden" name="invoice" value="'+paypalData.orderId+'" />
<!-- Specify a PayPal Shopping Cart Add to Cart button. -->
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="upload" value="1">
<!-- Identify your business so that you can collect the payments. -->
<input type="hidden" name="business" value="'+paypalData.businessId+'">
<!-- Specify currency. -->
<input type="hidden" name="currency_code" value="'+paypalData.currency+'">
<!-- The URL to which PayPal posts information about the payment, in the form of Instant Payment -->
<input type="hidden" name="notify_url" value="notify">
<!-- Return URL when cancel payment -->
<input type="hidden" name="cancel_return" value="cancel">
<!-- Return URL when payment is done -->
<input type="hidden" name="return" value="return">
<input type="hidden" name="amount_'+index+'" value="'+val["price_per_unit"]+'">
<input type="hidden" name="quantity_'+index+'" value="'+val["count"]+'">
<input type="hidden" name="item_name_'+index+'" value="'+val["name"]+'">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="'+paypalData.submitAlt+'">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
But I need to modify it for jQuery mobile. I know that I have to use this command:
cmd=_express-checkout-mobile in url https://www.sandbox.paypal.com/cgi-bin/webscr?cmd=_express-checkout-mobile
but I dont know how to use it and where to put it.
Whole aplication is converted by phonegap.
Thank you very much for your time and any advice.
Your current integration is using PayPal Standard. Express Checkout is part of the API products. You would need to rebuild your checkout using the API to take advantage of Express Checkout.

Paypal return variables on success page

WHAT I AM TRYING TO DO
I am simply trying to display the results of a Paypal subscription signup. I see the issue of not being able to see the POST variables is a common issue.
I have tried many different ways to do this and I see a common solution is to use:
<input id="rm" name="rm" type="hidden" value="2">
This does not work.
I have tried emailing myself $_POST and $_REQUEST variables and they are empty.
However, my code that detects the txn_type $_POST variable works, since my variables appear in my database. After writing to the database, it is supposed to show a receipt, but does not.
Here's the button code:
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<!-- Identify your business so that you can collect the payments. -->
<input type="hidden" name="business" value="paypalemail#gmail.com">
<!-- Specify a Subscribe button. -->
<input type="hidden" name="cmd" value="_xclick-subscriptions">
<!-- Identify the subscription. -->
<input type="hidden" name="item_name" value="Monthly Featured Listings">
<input type="hidden" name="item_number" value="1">
<!-- Set the terms of the regular subscription. -->
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="a3" value="0.01">
<input type="hidden" name="p3" value="1">
<input type="hidden" name="t3" value="M">
<input type="hidden" name="rm" value="2">
<!-- Set recurring payments until canceled. -->
<input type="hidden" name="src" value="1">
<input name="notify_url" value="http://www.example.com/user/register/index.php" type="hidden">
<input name="return" value="http://www.example.com/user/register/index.php" type="hidden">
<input name="cancel_return" value="http://www.example.com/user/register/index.php?payment=cancelled" type="hidden">
<!-- Display the payment button. -->
<input type="image" name="submit" border="0" src="http://www.example.com/images/register-and-pay-now.png" alt="PayPal - The safer, easier way to pay online">
<img alt="" border="0" width="1" height="1" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif">
Since my database code works, I can only guess that Paypal is sending the information correctly, but I can't get it to show up in the web page.
My QUESTION
How can I show successful $_POST variables in my page after the redirect?
Well, my guess is that the variables that you are receiving and storing to the database are hitting the notify_url.
These variables are the IPN variables and are not supposed to be shown on any web page.
In order to get information on the specified return URL you have to access the PDT data.
Read more about PDT here

MVC Razor String Concat

I am using Razor to generate a form. I want to create HTML elements based on some value from it's model property.
for example, if a model contains Id property, and I want to generate html tags as follows
<input type="hidden" name="1_chk" />
<input type="hidden" name="2_chk" />
<input type="hidden" name="3_chk" />
So I used the following syntax, and it failed. Can anyone help me out with this?
<input type="checkbox" name="#Id_chk" />
Thanks
I think this should work for you:
<input type="checkbox" name="#(Id)_chk" />
another option:
<input type="checkbox" name="#(Id + "_chk")" />

Resources