2014-02-11 43 views
4

我試圖將用Jquery構建的Stripe Checkout集成到用angular構建的SPA中。我想使用自定義版本,並能夠根據當前範圍更改數據(如金額或電子郵件)。

我試圖寫一個指令:

.directive('ngSparkline', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     amount: '@' 
    }, 
    templateUrl: 'views/stripe.html', 
    replace: true 
    }; 
}); 

凡stripe.html containsthe下面的代碼片段,按條紋的文檔:即使

<button id="customButton">Purchase</button> 

<script> 
     var handler = StripeCheckout.configure({ 
     key: "pk_test_sK21onMmCuKNuoY7pbml8z3Q", 
     image: "apple-touch-icon.png", 
     token: function(token, args) { 
      jQuery.ajax({ 
      type:"POST", 
      url: "/stripetoken/", //For own custom domain, put the full https appspot url here 
      data: token, 
      timeout: 200000, 
      beforeSend: function(settings) { 
       console.log("About to send the transaction, may take a while, but this will be async") 
      }, 
      success: function(result) 
      { 
       alert("Paiement Effectué"); 
      }, 
      error: function(result) { 
       console.log("Error",result); 
      } 
      }); 
     } 
     }); 

     document.getElementById("customButton").addEventListener("click", function(e) { 
     // Open Checkout with further options 
     handler.open({ 
      name: "Vinify", 
      description: "Recharge Vinibar", 
      currency: "EUR", 
      panelLabel: "Payer", 
      amount: {{amount}} 
     }); 
     e.preventDefault(); 
     }); 
    </script> 

但結賬不火,我只需嘗試用隨機數量寫就。當我將相同的代碼片段直接放入我的html中,用隨機數量替換{{amount}}時,它可以正常工作。

什麼是最好的方法?我想使用checkout,因爲UI已經建好了,重寫它會有點痛苦。我已經嘗試了角度支付,但代碼與我使用的離子框架相混淆。

謝謝!

+0

我絕對不會中''