Question

我有一个页面，其中生成了一个贝宝付款按钮：当我第一次尝试生成付款按钮时，该按钮就会显示。

但是，如果我尝试第二次生成按钮（例如，要在应用上进行另一次订购），则什么也没发生：该按钮不会显示，并且我需要重新加载页面才能使其正常工作。

我是否必须“重新初始化”，“重新加载”贝宝按钮或其他内容？

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
            }

Angular：如果不重新加载，贝宝按钮将不会出现两次

1 个答案: