Client Only Dashboard

Aim

Buy Me a Coffee!!

The aim here is to enable a payment to my Stripe account to be made from within this page. A Stripe account was opened, a product created, code generated by Stripe for this product was then added to the code for this page. That produced the button which I altered to read "Buy Me a Coffee!!". Clicking on the button allows a user to pay the price I set for that product into my Stripe account using a variety of payment methods.

This approach is described in Stripe's documentation on a page titled: One-time payments with Checkout Client-only integration. The Dashboard option is followed here as opposed to the API option. Navigating Stripe's documentation is a painful experience and I got so tired of getting lost that I created a series of screenshots to help with getting there.

There is a good you tube video of this process here: https://www.youtube.com/watch?v=_dMpO0kgRIc&t=77s

In this page I do not show the code involved as it is simply a question of copying Stripe's auto generated code from your account on Stripe to your html page. In the choose how many section, where we modify Stripe's JavaScript, the code is shown.

Stripe Account

I supplied my email address, mobile number and bank card details to Stripe and went through their verification steps. Within the Stripe account, procedures can be done in test or live mode.

Create a Product in Stripe

From the Dashboard on the Home Page of my Stripe Account I clicked Products (note you can toggle between Test and Live mode). Now click Add Product and fill up the name, description and price fields and upload a photo.

Checkout Client-Only Integration

From the Dashboard on the Home Page of my Stripe Account I clicked, Settings > Payments / Checkout Settings. From here the "Client-Only Integration" set up procedure allows you to specify domains you want to sell products from and what payment types you want to accept and whether you want Chargeback Protection. Now click the link to your Products. Click on the Product to get the detailed view. In the Prices section you can click on the three dots (ellipsis) and then on Get Checkout code snippet. Copy that code (HTML and JavaScript including a link to a JavaScript library hosted by Stripe) and paste it into the appropriate part of the code for your website.

When you click on Get Checkout code snippet you can specify URLs for the user to be directed to after their Stripe purchase. There is a Success URL and Cancel URL. In this case I have used the URL for this page for both. For the Success URL you can add a query string which returns the id of the checkout session. This is what I used: stevespages.org.uk/code-examples/stripe-payment/?session_id={CHECKOUT_SESSION_ID}. Currently I cannot see what you can do with this session_id as it does not seem to match up with anything that appears on my Stripe account after the transaction has completed.

If the Product used was a Live product then it should now be possible to use the button introduced by the Stripe code in your website and transfer the amount set as the price for the Product to your Stripe account using a bank card or Google or Apple pay. If the Product was a Test Product then various test card numbers (search the documentation for "test card numbers" to see a list) can be used to test different scenarios such as successful or cancelled payments and also different payment types.

Keep the Stripe Code Safe

With the stripe code in the source code for a web page that one might be frequently opening and editing as a website is developed it would be easy to inadvertently make changes to it. I therefore put it in a file of its own with an extension of php. I then require this file at the appropriate point in the web page.

Checkout Client & Server Integration

This is a more complex approach offering more choice of how you sell products from your website. For example the user could buy as many of a particular product that they choose and the price calculated and then added to their shopping cart. I have not implemented this yet.