Stripe Integration in WordPress

How to add a Checkout form using the WP Simple Pay Lite for Stripe plugin

Stripe is a suite of APIs that powers commerce for businesses of all sizes. Stripe Checkout offers a nice, customizable payment process that works great across desktop and mobile platforms. In this tutorial we will show you how to install and configure the WP Simple Pay for Stripe plugin for WordPress and start using the Stripe Checkout within a few minutes.

 

To add Stripe Checkout form to your products, you will need to follow these steps:

Step 1 Installation and Activation

The first thing you will have to do is to login to your Wordpress Admin Dashboard. From there you will need to navigate to the Plugins>Add New section.

 

Accessing the Plugins Menu in WordPress

 

Now you will need to type in the address bar “WP Simple Pay for Stripe”, look for the plugin by Moonstone Media and click the Install Now button.

 

Installing the WP Simple Pay Lite for Stripe plugin

 

Once the Installation process has been completed you will need to click on the Activate Plugin link located at the bottom of the installation log.

 

Activating the WP Simple Pay Lite for Stripe plugin in WordPress

 

Step 2 Configuration

In order to get into the settings menu of the plugin, you will need to find it on your main admin dashboard and click it.

 

Accessing the WP Simple Pay Lite for Stripe plugin

 

In the Stripe Keys tab, you will see that you need four API keys in order to fully use the plugin. Hit the Find your Stripe API keys here and you will be directed to the official Stripe website.

 

Generating Stripe API keys

 

Here you will need to click Sign Up if you don’t have an account.

 

Sign Up an account in Stripe

 

Now create a Stripe account and make sure that you have a strong password when doing so.

 

Create your Stripe account

 

You will be logged in your admin dashboard’s API Keys section where you will find the four keys you need.

 

Copying the API Keys from your Stripe account

 

Copy the API Keys to their corresponding fields in the plugin and hit the Save Changes button.

 

Pasting the API Keys in the WP Simple Pay Lite for Stripe plugin configuration

 

You have successfully connected the plugin to the Stripe service. Now you will need to access the Default Settings tab and fill the information fields provided by the plugin:

 

  • Site Name – The name of your WordPress website
  • Currency – The currency for the checkout. Use the 3-letter ISO Code
  • Image URL – A URL that leads to a square image of your brand/product
  • Checkout Button Label – The label of the payment button in the checkout form
  • Payment Button Label – The text on the default blue button for the checkout
  • Success Redirect URL – The URL that the user will be redirected to after a successful payment.
  • Disable Success Message – If you want to redirect to a custom page made by you, check this box
  • Failure Redirect URL – The URL that the user will be redirected to after a failed payment.
  • Enable Billing Address – Check marking this will make the user to provide his billing address
  • Verify Zip – Check marking this will verify the zip code of the card
  • Enable Remember – This will add a "Remember Me" option to the checkout form to allow the user to store their credit card for future use
  • Enable Bitcoin – Enables Bitcoin as a payment option.
  • Enable Alipay – Enables Alipay as a payment option.
  • Enable Alipay Reusable – This enables reusable access to the customer's account when using Alipay.
  • Set Locale – To select a particular language, pass the two letter ISO 639-1 code such as "en" for English. See languages supported by Stripe Checkout
  • Disable Plugin CSS – Check marking this will disable the CSS of the plugin
  • Always Enqueue – Enqueues the plugin's scripts and styles on every post and page. Usefull when using shortcodes in non-standard locations like widgets
  • Save Settings – Saves the settings when uninstalling the plugin. Useful during upgrading or re-installing.

 

When you have configured the settings, click the Save Changes button.

 

Step 3 Implementing the Checkout

Now let us use the checkout in an actual post. Create a new post in WordPress and switch to Text mode. Now we will use the shortcodes to create a checkout button for a product. You can also use the WP Simple Pay Companion to help you in this process.

 

Integrating the Stripe Chekout form in a post

 

We have added the amount of 1999 which is 19.99 and also enabled billing address and shipping.

 

Accessing the Stripe Checkout form via the WordPress website

 

When the user fills out the required information he will be able to click the Payment Info button and continue.

 

Filling out the Stripe Checkout form

 

Here, the user will have to type his payment credentials. If you have enabled Alipay of Bitcoin in the settings users will be able to use those as well.

 

Making the Purchase after filling the Payment information in Stripe

 

The user will see here the value you have setup for Checkout Button Label in front of the custom amount of 19.99, so it is advisable to remove the Label when using custom amounts. The user will see the following default message if the payment was successful and you haven’t disabled the success message from the settings.

 

Successfully paying for a product using Stripe

 

Congratulations. You now know how to setup a checkout form in WordPress using the WP Simple Pay for Stripe plugin.