Razor pay give payment amount as one rupee incorrectly

I am trying to add razorpay payment gateway to my website. I use this method. I used code like below,

 

document.querySelector('.razor').setAttribute('data-amount', 4200)
    <form action="https://www.example.com/payment/success/" method="POST">
<script class="razor"
    src="https://checkout.razorpay.com/v1/checkout.js"
    data-key="rzp_live_1vs8SzfbPyOPH1" 
    data-currency="INR"
    data-buttontext="Pay with Razorpay"
    data-name="Acme Corp"
    data-image="https://i.imgur.com/sscxwyv.png"
    data-prefill.name=""
    data-prefill.email=""
    data-theme.color="#F37254"
></script>
<input type="hidden" custom="Hidden Element" name="hidden">
</form>

This code give payment amount as one rupee instead of 42 rupees. Where is the error happened? Code pen link here