Browse 549 attributed reviews, viewable separately for our classroom and online training
Our experience of switching to Stripe payments
Part three of a five-part series of blogs

This is the blog which I wish I could have read before starting to integrate Stripe payments on our website! It explains why I'm ultimately glad we went for Stripe, but also some of the things which are harder than they need to be.

  1. Our experience of switching to Stripe payments
  2. Background and reason for change
  3. Enabling payments using Stripe (this blog)
  4. Customising payments forms
  5. Conclusion - would I choose Stripe again?

Posted by Andy Brown on 01 June 2021

You need a minimum screen resolution of about 700 pixels width to see our blogs. This is because they contain diagrams and tables which would not be viewable easily on a mobile phone or small laptop. Please use a larger tablet, notebook or desktop computer, or change your screen resolution settings.

Enabling payments using Stripe

Stripe is impressively easy to set up! 

Integrating your payments

Here, for example, is how you can choose what help you want to get.  First choose your platform:

Choose platform

Choose whether you're building a website, Android app or IPhone app.

Then choose your front-end:

Front-end

Be warned that Stripe is very big on React (which as I understand it is a JavaScript add-in library), although I just use JQuery and HTML.

 

Finally, you can choose your back-end platform:

Back-end

Wise Owl use ASP.NET MVC for all of our external website, so that's what I chose.

 

You then see example code for your choices:

Sample code

You can click to show the server code, HTML file, JavaScript or CSS styles.

When you click on an instruction on the left, you see the corresponding code highlighted:

Highlighted code

Stripe highlights the code relevant to the current instruction.

A quick techie interlude 

This isn't meant to be a how-to manual, but more an aid to help you choose whether Stripe is right for you.  Here's how Stripe payments work, assuming you want an easy life (ie you don't want ever to see people's card details):

Step Details
Link to Stripe.js Your payment page should link to this Stripe page, which contains all the clever code to handle submitted card payments.
Create a payment intent Use a public and private key provided with your account to create a client secret for a payment intent (so at this point you're saying you're going to buy item X for Y pounds - or dollars, or zlotys, or any other currency for that matter).
Present a card form Give a user the chance to fill in their card details, using a form which is created and handled by Stripe.
Create the payment Using the client secret generated earlier, commit this payment using the user's card details entered.

You'll need to understand how to work with AJAX calls in JavaScript - my weak point - but it's all very well explained. 

To be quite honest I don't understand quite how Stripe manage to shield you from every having to see a user's card details, but the fact that we never see people's card details makes PCI compliance a great deal easier!

Testing your work 

This is probably Stripe's strongest point.  Here's how you view your test data:

Viewing test data

Choose the option shown to see test transactions instead of real ones. When you create a Stripe account you are provided with test and real private and public keys to use, but the two accounts work identically (apart from the fact that test account transactions don't involve any real money!).

 

You can see all of your transactions in a list:

Viewing transactions

For privacy reasons I haven't listed them, but I've actually got 348 test transactions, reflecting on how long it too me to get everything right!

There are a huge array of other reports that you can run, and you can set rules to control the level of risk you're incurring.  So provided you just want a basic form, I would give Stripe five stars for ease of use. 

But ... 

This blog has 0 threads Add post