Угловой: кнопка Paypal не появится дважды без полной перезагрузки

Question

У меня есть страница, на которой сгенерирована кнопка оплаты PayPal: при первой попытке создать кнопку оплаты кнопка отображается.

Но если я попытаюсь сгенерировать кнопку во второй раз (например, чтобы сделать еще один заказ в приложении), ничего не произойдет: кнопка не будет отображаться, и мне нужно перезагрузить страницу, чтобы она заработала.

Должен ли я «заново инициировать», «перезагрузить» кнопку PayPal или что-то еще?

HTML:

[...]

<div id="payment">
  <h1>Paiement</h1>
  <div id="paypal-button"></div>
</div>

машинопись:

declare var paypal: any;

@IonicPage()
@Component({
    [...]
}) export class OrderPage {

    [...]

    myFonction(){
        [...]
        // If the customer does everything right 
        // we display the paypal button : 
        displayPaymentButton()
    }    

    displayPaymentButton() {

        paypal.Button.render({
          env: 'sandbox', // Or 'production'

          payment: (data, actions) => {
            return actions.request.post(Api.API_URL + '/payment/create-payment', {
              bookingId: response.id
            }).then(function (res) {
                return res.id;
              });
          },

          onAuthorize: (data, actions) => {
            return actions.request.post(Api.API_URL + '/payment/execute-payment', {
              paymentID: data.paymentID,
              payerID: data.payerID
            })).then((res) => {
                if(res.paymentState === "approved"){
                  // It Worked ! 
                  let toast = this.toastCtrl.create({
                    message: "Commande réalisée avec succès !",
                    duration: 3000,
                    position: 'top'
                  });
                  toast.present();
                  this.navCtrl.push(MainPage, {}, {animate:false});
                } else {
                   [...]  
                  // Process Error
                }
              });
          },

          onError : (err) => {
              [...]
              // Process Error
          }
        }, '#paypal-button');
    }
}

Answer 1

Я заметил, что даже когда платеж закончен, кнопка paypal все еще остается в памяти javascript и генерирует ее в другой раз, когда та же самая кнопка, безусловно, вызывает проблемы.найти решение для барабанов.

Заменить это:

            if(res.paymentState === "approved"){
              // It Worked ! 
              let toast = this.toastCtrl.create({
                message: "Commande réalisée avec succès !",
                duration: 3000,
                position: 'top'
              });
              toast.present();
              this.navCtrl.push(MainPage, {}, {animate:false});
            } else {
               [...]  
              // Process Error
            }

На это:

            if(res.paymentState === "approved"){
              // It Worked ! 
              let toast = this.toastCtrl.create({
                message: "Commande réalisée avec succès !",
                duration: 3000,
                position: 'top'
              });
              toast.present();

              // ==> HARD RELOAD TO HOME PAGE <==
              this.app.getRootNavs()[0].setRoot(MainPage);

            } else {
               [...]  
              // Process Error
            }