Chrome, HTML5, JavaScript, php, webdev

How To Implement Web Payments

One aspect for Monetization on the web is the simple action – BUY.
In this method, the user will pay and only then, she could ‘use’ the application or service. There are several providers that offer developers an efficient ways to lead users through the checkout process. In the image below you can see an example of such usage when the user got the option to ‘Pay with Card’ in one-click.

pay-ex-1 2015-02-11 16.56.42

After you will click on this button you will get a dialog that ask for your credit card details. In this example, we are using Stripe. It’s a good option that works in many countries around the globe. Moreover, you are getting for ‘free’ all the best practices of client-side validation for the credit card details. In the image below, you can see an example of buying “one hour with Ido”, it’s looking like a bargain.


(!) Why using a 3rd party provider for this? It’s a good idea to avoid re-inventing the wheel and focus on your business. Thus, using a service that specializes in payment will boost our productivity. It’s also doing all the heavy lifting for us by providing credit card processing, fraud detection, regulations compliance, reporting tools and more aspects that will need after the first step.


To sell physical goods on web application, you can use Instant Buy for web from Google Wallet (for users in the US/UK).  Instant Buy APIs give you a cloud-based way to access and store payment information. It should increase your conversions by streamlining your purchase flow and reducing the amount of information your customers need to enter. You will be able to keep your existing payments infrastructure and integrate Instant Buy quickly and easily.

If you have customers in other countries you might want to check out services: Stripe, PayPal that got present around the globe.

In this post, we will use an example (with code) that use Stripe.
Let’s see how we can change credit card from our website.

Example And Code

The steps you will accomplish in this example:

  1. Collect credit card information with the Checkout. You can see how this form looks like in the photo above.
  2. Convert those details to what we call a single-use token. We will POST this token to our server.
  3. Send that token, with the rest of your form, to your server to create the actual charge. After we get the response from Stripe, we will post it to our users or in case of decline, we will notify it.

1. Collect credit card information

You can embed this sample form code.

Pay attention

  • The data-key attribute we added on the script tag which identifies your website when communicating with Stripe.
  • The amount is in cents and it should be an integer.
  • You can customize the look of the dialog with your own images and text.
  • We’ve pre-filled the example with your test publishable API key: pk_test_6pRNASCoBOKtIshFeQd4XMUh. Remember to replace the test key with your live key in production.

2. Convert the data into a single-use token

 Your life becomes easier if sensitive cardholder data does not hit your servers. You can Stripe  take care of the hardest parts of PCI compliance, like redacting logs and encrypting cardholder details.

(!) You should still support HTTPS on your website.

The information we got from step 1 it’s automatically converted to a token which you can safely send to your servers and use to charge your customers. By placing the script tag inside a <form>, a hidden input called stripeToken will be appended to the form when a token is created. When a customer of yours enters their card information, the hidden field containing the token will be appended to the form, and then the form will be automatically submitted to your server.

3. Send and create the actual charge

You’ve got the token for your user’s credit card details and now you can charge them money. This happens on your server, and the fastest way to do it is by using one of Stripe client libraries. In your server side, grab the Stripe token in the POST parameters submitted by your form. Once you do, it’s one simple call to charge the card with Stripe:

That’s it!

If the charge creation request succeeds and doesn’t throw an error, the card has been successfully charged.
You will receive your money in two days.

A Checklist for eCommerce

  • Let users explore before they commit – Placing login or registration too early in a site can be detrimental to conversion you are having with your users. Let them browse around and get comfortable with your offering.
  • Let users purchase as a guest – A live example:
  • Make it easy to finish on another device – Easy to mail it to yourself so you could finish the process later from another device. Your application can share the data with other instances of the application on other platforms. Think of a scenario where the user starts the process on the subway (mobile device) and wish to finish it later this evening from this tablet or laptop.
  • Use existing information to maximize convenience – Pre-Fill forms. For example: If you have your customer’s address, pre-fill the form for them. It will improve their experience, especially, on mobile devices. Another good idea is to help users with a good set of default options. For example, you can get the current zip code of the user and fill it for her.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s