Checkout.com with Angularjs

Question

I am wotking on an Angularjs app and trying to integrate with Checkout.com

I am using data-attributes integration method :

checkout.html

<form method="POST">
<script id="cko_script_tag" src="https://cdn.checkout.com/js/checkout.js"
    data-public-key="pk_ea61f128-e700-4598-88c9-e67852148c54"
    data-payment-token="pay_tok_88E83A65-C7E8-4D47-B1E0-75883E2F6C11"
    data-customer-email="customer@email.com"
    data-value="100"
    data-currency="GBP"
    data-debug-mode="true">
</script>

It working great when using on index.html page but when I am using it in any view it show nothing!!

I used both ui-router and ngRoute modules but with no hope

I also try to compile this html via $compile but it doesn't work too.

index.html

<body ng-app="starter">

<ion-pane>
  <ion-header-bar class="bar-stable">
    <h1 class="title">Ionic Blank Starter</h1>
  </ion-header-bar>
  <ion-content>

    <a href="#/packages">go to pay</a>
    <ng-view></ng-view>
  </ion-content>
</ion-pane>

app.js

  $routeProvider
.when('/packages',{
  templateUrl:'templates/packages.html',
  controller:'packages'
})
.when('/checkout',{
  templateUrl:'templates/checkout.html',
  controller:'checkout'
})

any help please!!

The view where it is not working, is there your angular app initialized? — Alteyss, Jan 20 '17 at 10:21
it's not working on any view on my angular module, it only works on index.html outside `ng-view` directive — Peter Wilson, Jan 20 '17 at 10:25
Checkout.com is not angular dependant right? Can I have more html code of your form? — Alteyss, Jan 20 '17 at 10:30
is the correct view getting loaded on the given `url`? according to your route configuration? — Sravan, Jan 20 '17 at 10:52

score 0 · Answer 1 · edited May 23 '17 at 10:29

0

The problem is that within ng-view scripts are not evaluated. Unless you have jQuery loaded before angularJs that will make the job with its html() method. Otherwise just innerHTML will be used (by angular jQlite) and your script is not launched.

For further information, see this answer : https://stackoverflow.com/a/18220411/5566936

edited May 23 '17 at 10:29

Community

1
1

answered Jan 20 '17 at 10:43

Alteyss

513
3
17

Checkout.com with Angularjs

1 Answers1