Is Angular library "ngx-paypal" supports recurring payment?

Question

I want to use paypal library ngx-paypal for one of my Angular project, I know about javascript library integration but i want to use angular liberary i.e. https://www.npmjs.com/package/ngx-paypal

Is it supports recurring payment?

I follow link : https://www.c-sharpcorner.com/article/implement-paypal-with-recurring-payment-using-angular-8/

Answer 1

Absolutely possible to implement recurring payments with ngx-paypal.

plan-list.component.ts

import { Component, OnInit, ViewChild } from "@angular/core";
import {
  PayPalScriptService,
  IPayPalConfig,
  NgxPaypalComponent,
} from "ngx-paypal";
import { environment } from "../../environments/environment";
import { plans } from "../plans";

@Component({
  selector: "app-plan-list",
  templateUrl: "./plan-list.component.html",
  styleUrls: ["./plan-list.component.css"],
})
export class PlanListComponent implements OnInit {
  private plans = [];
  public configs = {};

  @ViewChild("basic") basicSubscription?: NgxPaypalComponent;
  @ViewChild("advanced") advancedSubscription?: NgxPaypalComponent;

  constructor(private payPalScriptService: PayPalScriptService) {
    this.plans = plans;
  }

  ngOnInit() {
    this.plans.map((plan) => {
      this.configs[plan.name] = this.getConfig(plan.id);
    });
    this.payPalScriptService.registerPayPalScript(
      {
        clientId: environment.paypalKey,
        currency: "USD",
        vault: "true",
      },
      (payPalApi) => {
        if (this.basicSubscription) {
          this.basicSubscription.customInit(payPalApi);
        }
        if (this.advancedSubscription) {
          this.advancedSubscription.customInit(payPalApi);
        }
      }
    );
  }

  getConfig(plan_id: string): IPayPalConfig {
    return {
      clientId: environment.paypalKey,
      currency: "USD",
      vault: "true",
      style: {
        label: "paypal",
        layout: "vertical",
        size: "small",
        shape: "pill",
        color: "silver",
        tagline: false,
      },
      createSubscription: function (data, actions) {
        return actions.subscription.create({
          plan_id,
        });
      },
      onApprove: function (data, actions) {
        console.log("subscription data:", data);
        actions.subscription.get().then((details) => {
          console.log("subscription details:", details);
          alert("Success to subscribe!");
        });
      },
      onCancel: (data, actions) => {
        console.log("OnCancel", data, actions);
      },
      onError: (err) => {
        console.log("OnError", err);
      },
      onClick: (data, actions) => {
        console.log("Clicked:", data, actions);
      },
    };
  }
}

plan-list.component.html

<ngx-paypal
  #basic
  [config]="configs['basic']"
  [registerScript]="false"
></ngx-paypal>
<ngx-paypal
  #advanced
  [config]="configs['advanced']"
  [registerScript]="false"
></ngx-paypal>

plans.ts

export const plans = [
  {
    id: "P-2D5563872K1616013MA4EJJQ",
    name: "basic",
    price: 9,
  },
  {
    id: "P-51W76656242348941MA4FEXI",
    name: "advanced",
    price: 99,
  },
];

You can find the full source code here You can check the live demo here