Angular库“ ngx-paypal”是否支持定期付款？

问题描述

我想为我的Angular项目之一使用Paypal库ngx-paypal，我了解javascript库集成，但是我想使用有角度的库，即https://www.npmjs.com/package/ngx-paypal

它支持定期付款吗？

我点击链接：https://www.c-sharpcorner.com/article/implement-paypal-with-recurring-payment-using-angular-8/

解决方法

A search of the ngx-paypal codebase显示它支持PayPal Subscriptions

,

绝对可以使用 ngx-paypal 实现定期付款。

计划列表.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,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:",};
  }
}

计划列表.component.html

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

计划.ts

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

您可以找到完整的源代码 here 您可以查看现场演示here