Blog

PayPal Payment Gateway Integration

Image

Ingrate PayPal Checkout based on eCommerce website. We will use the PayPal smart button. This is a set of buttons that are enabled and used via JavaScript.

Integrate the PayPal payment into your site just after creating your PayPal account. Let me show you the integration with JavaScript in simple step:

Step #1 – Create a PayPal developer account and get the client-id

Go to PayPal dashboard page and create a developer account to login to Dashboard. After creating the account get the client id.

If you don’t know how to get the key then check Create PayPal client ID for the full process.

Step #2 – Load JavaScript SDK and client ID

To use PayPal smart button first you need to add JavaScript library:

<script src="https://www.paypal.com/sdk/js?client-id=CLIENT_ID&components=buttons"> </script>

In this code, mention your client ID where we passed the parameter CLIENT_ID.

Step #3 – Rendering the buttons

To render the button, you have to call the PayPal button script:

<div id="payment-buttons"></div>
<script src=" https://www.paypal.com/sdk/js?client-id=CLIENT_ID&components=buttons"></script>
<script> 
	paypal.Buttons().render('#payment-buttons');
</script>

Step #4 – Create an order and approve payment

You can customize the payment process with the PayPal button. First, create an order that calls the API to send product details such as price and currency.

If the payment is successfully approved, PayPal calls the callback onApprove(). You can use this callback to print a success message and receive a response.

<div id="payment-buttons"></div>
<script src="https://www.paypal.com/sdk/js?client-id=sb"></script>
paypal.Buttons({
    createOrder: function (data, actions) {
        return actions.order.create({
            purchase_units: [{
                amount: {
                    currency_code: "USD",
                    value: "3.87"
                }
            }]
        });
    },
    onApprove: function (data, actions) {
        return actions.order.capture().then(function (details) {
            alert('Congratulations! payment success');
            console.log(details);
            console.log(details.id); // order id
            console.log(details.status); // 'COMPLETED'
            // send ajax request to update the db
        });
    }
}).render('#payment-buttons');

Step #5 – Cancelling Payments and errors

To handle cancellation, trigger another callback onCancel(). This will happen only when click the bottom cancel link on PayPal dialog:

<div id="payment-buttons"></div>
<script src="https://www.paypal.com/sdk/js?client-id=sb"></script>
paypal.Buttons({
    onCancel: function (data) {
        alert('Payment cancelled');
    }
    onError: function (err) {
        alert(err);
    }
}).render('#payment-buttons');

Step #6 – Launch into Production

To use PayPal into production environment you have to create PayPal business account. Go to PayPal signup page and select business account to complete the step.

After creating the account, you will get a live key. Just replace the live key to client key.

<script src="https://www.paypal.com/sdk/js?client-id=LIVE_ID&components=buttons"> </script>