Integrating PayPal Payments with AngularJS

PayPal is a widely used payment gateway that allows secure transactions in web applications. Integrating PayPal with AngularJS involves setting up the PayPal SDK, creating a PayPal button, and handling transactions using PayPal’s API. This guide will walk you through the entire process.

1. Setting Up PayPal in AngularJS

To integrate PayPal in an AngularJS application, we will use PayPal’s JavaScript SDK.

Step 1: Include the PayPal SDK in Your Project

Add the following script in your index.html file:

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

🔹 Replace YOUR_CLIENT_ID with your actual PayPal Client ID from PayPal Developer.

2. Creating a PayPal Button

The PayPal button can be dynamically created using JavaScript inside an AngularJS controller.

Step 2: Define the AngularJS App

Create your AngularJS module and controller:

var app = angular.module("paypalApp", []);

app.controller("PayPalController", function($scope) {
    $scope.initPayPalButton = function() {
        paypal.Buttons({
            createOrder: function(data, actions) {
                return actions.order.create({
                    purchase_units: [{
                        amount: {
                            value: '10.00'  // Set the amount dynamically
                        }
                    }]
                });
            },
            onApprove: function(data, actions) {
                return actions.order.capture().then(function(details) {
                    alert("Transaction completed by " + details.payer.name.given_name);
                    console.log(details); // Log transaction details
                });
            }
        }).render("#paypal-button-container");
    };
});

Step 3: Add PayPal Button in HTML

Add this to your index.html file:

<div ng-app="paypalApp" ng-controller="PayPalController" ng-init="initPayPalButton()">
    <h3>Pay with PayPal</h3>
    <div id="paypal-button-container"></div>
</div>

Now, the PayPal button will be displayed and allow payments.

3. Handling Payment Data in AngularJS

To process payments dynamically, you can fetch order details from an API and pass them to PayPal.

Step 1: Modify Controller to Fetch Order Data

app.controller("PayPalController", function($scope, $http) {
    $scope.initPayPalButton = function() {
        $http.get("/api/get-order-details")  // Replace with your API endpoint
            .then(function(response) {
                var amount = response.data.amount;  // Fetch dynamic amount

                paypal.Buttons({
                    createOrder: function(data, actions) {
                        return actions.order.create({
                            purchase_units: [{
                                amount: { value: amount }
                            }]
                        });
                    },
                    onApprove: function(data, actions) {
                        return actions.order.capture().then(function(details) {
                            alert("Payment successful!");
                            console.log(details);
                        });
                    }
                }).render("#paypal-button-container");
            });
    };
});

4. Using PayPal’s Sandbox for Testing

PayPal provides a sandbox environment for testing payments.

Step 1: Get Sandbox Credentials

Go to PayPal Developer.
Create a sandbox account.
Use the Sandbox Client ID in your script:

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_SANDBOX_CLIENT_ID&currency=USD"></script>

5. Handling Payment Confirmation and Backend Integration

Once a payment is approved, you should store transaction details in your backend.

Step 1: Capture Payment in AngularJS

Modify the onApprove function to send details to your server:

onApprove: function(data, actions) {
    return actions.order.capture().then(function(details) {
        console.log(details);

        // Send transaction details to the backend
        $http.post("/api/process-payment", { transaction: details })
            .then(function(response) {
                alert("Payment successful! Order ID: " + details.id);
            });
    });
}