使用模板變量作為腳本 src 的一部分

Question

我正在嘗試創建一個模型付款彈出窗口，用戶可以在其中在 google 應用程序腳本中升級他們的計划。 在我的.gs文件中，我有：

function manageSubscription() {
  var title = 'subscribe';
  var html = HtmlService.createTemplateFromFile('subscribe');
  html.email = Session.getActiveUser().getEmail();
  var htmlOutput = html.evaluate();
  htmlOutput.setTitle(title).setWidth(200).setHeight(200)
  DocumentApp.getUi().showModalDialog(htmlOutput, title);
}

在我的.html文件中，我嘗試使用該電子郵件地址在他們注冊時將其傳遞給 paypal：

  <script id="paypal_js"></script> // how do I set the src???
  <script>
  $(document).ready(function(){
    var src = 'https://www.paypal.com/sdk/js?client-id=my-client-id&email=';
    document.getElementById('paypal_js').src = src+<?= email ?>;

    paypal.Buttons({
      createSubscription: function(data, actions) {
        return actions.subscription.create({'plan_id': 'P-my-plan'});
      },
      onApprove: function(data, actions) {
        google.script.host.close();
      }
    }).render('#paypal-button-container');
  });
  </script>

但是，我收到ReferenceError: paypal is not defined在瀏覽器控制台中ReferenceError: paypal is not defined 。 奇怪的是，我可以做一個簡單的 'alert();' 並看到我收到了電子郵件。

Answer 1

問題在於您使用paypal代碼，您正在動態添加script ，我假設您將從該腳本中獲得paypal作為全局對象。

您忘記的是，在您執行paypal.Buttons代碼時， paypal在瀏覽器中不可用。 因為，它仍然可能從腳本中獲取和評估代碼，您剛剛包括在內。 您必須偵聽腳本 onload 事件並在此之后調用所需的函數。

<script id="paypal_js"></script> // how do I set the src???
  <script>
  $(document).ready(function(){
    var src = 'https://www.paypal.com/sdk/js?client-id=my-client-id&email=';
    var scriptTag = document.getElementById('paypal_js')
    scriptTag.src = src+<?= email ?>;

    scriptTag.onload = function() {
      paypal.Buttons({
        createSubscription: function(data, actions) {
          return actions.subscription.create({'plan_id': 'P-my-plan'});
        },
        onApprove: function(data, actions) {
          google.script.host.close();
        }
      }).render('#paypal-button-container');
    }
  });
  </script>