Implement PayPal With Recurring Payment Using Angular 8

In this article, you will learn how to implement PayPal with recurring Payment using Angular 8.

Introduction

 
In this article, I will discuss PayPal integration in Angular 8 applications step by step. 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. 
 
PayPal provides different options to integrate the gateway,
  • PayPal Payments Standard
  • Checkout
  • Recurring payments using PayPal Subscriptions
  • Payouts
  • Invoicing
  • Accept card payments
In this demo, we will create Recurring payments using the PayPal Subscriptions method.
 
Prerequisites
  • Basic knowledge of Angular and Web API.
  • Visual Studio Code.
  • PayPal Sandbox account
  • Paypal buyer and seller account
PayPal Account
 
Let’s first create a PayPal account, to create a PayPal account to go the following link.
 
Paypal sandbox has two account for testing purpose, one for a buyer and another for the seller.
 
Now open here and create PayPal account,
 
Paypal Subscription Payment In Angular App
 
Step 3
 
Create App on the Paypal developer account
 
Ex. 1
 
Log in ro your Paypal developer account, select My Apps & Credentials, choose sandbox and create the app.
 
Paypal Subscription Payment In Angular App
 
Ex 2
 
Enter your App name and email id and then click create the app.
 
Paypal Subscription Payment In Angular App
 
Step 4
 
Paypal gives us client id and secret key which are required when we configure Paypal on our application.
 
Paypal Subscription Payment In Angular App
 
Step 5
  1. create product
  2. create plans
  3. subscription implementation

Create Product using Paypal API service

 
Reference URL : https://developer.paypal.com/docs/subscriptions/integrate/#2-create-a-product
 
We create a product using postman so here we use PayPal clientId as username and secret key for password for basic authentication.
  1. Request API : https://api.sandbox.paypal.com/v1/catalogs/products  
  2.   
  3. Request Payload :   
  4.   
  5. {  
  6.   "name""Audio Streaming Service",  
  7.   "description""Video streaming service",  
  8.   "type""SERVICE",  
  9.   "category""SOFTWARE",  
  10.   "image_url""https://example.com/streaming.jpg",  
  11.   "home_url""https://example.com/home"  
  12. }  
Response Message
  1. {  
  2.     "id""PROD-6VT064825G2003241",  
  3.     "name""Audio Streaming Service",  
  4.     "description""Video streaming service",  
  5.     "create_time""2019-09-13T18:35:58Z",  
  6.     "links": [  
  7.         {  
  8.             "href""https://api.sandbox.paypal.com/v1/catalogs/products/PROD-6VT064825G2003241",  
  9.             "rel""self",  
  10.             "method""GET"  
  11.         },  
  12.         {  
  13.             "href""https://api.sandbox.paypal.com/v1/catalogs/products/PROD-6VT064825G2003241",  
  14.             "rel""edit",  
  15.             "method""PATCH"  
  16.         }  
  17.     ]  
  18. }  
Ex
 
Paypal Subscription Payment In Angular App
 

Create Plan using Paypal API service

 
Reference URL - https://developer.paypal.com/docs/subscriptions/integrate/#3-create-a-plan
  1. Request API : https://api.sandbox.paypal.com/v1/billing/plans  
  2.   
  3. Request Payload :  
  4.   
  5. {  
  6.         "product_id""PROD-6VT064825G2003241",  
  7.         "name""Basic Plan",  
  8.         "description""Basic plan",  
  9.         "billing_cycles": [  
  10.           {  
  11.             "frequency": {  
  12.                 "interval_unit""MONTH",  
  13.                 "interval_count": 1  
  14.             },  
  15.             "tenure_type""TRIAL",  
  16.             "sequence": 1,  
  17.             "total_cycles": 1  
  18.           },  
  19.             {  
  20.               "frequency": {  
  21.                 "interval_unit""MONTH",  
  22.                 "interval_count": 1  
  23.               },  
  24.               "tenure_type""REGULAR",  
  25.               "sequence": 2,  
  26.               "total_cycles": 12,  
  27.               "pricing_scheme": {  
  28.                 "fixed_price": {  
  29.                   "value""10",  
  30.                   "currency_code""USD"  
  31.                 }  
  32.               }  
  33.             }  
  34.           ],  
  35.         "payment_preferences": {  
  36.           "service_type""PREPAID",  
  37.           "auto_bill_outstanding"true,  
  38.           "setup_fee": {  
  39.             "value""10",  
  40.             "currency_code""USD"  
  41.           },  
  42.           "setup_fee_failure_action""CONTINUE",  
  43.           "payment_failure_threshold": 3  
  44.         },  
  45.         "quantity_supported"true,  
  46.         "taxes": {  
  47.           "percentage""10",  
  48.           "inclusive"false  
  49.         }  
  50.     }   
