Save info in a form before Post - javascript

I am creating a registration form that uses JavaScript to calculate an amount and uses method="post" to redirect the user to PayPal to complete the transaction. The piece I'm missing is some way to capture the information before sending them off to pay. Ideally emailing a copy of the information or even saving to a text file on the server.
I'm kind of a n00b here, so while I realize it's possible to post to my own PHP script and have that redirect them to PayPal, I'm not sure I'd be able to figure out all the pieces in that workflow. Is there a simpler way to do it?

Well you can save your form values into a database and then send it to paypal but I need your html to give you appropriate PHP code.

You need to be careful, if you're saving credit card information you need to make sure you are not breaking the law and/or have the necessary credentials (e.g. PCI compliance)
Paypal also has a function where it will notify a URL, that you specify, when the transaction has been processed. It will give you a summary of the transaction. You can then use that to perform post-payment operations, e.g. change your order status, send email...etc.

Related

What's the Flow for Stripe Elements?

I'm switching from PayPal to Stripe so I can keep the checkout system entirely on my own sales site. While I have an intermediate understanding of PHP and API interactions, I'm so jaded from using PayPal for 3 years I can't figure out how the flow works for Stripe. Their documentation is excellent, it's more "Dictionary" like and not actual examples.
I'm looking to sell Subscription payments from my own site. You create the HTML, include the Stripe.js bit, but what's the process itself? As in, "index.php submits the checkout form, which notifies Stripe, which sends a ping back to charge.php..." etc, that sort of thing.
Where does the customer creation go, and how does it get attached to a CC charge?
Where does the confirmation from Stripe go?
Where does my price checking PHP go?
I've emailed Stripe, and while they're friendly enough they more or less just told me to go online to their documentation, which I've already spent hours in and still don't get it.
I know I'm being dumb - the tutorials online all seem to focus on Stripe Checkout, which is the popup that I don't want, not the custom HTML form.
Thanks in advance guys. :)
There are a number of different ways you can set it up. Here's how we do it in our application.
When the user enters CC information, you use the Stripe.js API on the client to submit the CC to Stripe, and it returns a token. The callback removes the CC data from your form, puts the token in a hidden field in the form, and submits the form to the server.
If you want to save the customer's CC information so they don't have to re-enter it every time, you then use the stripe-php API to create a \Stripe\Customer object for this CC, sending the token as the card parameter. This will return a customer ID, you can save this in your user database for future reuse.
To charge the card, you create a \Stripe\Charge object, with this customer ID in the customer field. The response from this indicates that the charge was successful; if there's a problem it will throw an exception.
If you just want to do a one-time charge without saving the CC permanently, you could just go straight to creating the \Stripe\Charge object, and use the token as the source field.
If you want to allow customers to have multiple saved cards, you create the \Stripe\Customer object the first time, and when they add a new card you retrieve their customer object, add the new token to the source array, and update it. Then on future charges you can specify both the customer and source fields. In this case, the source field should be the card ID of one of their saved cards.
You would presumably do your own validation of the form, and calculate the price, before calling the Stripe API from the PHP script.
Stripe do have a section with examples and sort of step by step guides for this, don't know if you found it - its separate to the API documentation and I didn't see it first time round. [https://stripe.com/docs/subscriptions/quickstart][1] [1]: https://stripe.com/docs/subscriptions/quickstart
For this to make sense, you will need to install their client library for PHP (or whatever you're using) and be familiar with PHP forms.
To answer your questions:
Where does the customer creation go, and how does it get attached to a
CC charge?
This is done using the functions from their library, see link above. The customer creation is sort of separate from the charge. You will need to store the customer ID in your database to charge them later.
Where does the confirmation from Stripe go?
This is returned in the response from the api call.
Where does my price checking PHP go?
Not sure what you mean by this. Presumably you work out the price to charge them first with your code, you can then just give this to stripe as an amount.
Hope this helps.

Prevent form manipulation in PHP/JavaScript/JQuery (PayPal)

I have a form where users can buy credits with PayPal or banktransfer as payment option.
If a user selected "PayPal" as an option, the form data will be send to PayPal, using JQuery/JS:
$(':radio').change(function () {
var $this = $(this).val();
if ($this === 'pp') {
$('#form').attr('action','https://www.paypal.com/cgi-bin/webscr');
}
else
{
$('#form').attr('action','');
}
});
The user can also choose how much he wants to pay, which also selects how many credits he'll get from it. Additionally he can add a coupon-code. An Ajax-Request will check our database, if this is a valid coupon and grants the discount-value then.
All informations are stored in hidden input fields (what the price is, how many credits, how much discount (if any), user id, etc.).
Now, I want to make sure that the user doesn't manipulate these values with Developer Tools or similiar things to pay less, use another user id and so on.
What would be the best possible way to prevent this form manipulation and receive the correct data? I assume it's kinda difficult because there are so much values to change.
Data Forgery / Manipulation
There are many nefarious means of sending manipulated or forged data to a web server - cURL, Http Client (OSX app) just to name two that I use frequently when debugging. A determined attacker will send bad data to the HTTP server no matter what Javascript you think up.
Think outside the box
For security needs, it's time to break out of the mental model of using a web browser because it's a web site. As already stated, there are many ways to send data to an HTTP server.
Javascript is good for the UI and helping the user, but when it comes to securing your service against intentionally bad/wrong/malformed data, you must do that on the server.
Your particular problem
You may need to re-think using hidden form fields. One approach would be to use sessions to keep track of this info. If this is information that must be sent to PayPal in their form, there is a way to embed the PayPal form using encrypted data.
If you don't want to do this, the point of security then moves to the order processing code - look at the transaction details (currency amount, etc) before considering that a transaction is complete and valid.

How can I go to an html page while passing a hidden parameter using Javascript or jQuery?

Upon completion of an ajax call I would like to direct the user to an html page, but at the same time passing a hidden variable (this variable contains sensitive information and should not show up in the URL).
How can I accomplish this?
window.location.href = 'userpage.html?id=14253';
But with the id remaining invisible? Can I POST the id somehow while sending the user to userpage.html?
You should not be checking user credentials on the client side of your website. Regardless of how the ID is being passed to your script, it can be replicated without you being able to check if the request is valid.
To start being even remotely secure with what information is granted to a user, you need to be checking it via the server side. With every request, ensure the user is authenticated to view such data.
If I were you, I would look into using PHP sessions as the first line of defense for checking if a user is authenticated. Doing so will at least keep the information about a user out of a replicable space that can be viewed by the user.
Look up 'php session login tutorial' on Google and you will find plenty of simple tutorials which should get you on the right track.
Example Tutorial
No matter what, the information you pass along is insecure. You can submit a post request using XMLHttpRequest objects if you'd like (or use a framework/library to make AJAX calls) -- but the user could still spoof the data and get different results.
ID enforcement should be done in the backend. Does the requested ID match the ID of the user signed in? No? Don't show it. etc etc.

Can I encrypt content so it doesn't appear in view-source, then show on pageload?

I've got a site where users extend their product trial with a registration code. They click a link (with a key in the URL) from an email, get to this site and a lightbox appears with their registration code. I'm currently displaying the registration code with HTML and hiding it with CSS. Once I check to make sure the URL has the correct key with javascript, I display the registration code. However, this means anyone can just view source on the page and copy the registration code. Is there a way to encrypt the code so it doesn't appear in view source, and then decrypt it if the URL has the correct key? It's one code per product, not per user, so I don't have to do any server side authentication.
If the computer knows it, the user knows it.
You can play obfuscation games, all of which amount to making your Javascript hard to read. But a sufficiently determined user will find it anyway, and once they do, they can easily share it with their friends.
One code per user is the only way to fix this reliably.
I check to make sure the URL has the correct key with javascript
Don't check the key client-side, validate the key on the server.
This is the only way to ensure only valid users get the registration code.
Pseudo PHP example:
if( validateKey($_GET['key']) ) {
echo 'The Registration Code';
} else {
echo 'Error';
}
Client Side Code is inherently insecure. Consider anything you send to a client machine public to the world, and don't trust anything that comes from the client until you cleanse it. A sufficiently determined user will de-obfuscate your code, regardless how much effort you put into the initial obfuscation routine.
Another tip to help you instead to show the registration code in the site you can send back an email to the user with the registration code.
And as Nemo suggest, the right way is one code for user
Hope it help
As mentioned before the client side will not cover your security needs.
Better would be to have the page send a Ajax request to the server containing the key, you can then respond with the registration code.
Even better would be to directly validate the key on the first request, then decide to return an error page or the page with the registration info.
As others have replied, doing this validation server-side is both easier and more secure.
You can have an AJAX request posting the URL key to a php page, that in turn would reply with the correct registration code.
That being said, there is always the possibility of using a client-side use encryption library (like AES), but from what i understand i don't think it would be a good approach to solving your problem.
Again, doing it on the server-side is both extremely easy and as secure as you need.
Encrypt your registration code (plus some magic cookie) with the key in the server before embedding it in your HTML. In your JavaScript, validate the key (which comes in the URL) by decrypting the registration code. If the magic cookie matches, then you get a valid key and you can display the registration code to the user.
View Source will only reveal the encrypted registration code. Without the key, the snooper has no way to extract the registration code.
This means that you'll have a unique key per registration code, which should be the case for your registration system. The key you send to the user in an email, embedded into a link which they click as you said.

"Was this helpful?" button

I'm wanting to create a "Was this helpful?" button, just with the options Yes/No. I don't have a database ready to receive the input, so, I'd just like each button to simply send an email to me if it was clicked. Maybe the email could just say, "a site user found this page helpful/unhelpful: [URL]".
I've coded email feedback forms in PHP before but can't think of where I'd start with this. I'm not sure if an email can be sent with just one click of a javascript button. Does anyone see this as a possibility?
You could use a library such as jquery to do an ajax post to a proxy PHP script:
$.post("/likedthis.php", { 'page': window.location.href},
function(data) {
// Deal with the post results here if you want
alert("Data Loaded: " + data);
});
Though one issue you will run into is people refreshing and clicking multiple times, potentially spamming you with email. A good basic protection against this is to set a $_SESSION variable or cookie with their IP address, and the page, so they can't keep clicking again and again.
Please note however that they can simply use another IP address, or say another page is helpful. However that would be a lot of work just for that.
Also for sanity purposes it would be a good idea to also check the page variable against parse_url() to be safe.
You cannot directly send an email through JavaScript. Here's one way you could do it:
Using JavaScript, add a click event listener to the button, which, when fired:
Disables the button, then
Sends an ajax request to the server, instructing the server to send the email
Using a cross-browser library will make writing the JS part of this simpler:
What cross-browser JavaScript libraries exist?
You wouldn't want to send an email in Javascript, even if you could. You'd need access to an SMTP server and you'd have to pass your credentials to that server. By using JS, your entire code will be client side and so your credentials would be easily obtainable. Are you able to use a server-side language?

Categories

Resources