I am currently integrating a payment gateway into my Single Page Application (SPA) using AngularJS.
The issue I'm facing is that the payment gateway requires me to include a script with a specific ID for the payment process to work correctly.
This is how my setup looks at the moment: (Note that the controller executes some server-side script that fetches all information related to the payment, but I only need to extract the ID.)
Below is the code snippet for my controller:
(function (){
var PaymentGateController = function ($scope, $rootScope, $state, paymentFactory, $sce) {
$scope.ready = false;
paymentFactory.getResult()
.then(function (result) {
$scope.ready = true;
$scope.url = result.data.id;
}, function(error) {
console.log(error);
});
}
PaymentGateController.$inject = ['$scope', '$rootScope','$state', 'paymentFactory', '$sce'];
angular.module('hcbcApp.paymentGate', []).controller('PaymentGateController', PaymentGateController);
}());
And this is how it appears in my view:
<div ng-if="ready">
<form action="https://peachpayments.docs.oppwa.com/tutorials/integration-guide#" class="paymentWidgets">VISA MASTER AMEX</form>
<script type="text/javascript" src="https://test.oppwa.com/v1/paymentWidgets.js?checkoutId={{url}}"></script>
</div>