Plan API  Response Message
  1. {  
  2.     "id""P-20D52460DL479523BLV56M5Y",  
  3.     "product_id""PROD-6VT064825G2003241",  
  4.     "name""Basic Plan",  
  5.     "status""ACTIVE",  
  6.     "description""Basic plan",  
  7.     "create_time""2019-09-13T18:56:55Z",  
  8.     "links": [  
  9.         {  
  10.             "href""https://api.sandbox.paypal.com/v1/billing/plans/P-20D52460DL479523BLV56M5Y",  
  11.             "rel""self",  
  12.             "method""GET"  
  13.         },  
  14.         {  
  15.             "href""https://api.sandbox.paypal.com/v1/billing/plans/P-20D52460DL479523BLV56M5Y",  
  16.             "rel""edit",  
  17.             "method""PATCH"  
  18.         },  
  19.         {  
  20.             "href""https://api.sandbox.paypal.com/v1/billing/plans/P-20D52460DL479523BLV56M5Y/deactivate",  
  21.             "rel""self",  
  22.             "method""POST"  
  23.         }  
  24.     ]  
  25. }  
In the same way we can create two or more plans based on our web application services, like MONTHLY | QUARTERLY | HALF YEARLY | YEARLY.
 

Create Angular 8 Project

 
Step 1 
 
Now let's create an Angular Project by using the following command,
  1. ng new PayPalWithAngular    
Now open the newly created project in visual studio code and install bootstrap by using the following command
  1. npm install bootstrap --save   
Now open styles.css file and add Bootstrap file reference. To add reference in styles.css file add this line.
  1. @import '~bootstrap/dist/css/bootstrap.min.css';   
Now open Index.html file and add the following lines in the head section 
  1. <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,
  1. <div class="row col-md-12 align-items-center justify-content-center">  
  2.   
  3.   <div class="col">   
  4.     <select id="ddlplan" [(ngModel)]="planId">  
  5.       <option value="">Select Plan </option>  
  6.       <option value="P-20D52460DL479523BLV56M5Y">SINGLE DEVICE MONTHLY </option>  
  7.       <option value="P-69V0714408520914GLVT2OWY">SINGLE DEVICE QUARTERLY</option>  
  8.       <option value="P-05879618SP259004GLVT2RQY">SINGLE DEVICE HALFYEARLY</option>  
  9.       <option value="P-4GG19360L3165531MLVT2T3Q">SINGLE DEVICE YEARLY</option>  
  10.       <option value="P-7EY82590S1568242RLVT2WCI">MULTIPLE DEVICE MONTHLY</option>  
  11.       <option value="P-41W43904VD877272YLVT2X4I">MULTIPLE DEVICE QUARTERLY</option>  
  12.       <option value="P-56995822K5295852ELVT2ZMA">MULTIPLE DEVICE HALFYEARLY</option>  
  13.       <option value="P-6LF21374AM914681BLVT22OY">MULTIPLE DEVICE YEARLY</option>  
  14.       <option value="P-3NS34795KB814132ALVTDMKI">Test Daily Plan</option>  
  15.     </select></div>  
  16.   <div class="col">  
  17.     <div #paypal></div>  
  18.   </div>  
  19.   
  20. </div>  
