PayPal is the most widely used application for digital payment services in the world. Angular improves PayPal interaction. Due to the global service, it is suitable for a variety of currencies. It accepts payments in Indian Rupees, US Dollars, and other major currencies. It is having a subscription, subscription bundle, and one-time payment options. PayPal operates and connected with payment services via several interfaces, including PayPal payment standards, PayPal subscriptions, payment renewals, invoicing, and payment acceptance and rejection. Working with angular programming requires a different level of imagination. Develop an Angular algorithm to process PayPal payments

Steps to implement Angular for payment flow

Consider the Angular method below, which makes use of the algorithm. It is primarily involved with PayPal developer documentation. It shows how to order, capture, and store server-side operations via the backend. The payment buttons are constructed and managed through series of real-time callbacks. Some requests coincide with their service requests. As a result, we’ll see an Angular model to its full extent.


paypal.Buttons({
    style: {
        layout: 'vertical',
        color: 'blue',
        shape: 'rect',
        label: 'paypal'
    }
}).render('#paypal-button-container');
/*Then that directive is created with several inputs
to set up these style objects in the
Angular component and use them as HTMLElement*/ 
@Directive({
    selector: 'wm-paypal'
})
export class PayPalButtons {
    private _buttons: Buttons;
    constructor(private paypal: PayPal, private el: ElementRef  ) {}
    // Style inputs
    @Input() label: ButtonsLabel;
    @Input() color: ButtonsColor;
    @Input() shape: ButtonsShape;
    @Input() layout: ButtonsLayout;
    @Input() tagline: boolean;
    @Input() height: number; // 25..55
    ngOnChanges(changes: SimpleChanges) {
        // Prepare to render with an arrow function
        const render = () => 
        (this._buttons = this.buttons()).render(this.el.nativeElement);
        // Render the new buttons immediately or right after closing the previous ones
        this._buttons && this._buttons.close().then(render) || render();
    }
    // Creates the Smart Buttons
    private buttons(): Buttons {
        // Reverts on the PayPal service for rendering the buttons  
        return this.paypal.Buttons({
            // Builds the buttons style based on inputs
            style: {
                layout: this.layout,
                label: this.label,
                color: this.color,
                shape: this.shape,
                tagline: this.layout === 'horizontal' && this.tagline,
                height: this.height
            },
            ...
        });
    }
    ngOnDestroy() {
        // Closes the buttons 
        this._buttons && this._buttons.close()
    }
}    

In the presence of our directives ( ElementRef ), only ElementRef is using to render the buttons. In this case, we used directives rather than components. It provides a control for the ElementRef directive. It should be present in it. We studied how PayPal global objects aim for services during their installation in this investigation of code events. Angularity considers the shape, color, label, and height of an object. The actual implementation is to perform using ngOnChanges(). All inputs are updated when the method is applied. Due to the lack of a specified update() method, use the render() function. When you close it, the same thing happens: it calls the ngOnDestroyer function.

Disablement of buttons:

After our payment has started and progressed, it is necessary to call onInit to enable and disable the processor’s capabilities. Disabling a function is achieved by using the disabled$ process, which defaults to “enabled.” When we use the disabled() return value to create a new status log, the disabled() return value is set to the current disabled. PayPal does not indicate when a payment has been disabled. It uses @Hostbinding() decorators. It displays how component style is created by removing the button structure and events using @Hostbinding() decorators. The buttons enable after the onInit() function callback is completed.

@Directive({ selector: 'wm-paypal' })
export class PayPalButtons {
  ...
  constructor(private paypal: PayPal, private el: ElementRef, 
  @Optional() private processor: PayPalProcessor) {}
  /** Order request to be processed when the button is clicked. */
  @Input() request: OrderRequest
  /** Emits on Approve */
  @Output() approve = new EventEmitter();
  /** Emits on Cancel */
  @Output() cancel = new EventEmitter();
  /** Emits on Error */
  @Output() error = new EventEmitter();
  // Creates the Smart Buttons
  private buttons(): Buttons {
    // Reverts on the PayPal service for rendering the buttons  
    return this.paypal.Buttons({  
      // Builds the style of the buttons based on inputs
      style: {...},
      ...
      // Handles order creation for checkouts
      createOrder: (_,actions) => actions.order.create(this.request),
      // Handles order capturing and subscription activation
      onApprove: (data: OnApproveData, actions: OnApproveActions) => {
        // Emits the approve event
        this.approve.emit(data);
        // Delegates the PayPalProvessor whenever defined
        if(!!this.processor && typeof(this.processor.onApprove) == 'function') {
          return this.processor.onApprove(data, actions);
        }
      },
      // Simply emits the cancel event
      onCancel: data => this.cancel.emit(data),
      // Simply emits the error event
      onError: data => this.error.emit(data),
      ...
    });
  }
  ...
}

• The payment process begins with a request() and ends with the creation of the order. It has a difficult step in the second section of the payment flow. This step includes the data that will use to approve the payment. It should be responsive to business needs; it should call back on the same backend services. It uses PayPalProcessor class. This statement defines the control function onApprove(). When the caller provides the processor, they are responsible for implementing payments. These tasks include authorization and settlements. It also provides the backend resource that performs the core payment process and returns the results. Additional functions, such as cancel() and onError(), have been aligned into the system’s overall structure. These functions use when payment cancelation or errors occur. Everything in this section is dependent on the component ‘wm-PayPal. It provides an easy-to-use input and error/cancels function. AppComponent is an alternative to using PayPalProcessor by considering child interactions. It is having interactions with wm-PayPal as a PayPal Processor. This method completes the process of installing and loading the PayPal SDK.

HTML conversion of PayPal activity through Angular

>> ng new `PayPalWithAngular

Now open fresh created set 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 purpose. To include reference in styles.css file, do it as follow,

>> @import ‘~bootstrap/dist/css/bootstrap.min.css’;

Open Index.html file and do as follow in head section

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

Furthermore, open app.component.html and add 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>
Execute App.component.ts and insert 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 QWNWUTBIX05QTVlWMDIz
SDhMM3Y2alhNcDRVdaUN2V0M4Mmo4a
19hodjdkdS14M3F4dFJ6Y2pNTnRPcGN6OUpPdjU1TW9jTllsEV1p
5WURWNm46RUZJRWtJd0dYdDFJSTdFRmlEdVQ3UWExV2ZXWDZnYmw
3Z2w5ajgwZVlsVjI1ODdfUTRHSUxCSWxZfOGg1SzRRZ
TFhMZU1yVgFZGRThIWXAyRjA=';  //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============
  
} 
Consider the above code. In this example, we can see how Angular implement the PayPal subscription process. Once registration is complete, it modifies the membership button. It allows the user to enter the plan id to initiate the subscription process. The device notified and logged the data after the onApprove function approved the data. It then returned control to the user. Process informs the user that the data collection process had concluded and the user ID generated. You can return to the Cart page as an Angular step by completing the onCancel function within the system. If the system experiences a connectivity failure, the program redirects to an error page. In this way, the subscription performs. Additionally, the login screen verifies the validity of user events, policies, and subscription details. After confirming approval, the survey uses an Angular approach. As a result, we adopted the subscription model. It includes payment processing and invoicing. Angular use to manage the payment features associated with PayPal activities.