Braintree drop-in error when using onPaymentMethodReceived in ASP.Net webform

Question

I am using the Braintree drop-in and had it all working until I needed to check some client-side validators. I accomplished this via the onPaymentMethodReceived function where I was able to fire some JS to check the validators before continuing with the postback (as per the Braintree documentation).

However, by manuall firing the postback through onPaymentMethodReceived I now receive the following error... Cannot determine payment method. CVV is required.

My HTML code:

<form id="form1" runat="server">
    <div id="payment-container" style="width:400px"></div>
    <asp:Button ID="Submit" runat="server" Text="Submit Payment" />
</form>

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//js.braintreegateway.com/v2/braintree.js"></script>
<script>
    var paymentForm;
    $(function () {
        braintree.setup("<%=ProcessorToken %>", "dropin", {
            container: "payment-container",
            form: "form1",
            onReady: function (integration) {
                paymentForm = integration;
            },
            onPaymentMethodReceived: function (obj) {
                document.forms[0].submit();
            }
        });
    });
</script>

My vb.Net code:

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If IsPostBack Then
        'Process Braintree Payment
        Validate()
        If Page.IsValid Then
            Pay()
        End If
    Else
        'Create Braintree token
        ProcessorToken = Gateway.ClientToken.generate()
    End If
End Sub

Protected Sub Pay()
    'Get the Payment Nonce from the form post
    PaymentNonce = Request.Form("payment_method_nonce")

    Dim tr = New TransactionRequest() With { _
        .Amount = 1.99, _
        .MerchantAccountId = "my_merchant_account", _
        .PaymentMethodNonce = PaymentNonce _
     }

    Dim result As Result(Of Transaction) = Gateway.Transaction.Sale(tr)
    If result.IsSuccess Then
        Response.Write("Payment Successful: " & result.Message)
    Else
        Response.Write("Payment Error: " & result.Message)
    End If
    Submit.Visible = False
End Sub

Public ReadOnly Property Gateway() As BraintreeGateway
    Get
        If _gateway Is Nothing Then
            _gateway = New BraintreeGateway() With { _
                .Environment = Braintree.Environment.SANDBOX, _
                .PublicKey = "my_public_key", _
                .PrivateKey = "my_private_keys", _
                .MerchantId = "my_merchant_id" _
            }
        End If
        Return _gateway
    End Get
End Property

Private _gateway As BraintreeGateway
Protected ProcessorToken As String
Protected PaymentNonce As String

If I remove the following code from the JS, the payment will complete successfully...

            onPaymentMethodReceived: function (obj) {
                document.forms[0].submit();
            }

I removed your sandbox credentials from the post, but they're still available online. I recommend you delete that api key and generate a new one as soon as possible. See [the rotation guide](https://articles.braintreepayments.com/reference/security/rotating-api-keys). — Raymond Berg, Dec 17 '15 at 15:58

score 0 · Answer 1 · edited May 23 '17 at 10:27

_{Full disclosure: I work at Braintree. If you have any further questions, feel free to contact support.}

The guide says that you should do whatever you need to process and pass the data as you see fit. This really isn't as clear in the page you linked, but a little more elaborate on the detailed Javascript global setup guide page that the first page references.

Bottom line: You need to pass the nonce value you received to the server, right now you're receiving it but dropping it. One way to get it to the server is to add a hidden field to the form prior to hitting submit. In JQuery this is:

$('<input>').attr({
    type: 'hidden',
    name: 'payment_method_nonce',
    value: obj
}).appendTo('form1')

I think the guide you linked can probably be improved upon, and I suspect it will be soon. :)

Braintree drop-in error when using onPaymentMethodReceived in ASP.Net webform

1 Answers1