A few years ago we wrote about how to get a simple payment portal up and running using PHP and the Stripe API. Stripe has made many improvements since then including security updates, a beautiful revamped checkout interface, and new sample code so we’re re-writing the blog to reflect the new and improved Stripe.
The original sample asks for a quantity representing the number of products (“photos”) you’d like and calculates the price based on a base_price set in a config file. In our case, we want to allow for any amount to be entered. We will also allow for a query string variable to be added to the url, so you can send your client a link like https://yourdomain.com/pay?amt=100 in order to collect $100. This is what we’re going for:
You can download the source code of our modified sample to follow along with this guide, and to use as a starting point for your own implementation. I’ll give some basic setup instructions here, but you’ll definitely want to download the code and see if you can understand it and get it working on your own. If you’re curious you can also check out all modifications we’ve made to the original sample code in this GitHub code comparison. In order to get the sample up and running locally, you will need to have a local PHP server running, like XAMPP or something similar.
The first thing you’ll need to do after downloading our modified sample is to install composer on your system if you haven’t already. Composer is an easy way to install PHP packages and any dependencies that package may have. In this case, we want to use it to install the Stripe-PHP, which is a wrapper for the Stripe API that makes all of the things we want to do with it easier. Hey, why reinvent the wheel, right? We just want to get at that sweet sweet digital cheddar, ASAP. Click here to get the Composer installer. Follow the install instructions and come back here when you’re done.
Run Composer Install
Open a command prompt and navigate to the following folder, replacing “your-workspace” with the path that you extracted the sample to: c:\your-workspace\checkout-one-time-payments\client-and-server\server\php. Run the command “composer install” and it should pull in a new “vendor” folder with the Stripe-PHP package code.
Stripe API Keys & Config.ini
Next you’ll need your stripe API keys. You can find them in your Stripe dashboard. Make sure you’re copying your test keys by ensuring the “View test data” toggle is switched on, and your keys start with “pk_test_” and “sk_test_”. When you’re ready to go live you can toggle that back to live and simply replace the test keys with the live keys.
In the same folder, find the file called config.ini.sample, copy it, and rename it config.ini. Open that file in your favorite text editor/IDE and replace the stripe_secret_key and stripe_publishable_key with the values from the previous step. You’ll also have to modify the domain value to match that of your local server or live domain.
At this point as a test, you can copy the folder at \checkout-one-time-payments\client-and-server\server\php into the root folder of your local installation, run the server and point your browser to index.html. On the checkout screen try entering 4242 4242 4242 4242 as the card number, and any expiration date in the future.
Important File Explanations
This file holds the client side logic for our widget. We’ve added a couple of functions to grab the “amt” parameter to enable pre-filling the dollar amount with a query string value, and made some minor modifications to allow for entering an amount instead of a product quantity. The most important bit initializes the Stripe object using our public key (made available to us by config.php) and adds an event handler to the submit button. The event posts to create-checkout-session.php with our dynamic amount and on success redirects us to checkout.
This file pulls in values from the config.ini (domain and currency), and accepts the dynamic amount we pass in from script.js. It then uses the Stripe-PHP wrapper to create the checkout session with those values. It also sets the success_url and cancel_url parameters, which indicate where to direct the user on success or failure. There are some helpful comments as well, indicating other parameters to play with. You can also see all the options in the Stripe API documentation.
All of this adds up to a simple checkout with a really nice user experience. Most of the heavy lifting is already done by Stripe — we don’t have to worry about all of the complications (technical and legal) that come with actually processing and potentially storing credit card data and other PII. Contact us or let us know in the comments below how you use Stripe, and if we can help you with your implementation or answer any questions!