1

I am trying to integrate checkout payment gateway with angularJS. Code is working perfectly on index.html but not on inner ui-routing pages.

Documentation of payment checkout is given here: https://docs.checkout.com/getting-started/checkout-js-v2/display-options

<form class="payment-form" method="POST" action="https://merchant.com/successUrl">
  <script >
    window.CKOConfig = {
      publicKey: 'pk_test_6ff46046-30af-41d9-bf58-929022d2cd14',
      customerEmail: '[email protected]',
      appMode: 'lightbox',
      value: 100,
      currency: 'EUR',
      renderMode:  0
    };
  </script>
  <script type="application/javascript" ng-src="https://cdn.checkout.com/v2/sandbox/js/checkout.js"></script>
</form>

Please help.

5
  • Can you provide console errors on the involved pages but not on inner ui-routing pages. It's hard to guess what's going on. Commented Sep 26, 2017 at 7:15
  • @masterpreenz there are no console errors. I am guessing , problem is with ui-routing. Commented Sep 26, 2017 at 7:17
  • <script> tag usage is disallowed on ng templates so you need to improvise. When initializing the directive create the <script> tag using Javascript then append it from there. More info loading-external-scripts-within-angular-html-views Commented Sep 26, 2017 at 7:30
  • @masterpreenz I have tried this too. Its not working Commented Sep 26, 2017 at 10:51
  • Cross Origin error when appending? It just means they the checkout prohibits such action. To improvise though it's untested and fresh from my mind, you can just actually put the checkout script in index.html then dynamically moving the checkout template using $.appendTo everytime you needed it. Commented Sep 27, 2017 at 1:19

0

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.