How can I implement
<form method="post" action="https://accept.authorize.net/customer/addPayment">
<input type="hidden" name="token" value="pfGaUNntEKMGfyWPmI4p+Bb4TJf2F0NCoCBp3cOXB7"/>
<input type="submit" value="Manage my payment and shipping information"/>
</form>
in React JS? I have tried to implement it, but it did not redirect it to the form. I am calling the token via an API and also the action link.
Related
I am trying to integrate paypal as a payment option. As I have done it (which works) is not using any paypal snd but just the simple html form. Ive been looking at it for a while and perhaps my question is stupid, but I don't understand what the difference is to just using the html form or (at paypal developer provided sdk)? Could someone explain please?
Also, I am trying to write a backend route with nodes/express. I set up the notify url for paypal which - as I understand- will return to me an object containing data (what was paid, the users paypal id etc.).
so what I did was:
1. set up notify url which goes to the (angular state) /summary. - Im not sure if it perhaps should be the backend url and not the state.
2. then I have the fronted http call (as I also want to display a purchase summary to customer after he paid at paypal).
3. route in the backend to post to db.
I have been looking a lot a different documentation and tutorials but don't quite understand it and if anyone would have a few min explaining it to me, that would be amazing!! Thank you!
app.controller('summaryCtrl', function($scope, $http){
return $http.post('api/order/summary', {???})
.then(function(paypalObj){
$scope.paypalObj=payppalObj;
})
// here I am not sure what Im sending/how do I know what the object Im getting back from paypal named)
})
router.post('/summary', function(req, res, next){
console.log(req.body,res, 'paypal')
User.findById(req.user.id)
....
Order.create
...
})
html form:
<form method="POST" accept-charset="utf-8" action="https://www.sandbox.paypal.com/xxx/xxx" name="pp" id="pp">
<input type="hidden" name="cmd" value="_xclick" class="validate">
<input type="hidden" name="business" value="name#yahoo.com" required="required">
<input type="hidden" name="currency_code" value="USD" required="required">
<input type="hidden" name="quantity" value="{{quantity}}" required="required">
<input type="hidden" name="amount" value="{{price}}" required="required">
<input type="hidden" name="return" value="http://localhost:1337" required="required">
<input type="hidden" name="cancel_return" value="http://localhost:1337/about" required="required">
<input type="hidden" name="notify_url" value="http://localhost:1337/api/order/summary" required="required">
</form>
insight my angular controller (as Im using angular:
$scope.paypalPay=function(){
$('#pp').get(0).submit()
};
I am using ng-token-auth with angular/ionic that connects to a rails api. I am currently working on the login page. I have the following form in the code:
<form ng-submit="submitLogin(loginForm)" role="form" ng-init="loginForm = {}">
<input type="email"
name="email"
id="email"
placeholder="Email"
ng-model="loginForm.email"
required="required" />
<input type="password"
name="password"
id="password"
placeholder="Password"
ng-model="loginForm.password"
required="required" />
<button type="submit" class="button button-block button-positive">Sign in</button>
</form>
The submitLogin function succesfully sends a post request to:
POST http://localhost:8100/api/auth/sign_in
The problem is that this is on the ionic server. The rails app is located at localhost:3000. How do I get the post request to go to that URL. Since almost every single angular api ever created will be sending requests to a different server, I have to imagine this is included somehow.
You have to change default apiUrl in your app.js file (or whatever you called it) using .config
angular.module('myApp', ['ng-token-auth'])
.config(function($authProvider) {
$authProvider.configure({
apiUrl: 'http://localhost:3000'
});
});
Here is the link to all possible configuration options for
ng-token-auth
I have a two forms in my application.
In the first one the user sets his data. When submitted the form data gets checked and an entry is made into a database with $http.
The second one is hidden and contains the payment parameters for either paypal or amazon payments.
I need one of two solutions (I can do A but my gut feeling is that B is better):
A)
Trigger the submit function of form B when the promise of form A's http is resolved.
This would be one solution which is not very good I guess:
HTML
<form method="POST" action="{{spendenController.paypal.actionUrl}}" target="_top" id="paypalForm">
<input type="hidden" name="cmd" value="_donations">
<input type="hidden" name="business" value="{{spendenController.paypal.accountEmail}}">
<input type="hidden" name="currency_code" value="EUR">
<input type="hidden" name="lc" value="DE">
<input type="hidden" name="amount" value="{{spendenController.spenden.amount}}">
<input type="hidden" name="item_name" value="Spende">
<input type="hidden" name="notify_url" value="{{spendenController.paypal.notifyUrl}}">
<input type="hidden" name="return" value="{{spendenController.paypal.successRedirectUrl}}" />
<input type="image" src="https://www.paypalobjects.com/de_DE/DE/i/btn/btn_donateCC_LG.gif" border="0" name="btnSubmit" alt="Jetzt einfach, schnell und sicher online bezahlen – mit PayPal.">
<img alt="" border="0" src="https://www.paypalobjects.com/de_DE/i/scr/pixel.gif" width="1" height="1">
</form>
Controller
document.getElementById('paypalForm').submit()
B)
Or load a page with POST params directly from the controller/a service when the promise is resolved. In that case I wouldn't even need the second form.
Question: How to open a page with POST from the controller?
I do not just want to send POST data with $http.post I need the user to see the paypal checkout window in order to fulfill the payment.
I have inputs in a web page without the form tag (useless to me).
How can I get their validity status inside the HTML ? This
<input name="myInput" type="text" ng-pattern="/^[0-9]{13}$/">
<input type="button" ng-show="myInput.$valid">
doesn't work.
I'm afraid that won't work without wrapping it in a form as you need to access those fields via the form's controller.
<form name="myForm">
<input name="myInput" type="text" ng-pattern="/^[0-9]{13}$/">
<input type="button" ng-show="myForm.myInput.$valid">
</form>
Should work.
If you're unable to use the form tag for any reason, you'll have to wire that up manually.
I am new to AngularJS.
In the following fiddle, when user clicks on "This submit triggers validation. But I wanted to put this button at the end of the page" button. I could see alert/error but I want to show a custom message, which I am struggling to do it.
Header inputs:
<input type="name" ng-model="sample" required/>
<input type="name" ng-model="sampleX" required/>
<input type="submit" value="This submit triggers validation. But I wanted to put this button at the end of the page"/>
</form>
<hr/>
Some other form here. Think line items
<hr />
<a class="btn" ng-click="triggerSubmit()">Wanted this submit to trigger the validation to the form on which this button doesn't belong, e.g. trigger to header</a>
js fiddle link
http://jsfiddle.net/unWF3/6/
Thanks,
Kalyan Basa
To disable native browser validation add novalidate attribute to form element:
<form novalidate submit-on="myEvent" ng-submit="onSubmitted()">