API or Application Programming Interface is a method of integrating services into a site. So, let’s say I have PayPal and I want to integrate services into my website but I don’t have an app or a plugin to do it. Well, the API feature of an application would allow me to install that feature onto the site using code like JavaScript or Python.

This would allow my site to include a custom-built from scratch application that would not have been possible before the API integration because of how the plugin or service does not exist on the specified website. API Programming is a very popular skill for developers and is common because it’s needed. Although, WordPress has a plugin for almost everything, LOL, it’s not perfect and many plugins don’t function the way that we’d like.

API allows a customer to add in a feature that a site can use that provides similar functionality to WordPress and its plugins. I can install an API application into a .html website and it would outperform the WordPress plugin because the custom-built method provides stronger customization than the WordPress plugins.

Developers can also use WordPress HTML boxes to insert API into a website without having to leave WordPress itself. WordPress has many tools to customize the website and features within it so there are many ways to alter the existing template without having to restructure everything especially since an API plugin is just an application similar to a WordPress plugin anyway.

PayPal API works like this:

  1. Create a Restful API ID
  2. Test the API in a Sandbox environment
  3. Go Live!

Step 1

I would have to login to PayPal and sign into the Developer Tools section to be able to access the API. There, I would have to create a Restful API application that is associated with my main PayPal account to be able to receive funds from the button installed onto the page.

I would use this link: Create PayPal Restful API App

Then you click “Create App”

Step 2

Go to this link: PayPal API Buttons

This code should assist you in developing your own API application. The code should look something like this.

<center>
                        <div id="paypal-button-container2" style="margin-top: 50px;"></div>
                    </center>
                    <script>
                        paypal.Buttons({
                            createOrder: function (data, actions) {
                                // Set up the transaction
                                return actions.order.create({
                                    purchase_units: [{
                                        amount: {
                                            value: '1000.00'
                                        }
                                    }]
                                });
                            },
                            onApprove: function (data, actions) {
                                // Capture the funds from the transaction
                                return actions.order.capture().then(function (details) {
                                    // Show a success message to your buyer
                                    alert('Thank You For Your Order ' + details.payer.name.given_name + ' For Any Questions Please Call Me At 1.862.296.3618 or Email Me At dserrano4192@gmail.com. Thank You Very Much & Have A Great Day!');
                                    return fetch('/paypal-transaction-complete', {
                                        method: 'post',
                                        headers: {
                                            'content-type': 'application/json'
                                        },
                                        body: JSON.stringify({
                                            orderID: data.orderID
                                        })
                                    });
                                });
                            }
                        }).render('#paypal-button-container2');
                    </script>
  1. The <center></center> tag tells the website the PayPal buttons need to be centered within the page. I found it difficult to center it without these tags.
  2. The “paypal-button-container” is the class the JavaScript references to load the PayPal button CSS from the PayPal.com website. I added a “2” to identify the 2nd PayPal button to be different from the first, otherwise the JavaScript wouldn’t know the difference between the 2nd and the first buttons. That would cause alignment issues. So, basically all the paypal buttons need to have their own name. I just gave the 2nd a 2 so that I know it’s #2.
  3. The Script installed onto the page allows me to add code that specifies exactly how much to charge the customer. It also provides customer verification that allows them to place the order.

Step 4

Follow this link – Go Live!

Notice the “Sandbox” & the “Live” buttons on the top. These specify whether your app is set to “Live” mode or not.

In order to be in the live state. Your app would have to be using the PayPal “Live” ID in order for PayPal to work for other customers.

Why? Because PayPal “Sandbox” mode is a testing environment designed as a method of testing the PayPal API so that it’s 100% functional upon release.

So, in “Sandbox” mode, only the administrator can access the API. So, if customers are not allowed access to the PayPal system and they keep getting rejected it could be because your application is stuck in “Sandbox” mode.

If so, you only need to change the Live ID in the code from the tutorial to Live ID=”Live_PayPal_ID” and then you have fully integrated your PayPal API into your website.

As long as you have successfully coded your JavaScript application correctly you should have no issues accepting payments on your site using this PayPal API.

Congratulations!


Daniel Serrano | Owner / CEO + Web Developer / SEO + Digital Marketing Expert

I'm a Professional Web Developer / SEO + Digital Marketing Expert. I do Professional Freelance and B2B and B2C contract work. I am always looking for new opportunities so if interested please feel free to contact me: Website: https://www.ninjawebsitedesign.com/ Phone: 1.862.296.3618 Email: info@ninjawebsitedesign.com

0 Comments

Leave a Reply

%d bloggers like this: