DEV Community

Cover image for Your Intro to Stripe: Online Payments Processing
Lewis Lloyd
Lewis Lloyd

Posted on

Your Intro to Stripe: Online Payments Processing

Introduction

Stripe is an online payments processor.

It's incredible useful for almost any internet commerce; from online stores to subscriptions, and from user-driven marketplaces to crowdfunding.

This guide will briefly overview Stripe and its API, and give examples on how to integrate it with Django.

If you're using a different framework, it should be easily adaptable!

Features

Stripe is elegant. It abstracts most of the payments process. You don't need to worry about passing card details around and processing it yourself.

Stripe is robust. It can send dummy payments with test cards before completing a purchase flow.

Stripe is secure. AES-256 encryption is built in, with decryption keys stored separately.

Stripe is compliant. This includes PCI, PSD2, SCA and SSAE18/SOC certifications.

Stripe Compliance Certifications

Fees

Stripe Payments charge 1.4% + 20p for European cards and 2.9% + 20p for non-European cards.

Stripe Billing, used for recurring payments, charges 0.5%.

Extensions

Stripe has a host of additional features:

  • Stripe Connect - dedicated dashboard for sellers on your marketplace, with a monthly fee per account.

  • Stripe Radar - machine learning fraud protection.

  • Stripe Sigma - SQL-powered business reports, with dozens of templates.

  • Stripe Atlas - launch a start-up (LLC, bank account, stock issuing) for a one-time fee.

We'll be taking advantage of Stripe Checkout for quick and compliant integration.

Setting Up

Overview

Our tasks at hand are essentially:

  1. Create a Stripe account, and grab your API keys.

  2. Install the Stripe API for the backend (Python: $ pip install stripe).

  3. Add Stripe to the frontend (we're using checkout.js).

  4. We're done! View processed payments on your Stripe account.

Creating a Stripe Account

Head to https://dashboard.stripe.com/register to create an account.

Registering a Stripe Account

Remember to verify your account.

Verifying a Stripe Account

Now, grab your API keys. You'll need both.

Getting a Stripe API Key

Installing the Stripe API

Let's set up the backend. This is where the private API key will live.

Project Setup

Make sure you've set up your project, virtual environment and requirements. Here's a Django guide.

Add Stripe to your requirements.txt for pip. You'll probably want the latest version.

Adding Stripe to Requirements

Install your packages with pip install -r requirements.txt.

Stripe Setup

In the settings, make sure you've added Stripe to your INSTALLED_APPS and defined the keys.

...

INSTALLED_APPS = [
    ...
    'stripe',
]

...

STRIPE_PUBLISHABLE_KEY = 'pk_test_notmykeynotmykeynotmykeynotmykeynotmykeynotmykeynotmykey'

STRIPE_SECRET_KEY = 'sk_test_notmykeynotmykeynotmykeynotmykeynotmykeynotmykeynotmykey'
Enter fullscreen mode Exit fullscreen mode

Once you've set up your project, import stripe and define stripe.api_key in your views.

import stripe

from django.conf import settings
from django.shortcuts import render

stripe.api_key = settings.STRIPE_SECRET_KEY


class ...
Enter fullscreen mode Exit fullscreen mode

We can now get started with some views and templates!

Adding Stripe to the Frontend

Using Stripe Checkout, we can create a payment form (and handle it) incredibly quickly.

Product Page

We'll make a very simple view, with our API key added to the context.

class HomeView(TemplateView):
    template_name = 'index.html'

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context['key'] = settings.STRIPE_PUBLISHABLE_KEY
        return context
Enter fullscreen mode Exit fullscreen mode

Our template will be include a form, as well as a script based on checkout.js.

<h1>Purchase hat:</h1>
<form action="{% url 'payments-charge' %}" method="POST">
  {% csrf_token %}
  <script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
          data-key="{{ key }}"
          data-description="You are purchasing: Hat."
          data-amount="100"
          data-currency="GBP"
          data-locale="auto">
  </script>
</form>
Enter fullscreen mode Exit fullscreen mode

Stripe will validate the payment form. The result looks like:

Example Stripe Form

Payment View

You'll need a view that uses stripe.Charge.create().

You'll notice that the values are hard-coded. You need to enforce them server-side, otherwise the client can just edit the values in the Stripe form.

class ChargeView(TemplateView):

    def post(self, request):
        charge = stripe.Charge.create(
            amount = 100,
            currency = 'gbp',
            description = 'Hat purchase.',
            source=request.POST['stripeToken']
        )
        return HttpResponse('charge.html')
Enter fullscreen mode Exit fullscreen mode

As for the template, it doesn't need anything. All functionality is handled in the post.

<p>Thank you for your payment!</p>
Enter fullscreen mode Exit fullscreen mode

You'll likely want to pass some context data in order to personalise it.

Demo

We can try out our form with a test card.

Stripe Payment Demo

We can now see the payment on the dashboard.

Stripe Dashboard Demo

Super easy, right? You can now begin to explore the big, wide world of internet commerce!

Summary

What We Covered

In this post, we had a look at:

  • Creating a Stripe account.

  • Getting our API keys.

  • Adding Stripe to our Django backend.

  • Creating views and templates for our frontend.

  • Handling the post request using stripe.Charge.create().

  • Viewing payments on the dashboard.

What We Missed

There's a whole bunch of stuff to do after payment.

As well as the pages above, there's also API docs, such as the API: Refunds page.

Further Reading

Payments are tricky business, and you don't want to head in the wrong way.

The Django subreddit (r/django) is an awesome, active and high-quality community.


Hey, guys! Thank you for reading. I hope that you enjoyed this.

Keep up to date with me:

Catch you around!

Top comments (0)