将 BraintreeJS paymentnonce 有效负载传递给 ASP.NET Web 表单答案

【问题标题】：Passing BraintreeJS paymentnonce payload to ASP.NET Web Form将 BraintreeJS paymentnonce 有效负载传递给 ASP.NET Web 表单
【发布时间】：2017-02-22 11:04:57
【问题描述】：

我正在尝试使用 ChargeBee 的 API+BraintreeJS 将 Chargebee 与 Braintree 集成（最容易获得 PCI 合规性）。这是可以使用的方法的链接 (https://www.chargebee.com/docs/braintree.html)。根据该文档，我可以得出结论，这些是步骤

1) 使用 Braintree SDK for .NET 生成 clientToken 2) 使用 BraintreeJS 标记所有托管字段并发送到 Braintree API 以获取付款随机数 3) 使用 ChargeBee SDK for .NET 并发送付款随机数以在 ChargeBee 中创建订阅

我已经设法做到（1）和（2），但我的问题是我如何在回发期间读取付款随机数？我试过使用控制器，但仍然得到空值

这是我的代码

<script>
    var form = document.querySelector('#cardForm');
    var authorization = '<%=clientToken%>';

    braintree.client.create({
        authorization: authorization
    }, function (err, clientInstance) {
        if (err) {
            console.error(err);
            return;
        }
        createHostedFields(clientInstance);
    });

    function createHostedFields(clientInstance) {
        braintree.hostedFields.create({
            client: clientInstance,
            styles: {
                'input': {
                    'font-size': '16px',
                    'font-family': 'courier, monospace',
                    'font-weight': 'lighter',
                    'color': '#ccc'
                },
                ':focus': {
                    'color': 'black'
                },
                '.valid': {
                    'color': '#8bdda8'
                }
            },
            fields: {
                number: {
                    selector: '#card-number',
                    placeholder: '4111 1111 1111 1111'
                },
                cvv: {
                    selector: '#cvv',
                    placeholder: '123'
                },
                expirationDate: {
                    selector: '#expiration-date',
                    placeholder: 'MM/YYYY'
                },
                postalCode: {
                    selector: '#postal-code',
                    placeholder: '11111'
                }
            }
        }, function (hostedFieldsErr, hostedFieldsInstance) {
            if (hostedFieldsErr) {
                console.error(hostedFieldsErr);
                return;
            }

            submit.removeAttribute('disabled');

            form.addEventListener('submit', function (event) {
                event.preventDefault();

                hostedFieldsInstance.tokenize(function (tokenizeErr, payload) {
                    if (tokenizeErr) {
                        console.error(tokenizeErr);
                        return;
                    }

                    // If this was a real integration, this is where you would
                    // send the nonce to your server.
                    var noncestr = payload.nonce
                    alert(noncestr); // Confirm nonce is received.

                    console.log('Got a nonce: ' + payload.nonce);
                    $('#paymentmethodnonce').attr("value", noncestr); // Add nonce to form element.
                    form.submit();
                });
                
            }, false);
        });
    }
</script>

<body>
    <div class="demo-frame">
        <form action="/" method="post" id="cardForm">
            <label class="hosted-fields--label" for="card-number">Card Number</label>
            <div id="card-number" class="hosted-field"></div>

            <label class="hosted-fields--label" for="expiration-date">Expiration Date</label>
            <div id="expiration-date" class="hosted-field"></div>

            <label class="hosted-fields--label" for="cvv">CVV</label>
            <div id="cvv" class="hosted-field"></div>

            <label class="hosted-fields--label" for="postal-code">Postal Code</label>
            <div id="postal-code" class="hosted-field"></div>

            <div class="button-container">
                <input type="submit" class="button button--small button--green" value="Purchase" id="submit" />
            </div>
            <asp:Label runat="server" ID="lblResult"></asp:Label>
        </form>
    </div>
    <script src="https://js.braintreegateway.com/web/3.8.0/js/client.js"></script>
    <script src="https://js.braintreegateway.com/web/3.8.0/js/hosted-fields.js"></script>
</body>
</html>

public partial class Default : System.Web.UI.Page
{
    protected string clientToken;
    private BraintreeGateway gateway = new BraintreeGateway
    {
        Environment = Braintree.Environment.SANDBOX,
        MerchantId = "xxx",
        PublicKey = "xxx",
        PrivateKey = "xxx"

    };
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            //generate clienttoken from braintree sdk
            clientToken = gateway.ClientToken.generate();
        }
        else
        {
            var paymentnonce = Request.Form["paymentmethodnonce"];
        }
    }
}

【问题讨论】：

标签： javascript asp.net webforms braintree

【解决方案1】：

_{全面披露：我在 Braintree 工作。如果您还有任何问题，请随时联系support。}

您传递给hostedFieldsInstance.tokenize 的回调使用css selector 查找ID 为paymentmethodnonce 的元素并将生成的随机数存储在其中。但是，您提交的 HTML 中没有具有该 ID 的元素。根据您共享的 HTML，该调用应该会失败，并且您随后使用 Request.Form 检索 paymentmethodnonce 的尝试也将失败。

您应该能够通过在表单中添加一个隐藏的输入元素来解决这个问题，该元素的 ID 为 paymentmethodnonce。

<input type="hidden" id="paymentmethodnonce" />

这将为您的 tokenize 回调提供一个放置 nonce 的位置，并且它将使 nonce 成为表单的一部分，这应该允许您的 Request.Form 成功检索它。

【讨论】：

谢谢。我已经添加了它。这里的问题是我的提交没有做回发。有什么线索吗？
@mraswinc：我无法提供很好的解释，但我发现在我自己的集成中检查IsPostBack 之前有必要运行ClientScript.GetPostBackEventReference(this, string.Empty);。此调用应设置回发事件，以便您可以正确检查它。