How to implement an online payment: First step (1/6)
In this series of articles we will see how it is possible to implement online payments in your own website through a credit card. We will be relying obviously on a company specialized in on-line transactions and in our case on PayPal. The choice fell on this company since it’s the most famous and already synonymous with reliability for everybody.
The setting on which we are going to work is the following:
In our website, we want to create a reserved area in which special contents will be available. We want that access to this area comes with a fee and that the contents are available immediately once the user has paid the fee (instant access).
In this particular case it will be about Your Inspiration Images, a website which collects images. In order to have them at a high resolution it is necessary to become users by paying a fee of 50 Euros.
The procedure we have to implement is schematically as follows:
- The user clicks on the payment button and is directed on PayPal.
- Will find himself/herself in the payment page of the service we intend to offer.
- The user will proceed with the payment.
- PayPal will send a message containing the payment details which we have to intercept, verify and elaborate.
- If the procedure went well and the payment is verified, we will proceed with the creation of the new account and the sending of the authentication data to the user through email.
It’s obvious that this procedure is complex and at the end it will require accurate tests. A problem is thus verified: for every test we are going to make we have to foresee a payment; obviously it will be a payment from me to myself, but every transaction consists of commissions.
Thus we risk of losing a lot of money, without a stimulation environment!
PayPal’s Simulation Environment
Luckily PayPal puts at our disposal a simulation environment (Sandbox) which allows us to conduct all the tests we want in an identical environment (both in functionality and graphics) to the real one.
The first thing to do is create a Sandbox account, at this address:
Once registered and the account activated, we proceed with the login.
What we have to do now is create at least two new PayPal accounts (in the simulated environment of course): one we will use to make the test payments while the other will be the one where the money will be deposited.
Thus we click on test accounts and choose to create a new preconfigured account (the manual procedure is a lot longer and we do not need it).
Thus we choose “Buyer”, decide a name for the user (I will be using “user”) that will purchase the product, and set a password.
It is not important to credit money (fake) into the account.
Now we create another user, this time a “Seller”, I’ll be using the name “admin”
How to prepare our website?
Obviously, what interests us is the matter relative to the payment, thus our website will be composed of only one page which invites the visitor to purchase the particular content.
Create the page index.html as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Special contents</title> </head> <body> <h1>Become a user of Your Inspiration Images</h1> <h2>You can download all images at high resolution</h2> <p>Become a user for only 50 €</p> <!-- here we will put the button "pay now" --> </body> </html>
Preparing the database user table
When the user will pay the service, we automatically have to create him/her an account, thus inserting it into the user table, which will have the following fields:
- id_user: the primary key;
- first name: which we will directly obtain from the notification we will receive from PayPal;
- last name: which we will directly obtain from the notification we will receive from PayPal;
- email: which we will directly obtain from the notification we will receive from PayPal. We don’t even have to bother to verify it, since the email we use on PayPal is already fully verified;
- username: we will be using once again the email address as an username;
- password: we will insert a random password which we will send to the user by email. Of course, in the real case should be able to modify it;
- idTransaction: in this field we will save the unique identification code of the transaction, which is provided by PayPal through the notification. Why? One of the checks we have to make is that of verifying that a transaction has not been already elaborated. It is a rare occurrence but it might happen (problems with the server for example) that the request arrives twice. In this case two accounts would be created. For this reason, before proceeding, we have to verify that the transaction id has not already been inserted into the database. We memorize this datum arbitrarily in the user table; probably, in the real case we will create an ad hoc table.
Now let’s create the paypal database and execute this query:
CREATE TABLE `users` ( `id_user` int(6) unsigned NOT NULL auto_increment, `first name` varchar(25) character set utf8 NOT NULL, `last name` varchar(25) character set utf8 NOT NULL, `email` varchar(60) character set utf8 NOT NULL, `username` varchar(60) character set utf8 NOT NULL, `password` varchar(32) character set utf8 NOT NULL, `idTransaction` varchar(60) character set utf8 NOT NULL, PRIMARY KEY (`id_user`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
How to implement PayPal’s payment button?
Let’s return now in the simulation environment of PayPal and execute the login. Select the user admin and hit the button “enter Sandbox test site”.
We execute the login and we will access the account we created to “receive the money”. It is exactly like a real account. Thus, the operations we will see now in the simulation,are identical to those we will have to execute on the real account when we go in production.
Click on profile and then on my saved buttons. And now choose create new button.
We will choose pay now as button type.
The name of the object is rather important since it will appear in the invoicing. Therefore it has to be quite explicative.
We put the sum we want to collect, in our case 50 euros.
Now go to passage number 3 (advanced functions) and answer no to all of the questions (they are things that are not needed in our specific case). If you wish that the user be addressed to a particular page 0f your website when a payment is canceled or at the end of the payment procedure, you can provide for that in the last two fields.
At this point, by clicking on save changes, you will be released the code for the implementation of the button. You have to copy and paste it in the index.html page we created earlier.
Our index.html page, if executed, now is going to appear like this:
And clicking on the pay now button you will find yourself directly on the payment page
As first thing, we notice from the address bar that we are in the simulation environment, as the button was created with a simulation account.
Afterward, we can observe the name of the company (1) which we will see how to modify it, the name of the object (2) and the cost (3).
Now we can execute the login on the user account and make the payment. Next thing, execute the login in the simulation environment and enter the admin account. We will see that we have received 50 euro (minus commissions).
However, it is not very useful like this. We have to make sure that we are notified immediately about the future payment so that we can automatically proceed with the creation of the new account.
This is what we will be seeing in the next articles.
In this article we have prepared what is needed to implement our payment procedure; in particular we have an indispensable simulation environment to test the system we are going to create.
And you, have you already implemented such a system on your website?
Articles of this guide
- First Step
- Thinking things through
- The general procedures
- The specific procedures
- Testing the application
- Creating dynamic payment buttons
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »