locked
creating button from payment javascript function in asp.net RRS feed

  • Question

  • User-1513812710 posted

    I have a payment button which I have to put in my listview with each item.  There is a script which creates the button in listview. This script working fine outside listview and creates button but not working inside listview. Could someone please check and review the code.

    <asp:ListView runat="server" ID="lstPayments" GroupPlaceholderID="paymentGroupPlaceHolder"
                                            ItemPlaceholderID="paymentItemPlaceHolder" Visible="false" OnItemDataBound="lstPayments_ItemDataBound"
                                            OnItemCommand="lstPayments_ItemCommand">
                                            <LayoutTemplate>
                                                <table class="tblBids">
                                                    <tr>
                                                        <th>Amount (INR)</th>
                                                        <th>Remarks</th>
                                                        <th>Date</th>
                                                        <th>Status</th>
                                                        <th>Attachments</th>
                                                        <th></th>
                                                        <th></th>
                                                    </tr>
                                                    <asp:PlaceHolder ID="paymentGroupPlaceHolder" runat="server"></asp:PlaceHolder>
                                                </table>
                                            </LayoutTemplate>
                                            <GroupTemplate>
                                                <tr>
                                                    <asp:PlaceHolder ID="paymentItemPlaceHolder" runat="server"></asp:PlaceHolder>
                                                </tr>
                                            </GroupTemplate>
                                            <ItemTemplate>
                                                <td>
                                                    <asp:Label ID="lblPaymentAmount" Text='<%# Eval("PaymentAmount") %>' runat="server" /></td>
                                                <td>
                                                    <asp:Label ID="lblPartnerRequestRemarks" Text='<%# Eval("PartnerRequestRemarks") %>' runat="server" /></td>
                                                <td>
                                                    <asp:Label ID="lblPaymentRequestedDate" Text='<%# Eval("PaymentRequestedDate") %>' runat="server" /></td>
                                                <td>
                                                    <asp:Label ID="lblPaymentStatus" Text='<%# Eval("PaymentStatus") %>' runat="server" /></td>
                                                <td>Dispaly documents attached
                                                </td>
                                                <td>
                                                    
                                                    <script
                                                        src="https://checkout.razorpay.com/v1/checkout.js"
                                                        data-key="xxxxxxxxxxxxxxxxx"
                                                        data-amount='<%# Eval("PaymentAmount") %>'
                                                        data-name="Razorpay"
                                                        data-description="Purchase Description"
                                                        data-order_id="<%=orderId%>"
                                                        data-image="https://razorpay.com/favicon.png"
                                                        data-theme.color="#F37254">
    
                                                    </script>
                                                </td>
                                                <td>
                                                    <asp:HyperLink ID="hplRejectPayment" runat="server" CommandName="AcceptContract">Reject</asp:HyperLink></td>
                                            </ItemTemplate>
                                        </asp:ListView>

    Below is the code behind

     protected void lstPayments_ItemDataBound(object sender, ListViewItemEventArgs e)
            {
                if (e.Item.ItemType == ListViewItemType.DataItem)
                {
                    Label lbl = e.Item.FindControl("lblPaymentAmount") as Label;
                    CreatePaymentButton(Convert.ToInt32(lbl.Text));
                }
            }
    
            public void CreatePaymentButton(int amount)
            {
                ServicePointManager.SecurityProtocol = SecurityProtocolType.Tls12;
                Dictionary<string, object> input = new Dictionary<string, object>();
                input.Add("amount", amount); // this amount should be same as transaction amount
                input.Add("currency", "INR");
                input.Add("receipt", "12121");
                input.Add("payment_capture", 1);
    
                string key = "xxxxxxxxxxxxxxxxxxxx";
                string secret = "yyyyyyyyyyyyyyy";
    
                RazorpayClient client = new RazorpayClient(key, secret);
    
                Razorpay.Api.Order order = client.Order.Create(input);
                orderId = order["id"].ToString();
            }

    Thursday, March 5, 2020 10:37 AM

