CODEWITHSUNDEEP
javascriptajaxbraintree
pratik-acharya
pratik-acharya

Reputation: 418

Isn't there a way like 'onSubmitEncryptForm' to submit payment form via ajax in Braintree Payment v2 as in previous version?

I had seen there was a way 'onSubmitEncryptForm' to submit payment form using ajax in previous version of Braintree as :

  var braintree = Braintree.create("CLIENT_SIDE_KEY");
    braintree.onSubmitEncryptForm('payment-form-id', ajax_submit_function);

But today while i am trying to integrate new version (v2 or v.zero) I did not find anything regarding ajax submit in documentation for PHP (server side ) and javascript (client side).

I need to integrate payment using only credit cards. Besides, it says "If you are doing more complex things with your form such as your own submit callbacks or custom validation we recommend using a lower-level integration. To do that create a Braintree client and use it to tokenize card data:".

 var client = new braintree.api.Client({clientToken: "CLIENT-TOKEN-FROM-SERVER"});
    client.tokenizeCard({number: "4111111111111111", expirationDate: "10/20"}, function (err, nonce) {
      // Send nonce to your server
    });

I did not get any clue how to use that nonce further.

I would be grateful if somebody helps me overcoming this.Thanks in advance.

Upvotes: 3

Views: 1514

Answers (1)

Nick Tomlin
Nick Tomlin

Reputation: 29211

You can use the callback to tokenizeCard to send an XHR request to your back end, much like you would with onSubmitEncryptForm. Here's an example with a rudimentary PHP backend:

Client Side (documentation)

var client = new braintree.api.Client({clientToken: "<%= @client_token %>"});

// use the card details to request a nonce, passing in the callback we define below:
client.tokenizeCard({number: "4111111111111111", expirationDate: "10/20"}, onCardTokenization);

function onCardTokenization (err, nonce) {
    if (err) { return; }

    // we've gotten the nonce
    // let's go ahead and send it to our backend
    // to process the transaction
    $.post('/checkout', {
      nonce: nonce,
    })
    .success(function () {
        document.body.innerHTML = 'success.'
    })
}

Server Side (documentation)

$nonce = $_POST["nonce"]

$result = Braintree_Transaction::sale(array(
  'amount' => '100.00',
  'paymentMethodNonce' => $nonce
));

Upvotes: 4

Related Questions