贝宝智能按钮在客户端渲染

Question

我正在使用贝宝（PayPal）智能按钮在我的网站上实施贝宝付款系统。我使用“ PayPal JavaScript SDK”作为参考实现了它。它可以正常工作并与Paypal正常交互。我无法在客户端正确显示Pay pal智能按钮（它始终显示在顶部而不是中间）。我在正面使用了棱角形。

我尝试了不同的样式方法，但没有反应。

`````paypal`

    ngAfterViewChecked(): void {
      if (!this.addScript) {
      this.addPaypalScript().then(() => {
      console.log('paypal',paypal)
      paypal.Buttons({


        style: {
          color:  'blue',
          shape:  'pill',
          label:  'pay',
          height: 40,

      },


        // Set up the transaction
        createOrder: function(data, actions) {
            return actions.order.create({
                purchase_units: [{
                           amount: {
                        value: 0.10,

                    }
                }]
            });
        },

        // Finalize the transaction
        onApprove: function(data, actions) {
            return actions.order.capture().then(function(details) {
                // Show a success message to the buyer
                alert('Transaction completed by ' + details.payer.name.given_name + '!');
            });
        }


    }).render('#paypal-button-container');
      this.addScript = true;
    })
    }
    }
    addPaypalScript() {
    this.addScript = true;
    return new Promise((resolve, reject) => {
    let scripttagElement = document.createElement('script');    
    scripttagElement.src = 'https://www.paypal.com/sdk/js?client-id=xxxxxxxxx&currency=EUR';
    scripttagElement.onload = resolve;
    document.body.appendChild(scripttagElement);
    })
    }
    ````
    ````html`
    <div class="col-md-3 mb-3"  id="paypal-button-container"></div>  
    ````
    `````CSS

    @media screen and (max-width: 600px) {
      #paypal-button-container {
          width: 100%;
      }
    }

    /* Media query for desktop viewport */
    @media screen and (min-width: 400px) {
      #paypal-button-container {
          width: 450px;
      }
    }
    ````

请为我建议如何解决。