All replies

  • User-1330468790 posted

    Hi, anuragacc123,

     

     

    I have checked your code and found that you misused below code.

    "<%=orderId%>"

    The '<%= ... %>' displaying expression is an equivalent of the embedded code block that contains only the Response.Write(…) statement.

    This is the simplest way to display information such as a single string, an int variable, or a constant. 

    However, the '<%= ... %>' expressions are evaluated at render time but you don't have a variable called 'orderId' at that time.

    Instead, I suggest you use the '<%# ... %>' expressions which are evaluated at DataBind() time and are not evaluated at all if DataBind() is not called.

    The details of the difference between these two expression can be found below:

    https://docs.microsoft.com/en-us/archive/blogs/dancre/the-difference-between-and-in-asp-net

     

     

    For your code, you have to modify two places:

    1. Change the assignment expression for 'data-order_id' in the script.
    2. Modify the method 'lstPayments_ItemDataBound'

      

     

    More details, you can refer to below code (Focus on codes in yellow background)

    .aspx page:

    <asp:ListView runat="server" ID="lstPayments" GroupPlaceholderID="paymentGroupPlaceHolder"
                    ItemPlaceholderID="paymentItemPlaceHolder" >
                    <LayoutTemplate>
                        <table class="tblBids">
                            <tr>
                                <th>Amount (INR)</th>
                                <th>Remarks</th>
                                <th>Date</th>
                                <th>Status</th>
                                <th>Attachments</th>
                                <th></th>
                                <th></th>
                            </tr>
                            <asp:PlaceHolder ID="paymentGroupPlaceHolder" runat="server"></asp:PlaceHolder>
                        </table>
                    </LayoutTemplate>
                    <GroupTemplate>
                        <tr>
                            <asp:PlaceHolder ID="paymentItemPlaceHolder" runat="server"></asp:PlaceHolder>
                        </tr>
                    </GroupTemplate>
                    <ItemTemplate>
                        <td>
                            <asp:Label ID="lblPaymentAmount" Text='<%# Eval("PaymentAmount") %>' runat="server" /></td>
                        <td>
                            <asp:Label ID="lblPartnerRequestRemarks" Text='<%# Eval("PartnerRequestRemarks") %>' runat="server" /></td>
                        <td>
                            <asp:Label ID="lblPaymentRequestedDate" Text='<%# Eval("PaymentRequestedDate") %>' runat="server" /></td>
                        <td>
                            <asp:Label ID="lblPaymentStatus" Text='<%# Eval("PaymentStatus") %>' runat="server" /></td>
                        <td>Dispaly documents attached
                        </td>
                        <td>
    
                            <script
                                src="https://checkout.razorpay.com/v1/checkout.js"
                                data-key="YOUR_KEY_ID"
                                data-amount='<%# Eval("PaymentAmount") %>'
                                data-name="Razorpay"
                                data-description="Purchase Description"
                                data-order_id='<%# CreatePaymentButton((int)Eval("PaymentAmount")) %>'
                                data-image="https://razorpay.com/favicon.png"
                                data-theme.color="#F37254">
    
                            </script>
                        </td>
                        <td>
                            <asp:HyperLink ID="hplRejectPayment" runat="server" CommandName="AcceptContract">Reject</asp:HyperLink>
    
                        </td>
                    </ItemTemplate>
                </asp:ListView>

    Code behind: (Simulation of data, not important except the removal of the method "ItemDataBound")

    private static DataTable _repeaterDT;
            public static DataTable RepeaterDT
            {
                get
                {
                    if (_repeaterDT is null)
                    {
                        _repeaterDT = new DataTable();
    
                        _repeaterDT.Columns.Add("PaymentAmount", typeof(int));
                        _repeaterDT.Columns.Add("PartnerRequestRemarks", typeof(string));
                        _repeaterDT.Columns.Add("PaymentRequestedDate", typeof(DateTime));
                        _repeaterDT.Columns.Add("PaymentStatus", typeof(string));
    
                        _repeaterDT.Rows.Add(1000, "Remark1", new DateTime(2020, 2, 2), "Unpaid");
                        _repeaterDT.Rows.Add(2000, "Remark2", new DateTime(2020, 2, 4), "ToBeChecked");
                        _repeaterDT.Rows.Add(3000, "Remark2", new DateTime(2020, 2, 5), "Success");
                        _repeaterDT.Rows.Add(4000, "Remark2", new DateTime(2020, 2, 6), "Failed");
    
                    }
    
                    return _repeaterDT;
                }
                set
                {
                    _repeaterDT = value;
                }
            }
    
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    lstPayments.DataSource = RepeaterDT;
                    lstPayments.DataBind();
                }
            }

    //I removed the ItemDataBound method since it is useless for this problem protected string CreatePaymentButton(int amount) { ServicePointManager.SecurityProtocol = SecurityProtocolType.Tls12; Dictionary<string, object> input = new Dictionary<string, object>(); input.Add("amount", amount); // this amount should be same as transaction amount input.Add("currency", "INR"); input.Add("receipt", "12121"); input.Add("payment_capture", 1); string key = "YOUR_KEY_ID"; string secret = "YOUR_SECRET"; RazorpayClient client = new RazorpayClient(key, secret); Razorpay.Api.Order order = client.Order.Create(input); return order["id"].ToString(); }

    Demo:

     

    Hope this can help you.

    Best regards,

    Sean

    Friday, March 6, 2020 11:26 AM