Just to clarify the next part: payU serves as the Internet payment operatorI'm currently facing a significant challenge when it comes to integrating my Angular app with payU payments. Due to security reasons, I have opted not to store or pass credit card data and instead decided to use a widget.
The first hurdle I encountered was how to properly place the widget in the code. According to the documentation, the script should be inserted in the following manner:
<script
src="https://secure.payu.com/front/widget/js/payu-bootstrap.js"
pay-button="#pay-button"
merchant-pos-id="145227"
shop-name="Nazwa sklepu"
total-amount="9.99"
currency-code="USD"
success-callback="test"
sig="250f5f53e465777b6fefb04f171a21b598ccceb2899fc9f229604ad529c69532">
</script>
As you may already be aware, inserting a script in this way is not possible within Angular. So, I came up with a workaround:
ngAfterViewInit(): void {
this.script = document.createElement('script');
this.script.setAttribute('src', 'https://secure.payu.com/front/widget/js/payu-bootstrap.js');
this.script.setAttribute('pay-button', '#pay-button');
this.script.setAttribute('merchant-pos-id', '145227');
this.script.setAttribute('total-amount', '9.99');
this.script.setAttribute('currency-code', 'USD');
this.script.setAttribute('success-callback', 'test');
this.script.setAttribute('sig', '4752ce2b163684a9c27cc0923ad46068c04da5d34329f5669ce73dcf96394558');
this.renderer.appendChild(this.el.nativeElement, this.script);
}
I understand that this is not a perfect solution (if you have a better approach, please feel free to share in the comments).
However, the major issue lies in passing the name of the callback function to the success-callback attribute. I created a function in my component like so:
test(arg: any) {
console.log(arg);
}
But I struggled to retrieve the name. I attempted:
this.script.setAttribute('success-callback', this.test.name);however, the property name remained empty. Is there a straightforward way to obtain the actual method name (after TypeScript compilation) in my component?
On a side note,
Although adding a simple JavaScript script to index.html and providing its name works, I need to access a service within my function.
I am utilizing Angular v7.