Adding Paypal

Lesson Details:

I: Introduction

Welcome to WordPress. I’m going to show you how to customize your site and add some ecommerce features.

II: Body

First we want to customize the theme and change the colors and fonts on the website.

Go to Appearance > Theme Editor and you can manually change the colors and fonts:

Since we are adding paypal, we want to make it easy for people to pay, so we want to add a button on the sidebar. Go to Appearance > Widgets and drag and drop a Paypal Payment Buttons widget:

Now we need to set up the payment options. Click on the name of the payment button and you will see a screen like this:

Here we added a description of our website and made it easy for people to pay with paypal. Click save, then click on the option name to edit the invoice settings. We don’t need any here, so click save again. You can set the amount you want people to pay by default, but we’ll leave it blank. To test it out, go to Appearance > Widgets , click on text link and enter a number like 100$ . Click save if you change something or press cancel if you do not. You will now see a ‘pay now’ button with an invoice price of 100$. Click on the button and you will be redirected to paypal.com where you can pay the amount. Once it is successfully paid, you will be redirected back to your website.

We now have a way for people to pay us via paypal, but we also want to be able to request money from them without having them leave our website. To do so, we need to create a form with a hidden field that will store the amount they want to pay us as well as a submit button. In order to use a hidden field, we need to install a plugin called Gravity Forms . Download it from here , install it, then activate it by going to Plugins > Installed Plugins . Find Gravity Forms in the list of plugins and click activation at the bottom right corner of that page. Then go to Gravity Forms > Add New Form :

Fill in the form with your information and click save . This will create a new form on your website. It does not work yet, so go to Gravity Forms > Settings . First, disable all notifications by checking or unchecking each option. Then go down to payment settings and change the gateway type from PayPal Express Checkout to Stripe Checkout :

It will ask you for an API key, which you can get here after registering : https://api.stripe.com/register. If you don’t get one immediately, wait 5-10 minutes then refresh the page. You should get it eventually. Copy your API key then paste it into the field for Stripe checkout . Now if you reload the page, you should see this :

If it does not load, there may be an error in your code, which you should fix before continuing. The above screen should appear when you click on create your first payment form . Since we are testing this out, we are going to skip this step and just go back into settings. Change the title of your form input for Amount Slider Title to $0 :

Now when people visit your website, they will see this instead of needing to fill in an amount manually :

To test it out, click on Preview & Pay . It will redirect you to Stripe where you can enter an amount :

Then you can submit the form by clicking on Submit . It should return you to your website with a message saying that you have successfully paid $1 . If it did not work properly, double check your code and try again until it works correctly. If you need help, look at the source code below or put in comments what step failed or worked wrong.