0

I am integrating razorpay payment checkout form into my MEAN stack application which uses Angular 2+.

Reference: https://docs.razorpay.com/docs/checkout-form

As per their documentation, i need to add the below script tag into the html page.

When i added the below script in angular 2's index.html page, all works, but naturally it is displaying in all the pages.

<script
    src="https://checkout.razorpay.com/v1/checkout.js"
    data-key="rzp_test_1dfsgdhsreQvD"
    data-amount="5000"
    data-buttontext="Pay with Razorpay"
    data-name="Compy name"
    data-description="Test Transaction with Razor Pay"
    data-image="./assets/static/hmicon.png"
    data-prefill.name="Test"
    data-prefill.email="test@gmail.com"
    data-theme.color="#F37254">
</script>
<input type="hidden" value="Hidden Element" name="hidden">

How to add the above script in a specific components template html file?

In my html template as of now i just have

<div class="container fixContainer">
    ...
    ...  <!--There is no html or body tag used here-->

    <div *ngIf="showButton" class="col-md-8 col-sm-8 col-xs-8">             
            <!--I tried to include the above script here, but nothing shows up-->
            ...

            ...

    </div>
</div>

Or if not in html, how to include in my component ts file?

stack200 s
  • 155
  • 1
  • 2
  • 16
  • refer https://stackoverflow.com/questions/42458346/need-to-insert-script-tag-in-angular-2 – Sunny Feb 18 '18 at 10:57
  • Their docs indicate tha this script and input is within a form - are you including that ("
    ") or is it just cos of the post in here thats its missing . The easiest way to ensure this is only on the index page would be to check the url and set the current URL as a variable and if currentPage == index.html - show the form (ie - that would be the basis of the ngIf condition.     – gavgrif Feb 18 '18 at 10:57
  • Yes I have included the form post too...I missed it in my question...Ie, on success, my form should redirect to purchase page or I don't necessarily need form tag...User should just get a message or pop up saying payment successful...But I need to include the script.. Could you give an example on how to do the same in my case – stack200 s Feb 18 '18 at 11:02
  • Hey @gavgrif ..Any suggestions on this – stack200 s Feb 18 '18 at 17:31

1 Answers1

0

In angular 2 components HTML template totally restricted tag

Suhag Lapani
  • 655
  • 10
  • 18