我已经在Paypal订阅中创建了产品和计划。通过导航到sandbox.paypal.com/billing/plans并选择计划，贝宝文档提供了复制代码(如下所示(，并将其粘贴到需要按钮的网站中。
此按钮仅适用于一个订阅计划。我有3个其他订阅的计划id，但它只返回最后添加的按钮。
<div id="paypal-button-container"></div>
<script src="https://www.paypal.com/sdk/js?client-id=paypal-clientId&vault=true&intent=subscription" data-sdk-integration-source="button-factory"></script>
<script>
paypal.Buttons({
style: {
shape: 'pill',
color: 'gold',
layout: 'horizontal',
label: 'subscribe'
},
createSubscription: function(data, actions) {
return actions.subscription.create({
'plan_id': 'Plan1ID_here'
//**I have multiple planids for here.**
});
},
onApprove: function(data, actions) {
console.log(data);
alert(data.subscriptionID);
}
}).render('#paypal-button-container');
</script>
请帮忙，提前谢谢。
SDK<script>在呈现任何按钮之前，每页只能加载一次。<head>通常是一个很好的地方。
每个按钮的<div>应该有一个唯一的id值，并且每个按钮的脚本必须呈现给其选择器。
对多个订阅计划使用指令。
paypalSubscription.directive.ts
import { Directive, ElementRef, Input, AfterViewInit } from '@angular/core';
declare var paypal;
@Directive({
selector: '[paypalSubscription]'
})
export class PaypalSubscriptionDirective implements AfterViewInit {
@Input('paypalSubscription') planId: string;
constructor(
private el: ElementRef
) { }
ngAfterViewInit(): void {
console.log(this.planId);
paypal.Buttons({
/** @see https://developer.paypal.com/docs/checkout/integration-features/customize-button/# */
style: {
layout: 'horizontal',
color: 'blue',
shape: 'pill',
label: 'paypal'
},
createSubscription: (data, actions) => {
console.log(data, actions);
return actions.subscription.create({
plan_id: this.planId
});
},
onApprove: (data, actions) => {
console.log(data, actions);
/** alert('You have successfully created subscription ' + data.subscriptionID); */
}
}).render(this.el.nativeElement);
}
}
在HTML组件中，
<div [paypalSubscription]="p.id" [id]="p.id"></div>
我从下面的链接得到了解决方案：
https://medium.com/@sumitvekariya7/如何集成多个付款按钮以用于您的订阅计划-使用角度定向-fdc74e16de32