CODEWITHSUNDEEP
javascriptjquerypayment-gatewaykeyup
Sunil
Sunil

Reputation: 11

Not able to pass value in script

I am using a payment gateway (razorpay) where i pass a certain amount and then pay the amount, however in it the amount is fixed within the button as shown 

<script
    id="myScript"
    src="https://checkout.razorpay.com/v1/checkout.js"
    data-amount="20000"
    data-buttontext="Payment"
></script>

Now what i am trying to do is allow a user to enter any value(in Rs) through input like given below

<?php
    $data = array(
        'id'=>"myInput",
        'type'=>'text', 
        'class' => "form-control",
        'name'=>'value',
        'autocomplete'=>'off', 
        'placeholder'=>'Amount for wallet' 
        );
?>
<?php echo form_input($data); ?>

And what ever amount is entered should get converted to paise and then pass it in the razor pay script.

For this i used keyup feature and left the data-amount blank as shown below

<script
    id="myScript"
    src="https://checkout.razorpay.com/v1/checkout.js"
    data-amount=""
    data-buttontext="Payment"
></script>

<script>
$('#myInput').on('keyup',function(e){
  $('#myScript').data('amount', $(this).val());

});
</script>

But the issue is if i leave the value blank, the razorpay button is disappearing and if its not blank then it is not picking the desired value.

Can anyone please tell how i can pass the value entered by the user into the data-amount in razorpay

Upvotes: 1

Views: 1813

Answers (1)

Krupal Patel
Krupal Patel

Reputation: 1497

you need to remove included script on change and re-include script with new amount.

Payment gateway API DOC link

$(document).ready(function() {

  $('#myInput').on('keyup', function(e) {

    /* Remove Old amount script */
    $(document).find("#myScript").remove();

    /* Include new amount script */
    $('head').append('<script type="text/javascript" src="https://checkout.razorpay.com/v1/checkout.js" id="myScript" data-amount="' + $(this).val() + '" data-buttontext="Payment" ><\/script>');
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="myInput" value="" />

Upvotes: 1

Related Questions