Payments Received With Stripe

There are some applications to help you receive payments online. Some of them are really complex and complete in functionalities, others are simpler and easier to use. In this post, I'll show you the implementation provided by Stripe, one of easiest ways to do this.

Implementation

1.- First you have to go to this page and create an account.

http://www.stripe.com

2.- They will send you the access to your account and with it, the API keys you are going to use to receive payments. The nice thing here is it includes an API test key to be sure you're doing it in the right way.

3.- To make it work, you have to add Stripe.js in your project:

<script type="text/javascript" src="https://js.stripe.com/v1/"></script>

4.- In a separate script tag, add:

<script type="text/javascript">
  // this identifies your website in the createToken call below
  Stripe.setPublishableKey('YOUR_PUBLISHABLE_KEY');
</script>

5.- Create a single use token:

$(document).ready(function() {
  $("#payment-form").submit(function(event) {
     // disable the submit button to prevent repeated clicks
     $('.submit-button').attr("disabled", "disabled");

     Stripe.createToken({
       number: $('.card-number').val(),
       cvc: $('.card-cvc').val(),
       exp_month: $('.card-expiry-month').val(),
       exp_year: $('.card-expiry-year').val()
     }, stripeResponseHandler);

     // prevent the form from submitting with the default action
     return false;
   });
});

The response of single token would be like this:

{
  id : "tok_u5dg20Gra", // String of token identifier,
  card : {...}, // Dictionary of the card used to create the token
  created : 1352222493, // Integer of date token was created
  currency: "usd", // String currency that the token was created in
  livemode: true, // Boolean of whether this token was created with a live or test API key
  object: "token", // String identifier of the type of object, always "token"
  used : false, // Boolean of whether this token has been used,
}

6.- Sending the form to your server code:

function stripeResponseHandler(status, response) {
  if (response.error) {
    ...
    // show the errors on the form
    $(".payment-errors").text(response.error.message);
    $(".submit-button").removeAttr("disabled");
  } else {
    var form$ = $("#payment-form");
    // token contains id, last4, and card type
    var token = response['id'];
    // insert the token into the form so it gets submitted to the server
    form$.append("<input type='hidden' name='stripeToken' value='" + token + "'/>");
    // and submit
    form$.get(0).submit();
  }
}   

This code is provided by Stripe, but you can edit it as you need in your project, in my case, I implemented a better way to handle the errors.

Now in the web you can be able to see your payments, approve, transfer to your bank account or refund the money you received. Also you can edit or add code to receive or send other parameters you need to track your payments. This solution works with Ruby, Python, PHP, Java and Scala.

Conclusion

Stripe could be the best way to manage your online payments, or maybe you need a more robust service to do it, but if you want to receive payments fast and easy (as many startups do), certainly you have to take a look at Stripe.

Know more about us!