Paypal Payment Integration In Angular

In this article, we will learn how to implement a Paypal payment gateway in Angular

PayPal is one of the most popular online payment processors in the world. The integration of PayPal is very easy. PayPal provides a payment service that allows us to pay for purchases, and also receive payments. It supports multi-currency including US Dollar, Indian Rupee and all other major currencies. PayPal supports payment methods including, Subscription, Subscription Bundle and one-time payment methods. PayPal is supported in 190 + countries and 26 currencies are accepted.

Now first Get Paypal client id and client secret Key using following  link.

Create Angular Project

Now let’s create an Angular Project by using the following command,

ng new PayPalWithAngular

Now open the newly created project in visual studio code and install bootstrap by using the following command

npm install bootstrap --save

Now open styles.css file and add Bootstrap file reference. To add reference in styles.css file add this line.

@import '~bootstrap/dist/css/bootstrap.min.css';

Now open Index.html file and add the following lines in the head section

<script src="https://www.paypal.com/sdk/js?client-id=AYoonm7wJij_oQg63X-0Br0eTgGr5sE-kOVYox49Y8yfyIJUTv6PIZCZqoOo7_BonWlOvl8a9n1Yh6wQN&vault=true"></script>

Now open app.component.html file and add the following HTML,

<div class="row col-md-12 align-items-center justify-content-center">  
  <div class="col">   
    <select id="ddlplan" [(ngModel)]="planId">  
      <option value="">Select Plan </option>  
      <option value="P-20D52460DL479523BLV56M5Y">SINGLE DEVICE MONTHLY </option>  
      <option value="P-69V0714408520914GLVT2OWY">SINGLE DEVICE QUARTERLY</option>  
      <option value="P-05879618SP259004GLVT2RQY">SINGLE DEVICE HALFYEARLY</option>  
      <option value="P-4GG19360L3165531MLVT2T3Q">SINGLE DEVICE YEARLY</option>  
      <option value="P-7EY82590S1568242RLVT2WCI">MULTIPLE DEVICE MONTHLY</option>  
      <option value="P-41W43904VD877272YLVT2X4I">MULTIPLE DEVICE QUARTERLY</option>  
      <option value="P-56995822K5295852ELVT2ZMA">MULTIPLE DEVICE HALFYEARLY</option>  
      <option value="P-6LF21374AM914681BLVT22OY">MULTIPLE DEVICE YEARLY</option>  
      <option value="P-3NS34795KB814132ALVTDMKI">Test Daily Plan</option>  
    </select></div>  
  <div class="col">  
    <div #paypal></div>  
  </div>  
</div>

Now open App.component.ts file and add the following code

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';  
declare var paypal;  
@Component({  
  selector: 'app-paypal',  
  templateUrl: './paypal.component.html',  
  styleUrls: ['./paypal.component.css']  
})  
export class PaypalComponent implements OnInit {  
  @ViewChild('paypal') paypalElement: ElementRef;  
  constructor() { }  
  planId: any;  
  subcripId: any;  
  basicAuth = 'Basic QWNWUTBIX05QTVlWMDIzSDhMM3Y2alhNcDRVdaUN2V0M4Mmo4a19hodjdkdS14M3F4dFJ6Y2pNTnRPcGN6OUpPdjU1TW9jTllsEV1p5WURWNm46RUZJRWtJd0dYdDFJSTdFRmlEdVQ3UWExV2ZXWDZnYmw3Z2w5ajgwZVlsVjI1ODdfUTRHSUxCSWxZfOGg1SzRRZTFhMZU1yVgFZGRThIWXAyRjA=';  //Pass your ClientId + scret key
  
  ngOnInit() {     
    const self = this;  
    this.planId = 'P-20D52460DL479523BLV56M5Y';  //Default Plan Id
    paypal.Buttons({  
      createSubscription: function (data, actions) {  
        return actions.subscription.create({  
          'plan_id': self.planId,  
        });  
      },  
      onApprove: function (data, actions) {  
        console.log(data);  
        alert('You have successfully created subscription ' + data.subscriptionID);  
        self.getSubcriptionDetails(data.subscriptionID);  
      },  
      onCancel: function (data) {  
        // Show a cancel page, or return to cart  
        console.log(data);  
      },  
      onError: function (err) {  
        // Show an error page here, when an error occurs  
        console.log(err);  
      }  
  
    }).render(this.paypalElement.nativeElement);  
  
  }  
  // ============Start Get Subcription Details Method============================  
  getSubcriptionDetails(subcriptionId) {  
    const xhttp = new XMLHttpRequest();  
    xhttp.onreadystatechange = function () {  
      if (this.readyState === 4 && this.status === 200) {  
        console.log(JSON.parse(this.responseText));  
        alert(JSON.stringify(this.responseText));  
      }  
    };  
    xhttp.open('GET', 'https://api.sandbox.paypal.com/v1/billing/subscriptions/' + subcriptionId, true);  
    xhttp.setRequestHeader('Authorization', this.basicAuth);  
  
    xhttp.send();  
  }  
  // ============END Get Subcription Details Method========================  
  
}

Now we can log in with developer sandbox account and check buyer subscription details.

PayPal sandbox URL https://www.sandbox.paypal.com/us/signin