如何封装Ripple支付JS代码，实现ASP.NET按钮onClientClick调用及文本框取值

我来帮你梳理下问题并给出修复后的代码，你的核心问题主要有几个点：Node.js API在浏览器环境不兼容、文本框取值时机不对，还有对JS对象单引号使用的疑问，咱们一个个解决：

问题1：封装函数后无法运行的核心原因 #

你原来的代码里用到了process.exit()，这是Node.js专属的API，浏览器环境根本没有这个方法，所以封装到浏览器端的函数里直接就会报错，这是导致代码无法运行的关键。

问题2：正确获取ASP.NET TextBox的值 #

你原来的代码是在全局作用域获取文本框的值，这时候页面刚加载，文本框里是初始值，不是用户点击按钮时输入的最新值。必须把取值逻辑放到abc()函数内部，每次点击按钮时才去读取文本框的内容。

问题3：JS对象中使用单引号的逻辑 #

在JavaScript里，对象字面量的键和值使用单引号是完全合法的，和双引号的作用完全一致，只要你统一风格就行，不用担心语法问题。

修复后的完整代码 #

ASP.NET前端部分 #

<asp:TextBox ID="TextBox1" runat="server" PlaceHolder="目标地址"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server" PlaceHolder="目标Tag（可选）"></asp:TextBox>
<asp:TextBox ID="TextBox3" runat="server" PlaceHolder="支付金额"></asp:TextBox>
<asp:Button ID="btnPay" runat="server" Text="发起支付" OnClientClick="abc(); return false;" />

JavaScript部分 #

function abc() {
    // 注意：这里的address和secret请不要直接硬编码在前端！
    // 生产环境必须放在后端处理，前端暴露密钥会导致资产被盗！
    const address = 'rfginNsDt73fZtzp858dT6Y6U67Y1QB7GV';
    const secret = 'sdfdfsdfsdfdsfdsfsdffd';
    var api = new ripple.RippleAPI({ server: 'wss://s1.ripple.com/' });
    const instructions = { maxLedgerVersionOffset: 5 };

    // 每次点击按钮时才获取文本框的最新值
    var destAddress = document.getElementById('<%= TextBox1.ClientID %>').value.trim();
    var destTag = document.getElementById('<%= TextBox2.ClientID %>').value.trim();
    var payAmount = document.getElementById('<%= TextBox3.ClientID %>').value.trim();

    // 先做简单的输入校验
    if (!destAddress || !payAmount) {
        alert('请填写完整的目标地址和支付金额');
        return;
    }

    // 构建支付对象，动态替换文本框的值
    const payment = {
        source: {
            address: address,
            maxAmount: {
                value: payAmount, // 使用文本框输入的金额
                currency: 'XRP'
            }
        },
        destination: {
            address: destAddress, // 使用文本框输入的目标地址
            tag: destTag ? parseInt(destTag) : undefined, // 处理可选的Tag
            amount: {
                value: payAmount,
                currency: 'XRP'
            }
        }
    };

    // 替换Node.js的exit方法为浏览器端的提示
    function quit(message) {
        console.log(message);
        alert('支付提交成功：' + message);
        api.disconnect(); // 记得断开连接
    }

    function fail(message) {
        console.error(message);
        alert('支付失败：' + message);
        api.disconnect();
    }

    // 执行支付流程
    api.connect()
        .then(() => {
            console.log('已连接到Ripple节点');
            return api.preparePayment(address, payment, instructions);
        })
        .then(prepared => {
            console.log('支付交易已准备');
            const { signedTransaction } = api.sign(prepared.txJSON, secret);
            console.log('支付交易已签名');
            return api.submit(signedTransaction);
        })
        .then(quit)
        .catch(fail);
}

重要注意事项 #

⚠️ 绝对不要在前端代码中硬编码你的Ripple密钥（secret）！这会导致你的XRP资产直接暴露，任何人都能转走你的钱。生产环境中，必须把签名和提交交易的逻辑放到ASP.NET后端，前端只负责收集用户输入，然后调用后端接口完成支付流程。

内容的提问来源于stack exchange，提问作者Jitender