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,

 

 

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.

 

 

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

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.

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"
        }
    ]
}

Ex

 

 

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.