Now open App.component.ts file and add the following code
  1. import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';  
  2. declare var paypal;  
  3. @Component({  
  4.   selector: 'app-paypal',  
  5.   templateUrl: './paypal.component.html',  
  6.   styleUrls: ['./paypal.component.css']  
  7. })  
  8. export class PaypalComponent implements OnInit {  
  9.   @ViewChild('paypal') paypalElement: ElementRef;  
  10.   constructor() { }  
  11.   planId: any;  
  12.   subcripId: any;  
  13.   basicAuth = 'Basic QWNWUTBIX05QTVlWMDIzSDhMM3Y2alhNcDRVdaUN2V0M4Mmo4a19hodjdkdS14M3F4dFJ6Y2pNTnRPcGN6OUpPdjU1TW9jTllsEV1p5WURWNm46RUZJRWtJd0dYdDFJSTdFRmlEdVQ3UWExV2ZXWDZnYmw3Z2w5ajgwZVlsVjI1ODdfUTRHSUxCSWxZfOGg1SzRRZTFhMZU1yVgFZGRThIWXAyRjA='//Pass your ClientId + scret key
  14.   
  15.   ngOnInit() {     
  16.     const self = this;  
  17.     this.planId = 'P-20D52460DL479523BLV56M5Y';  //Default Plan Id
  18.     paypal.Buttons({  
  19.       createSubscription: function (data, actions) {  
  20.         return actions.subscription.create({  
  21.           'plan_id': self.planId,  
  22.         });  
  23.       },  
  24.       onApprove: function (data, actions) {  
  25.         console.log(data);  
  26.         alert('You have successfully created subscription ' + data.subscriptionID);  
  27.         self.getSubcriptionDetails(data.subscriptionID);  
  28.       },  
  29.       onCancel: function (data) {  
  30.         // Show a cancel page, or return to cart  
  31.         console.log(data);  
  32.       },  
  33.       onError: function (err) {  
  34.         // Show an error page here, when an error occurs  
  35.         console.log(err);  
  36.       }  
  37.   
  38.     }).render(this.paypalElement.nativeElement);  
  39.   
  40.   }  
  41.   // ============Start Get Subcription Details Method============================  
  42.   getSubcriptionDetails(subcriptionId) {  
  43.     const xhttp = new XMLHttpRequest();  
  44.     xhttp.onreadystatechange = function () {  
  45.       if (this.readyState === 4 && this.status === 200) {  
  46.         console.log(JSON.parse(this.responseText));  
  47.         alert(JSON.stringify(this.responseText));  
  48.       }  
  49.     };  
  50.     xhttp.open('GET''https://api.sandbox.paypal.com/v1/billing/subscriptions/' + subcriptionId, true);  
  51.     xhttp.setRequestHeader('Authorization'this.basicAuth);  
  52.   
  53.     xhttp.send();  
  54.   }  
  55.   // ============END Get Subcription Details Method========================  
  56.   
  57. }  
Now run the project by using the following command 'npm start' and check result
 
First choose a plan and then click on the Paypal subscription button, it will redirect to the Paypal payment server, enter login details with buyer account, choose your payment mode and click on subscribe to the service.
 
For example, check the below image.
 
After successfullycreating the  subscription process Paypal gives us  asubscription id and buyer details like buyer email, subscription plan details etc.
 
Now we can log in with developer sandbox account and check buyer subscription details.
 
PayPal sandbox URL https://www.sandbox.paypal.com/us/signin
 
Paypal Subscription Payment In Angular App
 

Summary

 
In this write-up, we discussed Paypal subscription payment (Recurring Payments System) with a sample Angular application and postman API call example.
 
In my next article, we will discuss how to deploy Dot net core and Angular applications on IIS server using the deployment tool Jenkins.