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

Ex 2

Enter your App name and email id and then click create the app.

Step 4

Paypal gives us client id and secret key which are required when we configure Paypal on our application.

Step 5

create product
create plans
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.

Request API : https://api.sandbox.paypal.com/v1/catalogs/products
Request Payload :
{
"name": "Audio Streaming Service",
"description": "Video streaming service",
"type": "SERVICE",
"category": "SOFTWARE",
"image_url": "https://example.com/streaming.jpg",
"home_url": "https://example.com/home"
}

Response Message

{
"id": "PROD-6VT064825G2003241",
"name": "Audio Streaming Service",
"description": "Video streaming service",
"create_time": "2019-09-13T18:35:58Z",
"links": [
{
"href": "https://api.sandbox.paypal.com/v1/catalogs/products/PROD-6VT064825G2003241",
"rel": "self",
"method": "GET"
},
{
"href": "https://api.sandbox.paypal.com/v1/catalogs/products/PROD-6VT064825G2003241",
"rel": "edit",
"method": "PATCH"
}
]
}

Create Plan using Paypal API service

Reference URL - https://developer.paypal.com/docs/subscriptions/integrate/#3-create-a-plan

Request API : https://api.sandbox.paypal.com/v1/billing/plans
Request Payload :
{
"product_id": "PROD-6VT064825G2003241",
"name": "Basic Plan",
"description": "Basic plan",
"billing_cycles": [
{
"frequency": {
"interval_unit": "MONTH",
"interval_count": 1
},
"tenure_type": "TRIAL",
"sequence": 1,
"total_cycles": 1
},
{
"frequency": {
"interval_unit": "MONTH",
"interval_count": 1
},
"tenure_type": "REGULAR",
"sequence": 2,
"total_cycles": 12,
"pricing_scheme": {
"fixed_price": {
"value": "10",
"currency_code": "USD"
}
}
}
],
"payment_preferences": {
"service_type": "PREPAID",
"auto_bill_outstanding": true,
"setup_fee": {
"value": "10",
"currency_code": "USD"
},
"setup_fee_failure_action": "CONTINUE",
"payment_failure_threshold": 3
},
"quantity_supported": true,
"taxes": {
"percentage": "10",
"inclusive": false
}
}

Plan API Response Message

{
"id": "P-20D52460DL479523BLV56M5Y",
"product_id": "PROD-6VT064825G2003241",
"name": "Basic Plan",
"status": "ACTIVE",
"description": "Basic plan",
"create_time": "2019-09-13T18:56:55Z",
"links": [
{
"href": "https://api.sandbox.paypal.com/v1/billing/plans/P-20D52460DL479523BLV56M5Y",
"rel": "self",
"method": "GET"
},
{
"href": "https://api.sandbox.paypal.com/v1/billing/plans/P-20D52460DL479523BLV56M5Y",
"rel": "edit",
"method": "PATCH"
},
{
"href": "https://api.sandbox.paypal.com/v1/billing/plans/P-20D52460DL479523BLV56M5Y/deactivate",
"rel": "self",
"method": "POST"
}
]
}

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,

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 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

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.

12 Comments

Join the conversation! Your thoughts help the community grow.

Michael Kariv6y ago
I wonder about security. Am I correct that both client id and secret (by the way of this.basicAuth, are on the client side in clear text?
- Imtiyaz Ansari6y ago
  Thanks, Michael Kariv for your comment but this code just for demonstration only for knowledge sharing not use the same code on the live project. normally we set all keys on the configure file.
- Michael Kariv6y ago
  Ok, the code has a serious problem with security. This was done for the demonstration purposes of getting the created subscription detail. basicAuth, that contains the secret part, should not be in the javasript code publicly available. It is not required for a user to click the button and subscribe. Instead, of showing to the user the subscription detail is required later, this has to be done via the sever. Basically the Angular web app calls our own server with the user credentials (and possibly the subscription id if it was not stored on the server, though I would think it should have been), and the server then calls paypal API just like the code suggests. Then our server returns the data to the client.
- Michael Kariv5y ago
  Imtiyaz Ansari, As I mentioned, I get it that it was for a demo. So that is agreed. I wourld rather see that prominently highlighted in the article. The reason is that new developers (and senior developers new to the field) learn from articles like this. Your article is well written and covers the important ground. Add to that that PayPal documentation is often inadequate, SDKs go out of date, and samples are scarce. So I wonder how many implementations take your code verbatim. The number would surprise you, my guesss is.
kuldeep singh6y ago
Can you please share me viewchild('paypal') component
Nizar Mejri7y ago
I had a problem with @ViewChild('paypal') the error was the ViewChild Expects 2 element or a component
- Imtiyaz Ansari7y ago
  @Nizar Check this url :- https://stackoverflow.com/questions/56704164/angular-viewchild-error-expected-2-arguments-but-got-1
Walid Debbech7y ago
Thank you. your tutorial was with a great help to me :)
- Imtiyaz Ansari7y ago
  Thank you... Walid Debbech
Utkarsh Kumar7y ago
Detailed and helpful article. Thanks for sharing.
Hamid Khan7y ago
Very good explanation...……...keep growing it...……...
- Imtiyaz Ansari7y ago
  Thank You.. Hamid Khan