Blog

Did you ever searched on google by typing, “How to integrate PayPal into my website”? If you did and failed to find out the answer, Let me welcome you to the perfect article. In this article, we are going to talk about how to integrate the PayPal payment method into your own website. So without further talking, let’s get started!

To integrate PayPal into your site, you may choose different languages JavaScript, PHP, Python, Ruby, and many more popular languages. In this article, we are going to set up the payment method using javascript as it doesn’t require any server and is the easiest way to set up. Again, feel free to ask me to write an article on how to set up the PayPal Payment method in your favorite language. Now let’s move to the steps.

Login To Your Developer And Create An App

You must require a PayPal account to add the PayPal payment method to your website. If you already have one, congrats! You are one step closer to progress. But if you still don’t have an account, go and create one on paypal.com. Now login to your PayPal account and click on this link to access your developer dashboard on PayPal.

Once you have that, click on the “create app” button on that page. Now give a name to your app and click on the “Create App” button once again. Now you will find a Client ID for your app and a secret key hidden on the page. You can reveal the secret key by clicking the “Show” button. Save them somewhere and move to the next step 🙂

Create a PayPal Payment Method Button

Now you have the required information to receive your payment into your own PayPal account. Now let’s create that button that will be pressed to make a payment via PayPal. First of all, you need to call this script from PayPal with your client ID.

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID"></script>

Replace the word YOUR_CLIENT_ID with your own client id that you have saved earlier. Now add this script just after the last script on your webpage.

<script>paypal.Buttons().render('body');</script>

Note

You are selecting the element by this script to generate a PayPal Payment button. Defauld is body element but you can choose your own

After adding this script, you will find a PayPal payment button on your webpage. But you still can’t make a payment through them! So how can we make a payment with them? To do that, you need to modify the last script like below.

<script>
  paypal.Buttons({
    createOrder: function(data, actions) {
      return actions.order.create({
        purchase_units: [{
          amount: {
            value: '0.01'
          }
        }]
      });
    },
    onApprove: function(data, actions) {
      return actions.order.capture().then(function(details) {
        alert('Transaction completed by ' + details.payer.name.given_name);
        // Call your server to save the transaction
        return fetch('/paypal-transaction-complete', {
          method: 'post',
          headers: {
            'content-type': 'application/json'
          },
          body: JSON.stringify({
            orderID: data.orderID
          })
        });
      });
    }
  }).render('body');
</script>

Looking confusing? No problem, let me explain everything step by step :).

Amount to be paid

You may find value: '0.01' in your last script and this is the amount that will be paid to your account!

Checking for the successful payment

onApprove: function(data, actions) This function is called when the user of your website makes a successful payment to your PayPal account using the payment method that you have just created earlier.

Saving the payment information.

fetch('/paypal-transaction-complete', {
      method: 'post',
      headers: {
      'content-type': 'application/json'
      },
      body: JSON.stringify({
      orderID: data.orderID
      })
});

In this function, you are making an HTTP Request to save the orderID of the payment. You can use this orderID to validate the payment later. But that’s just another topic. Let me know if you are interested to learn about that also.

Finally, make your app live in your developer dashboard to make it live for everyone. Thanks for reading this article. If you found it useful, please give it a share with your loved one. Cause a share from you will bring me a smile 🙂