#javascript #paypal #paypal-sandbox #paypal-rest-sdk #paypal-subscriptions
#javascript #paypal #paypal-песочница #paypal-rest-sdk #paypal-подписки
Вопрос:
Я создал продукт и план в подписке Paypal. Перейдя к sandbox.paypal.com/billing/plans и выбрав план, документация paypal предоставляет скопируйте код (приведенный ниже) и вставьте его на свой веб-сайт, где нужна кнопка.
Эта кнопка хорошо работает только для одного плана подписки. У меня есть 3 идентификатора плана для другой подписки, но он возвращает только последнюю добавленную кнопку.
<div id="paypal-button-container"></div>
<script src="https://www.paypal.com/sdk/js?client-id=paypal-clientIdamp;vault=trueamp;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>
Пожалуйста, помогите,
Заранее благодарю вас.
Ответ №1:
SDK <script> должен загружаться только один раз на страницу, прежде чем будут отображаться какие-либо кнопки. <head> обычно это хорошее место для этого.
<div> Для каждой кнопки должно быть уникальное id значение, и сценарий каждой кнопки должен отображаться для ее селектора.
Ответ №2:
Используйте директиву для нескольких планов подписки.
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>
Я получил решение по ссылке ниже: