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

Question

我想在我的一个Angular项目中使用贝宝库ngx-paypal，我知道javascript库集成，但我想使用Angular libary，即。https://www.npmjs.com/package/ngx-paypal

是否支持定期付款？

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

Answer 1

使用ngx贝宝实现经常性支付是绝对可能的。

计划列表组件.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,
},
];

你可以在这里找到完整的源代码你可以在这里查看实时演示

Answer 2

搜索ngx贝宝代码库显示它支持贝宝订阅