how to set value into json from html input value

Question

 <script src="https://secure.na.tnspayments.com/checkout/version/33/checkout.js"
        data-error="errorCallback"
        data-cancel="cancelCallback">
</script>

<script type="text/javascript">

    $(document).ready(function () {
        $("#reference").val('@ViewBag.reference');
    });

    function errorCallback(error) {
        console.log(JSON.stringify(error));
    }
    function cancelCallback() {
        console.log('Payment cancelled');
    }
    

    
    Checkout.configure({
        merchant: 'TEST1',
        order: {
            amount: "10",
            currency: 'MXN',
            description: "Description",
            id: "Reference"
        },
        interaction: {
            merchant: {
                name: 'Operadora',
                address: {
                    line1: 'Address 1',
                    line2: 'Address 2'
                }
            }
        }
    });

</script>

<div class="container">

    <div class="row" style="background-color:#05AED9">
        <div style="text-align:center;">
            <h2><label style="font-size: 28px !

important;color:white;">@Resources.Resources.LabelPaymentData</label></h2>
        </div>
    </div>
    <div class="row" style="background-color:lightgray;padding-left:5%; padding-right:5%;">
        <br />
            <div class="form-group">
                <label>@Resources.Resources.LabelAmount</label>
                <input id="ammount" style="width:100px;" type="text" name="order.amount" 

value="0.00" class="form-control">
            </div>
            <div class="form-group">
                <label>@Resources.Resources.LabelDescription</label>
                <textarea id="description" style="height: 50px !Important;width: 500px;" 

name="transaction.reference" class="form-control"></textarea>
            </div>
            <div class="form-group">
                <label>@Resources.Resources.LabelReference</label>
                <input id="reference" style="width:300px;" type="text" 

name="order.reference" class="form-control" disabled="disabled">
            </div>
            <div class="form-group">
                <label>@Resources.Resources.LabelEmail</label>
                <input style="width:300px;" type="text" name="customer.email" class="form-

control">
            </div>
            
        <input class="btn btn-info" type="button" value="@Resources.Resources.NavPayment" 

onclick="Checkout.showPaymentPage();" />
        <br />
    </div>
</div>

When click button call Checkout.showPaymentPage() and this function needs to Checkout.configure().. this answer is how to set input value "ammount" into Checkout.Configure ??? amount: "10" like that amount: $("#ammount").val() .. please adviced i dont have any idea to do this or how to do it in other way.. thans for your help

I think this may help you http://stackoverflow.com/questions/1184624/convert-form-data-to-javascript-object-with-jquery. You should probably also wrap everything in a `
` tag. — Ted Whitehead, Feb 10 '16 at 19:00
I need to change amount: 10 with the value typed by the user in the field "ammount" — Soporte Contaplus, Feb 10 '16 at 19:02
amount: $("#ammount").val() Field 'order.amount' is invalid : The amount is a required field :( — Soporte Contaplus, Feb 10 '16 at 19:20
How I can loop Checkout.configure() and change the amount value wiht input value ?? — Soporte Contaplus, Feb 10 '16 at 19:24

score 0 · Answer 1 · answered Feb 10 '16 at 20:24

<script src="https://secure.na.tnspayments.com/checkout/version/33/checkout.js"
        data-error="errorCallback"
        data-cancel="cancelCallback">
</script>

<script type="text/javascript">

    $(document).ready(function () {
        $("#reference").val('@ViewBag.reference');

        $("#btn-payment").click(function () {
                     
            Checkout.configure({
                merchant: 'TEST1',
                order: {
                    amount: $("#ammount").val(),
                    currency: 'MXN',
                    description: "Description",
                    id: "Reference"
                },
                interaction: {
                    merchant: {
                        name: 'Operadora',
                        address: {
                            line1: 'Address 1',
                            line2: 'Address 2'
                        }
                    }
                }
            });

            Checkout.showPaymentPage();
        });

    });

    function errorCallback(error) {
        console.log(JSON.stringify(error));
    }
    function cancelCallback() {
        console.log('Payment cancelled');
    }
        
</script>

<div class="container">

    <div class="row" style="background-color:#05AED9">
        <div style="text-align:center;">
            <h2><label style="font-size: 28px !important;color:white;">@Resources.Resources.LabelPaymentData</label></h2>
        </div>
    </div>
    <div class="row" style="background-color:lightgray;padding-left:5%; padding-right:5%;">
        <br />
            <div class="form-group">
                <label>@Resources.Resources.LabelAmount</label>
                <input id="ammount" style="width:100px;" type="text" name="order.amount" class="form-control">
            </div>
            <div class="form-group">
                <label>@Resources.Resources.LabelDescription</label>
                <textarea id="description" style="height: 50px !Important;width: 500px;" name="transaction.reference" class="form-control"></textarea>
            </div>
            <div class="form-group">
                <label>@Resources.Resources.LabelReference</label>
                <input id="reference" style="width:300px;" type="text" name="order.reference" class="form-control" disabled="disabled">
            </div>
            <div class="form-group">
                <label>@Resources.Resources.LabelEmail</label>
                <input style="width:300px;" type="text" name="customer.email" class="form-control">
            </div>
            
        <input id="btn-payment" class="btn btn-info" type="button" value="@Resources.Resources.NavPayment"  />
        <br />
    </div>
</div>

This is the solution :) thanks for your help

how to set value into json from html input value

1 Answers1