Braintree DropIn form displays change Payment Method

Question

I am using Braintree DropIn Payment Form in Meteor Application. It works fine creates the form and is able to create a transaction. However when I submit the form it displays new screen that shows the current payment method and a link to update it. Once the sever returns the call my custom confirmation page is shown.

So the workflow sequence is:
1. DropIn Payment From (Credit card, exp dt, cvv, .. )
2. On click Submit button
3. onPaymentMethodReceived: part of the Setup is called
while it has not completed 4. A new temporary screen is displayed (option to change pymt method)
5. onPaymentMethodReceived : part completes and the custom Payment confirmation screen replaces the previous screen

How can I get rid of this update payment method screen.

Here is the code:

`Template.billPay.onRendered(function() {
  console.log('Satrt billPay Render');
  Meteor.call('getClientToken', function(error, clientToken) {
    if (error) {
      console.log('Client Token Err');
      console.log(error);
    } else {
     braintree.setup(clientToken, "dropin", {
        container: "payment-form",
        onPaymentMethodReceived: function (response) {
          var nonce = response.nonce;
          Session.set('pymtResponse',response.details);
          Session.set('nonce',nonce);

          $('.paySubmit').prop('disabled', true);
           Meteor.call('btCreateCustomer', function(error, success) {
            if (error) {
              throw new Meteor.Error('customer-creation-failed');
            } else {
              Meteor.call('createTransaction', Session.get('nonce'), function(error, success) {
                 Session.set('pymtTxId', success.transaction.id);
                 Session.set('pymtTxId', success.transaction.id);
                }
              });
            }
          });
          return false;
        }
      });
    }
  });
});`

Will you add the server side code in which the client token is generated? — drs6222
Here is the sever code that generates token:<br/> Meteor.methods({ getClientToken: function (clientId) { var generateToken = Meteor.wrapAsync(gateway.clientToken.generate, gateway.clientToken); var options = {}; var btId = Meteor.user().custBtId; console.log('genToken btId '+btId); // options.customerId = btId; try { var response = generateToken(options); // console.log('client token'+response.clientToken); return response.clientToken; } catch (err) { console.log(err.message); return err} } }) — Ashutosh Vats

Ryan Regan Ryan Regan · Accepted Answer · 2017-05-11T16:57:02

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

When a customer inputs a payment method, the selected payment method will display within the DOM element for your Drop-In UI in a compacted view, providing some basic information like the last 2 digits of the credit card number and the card brand, or a PayPal email address if that is selected. The "Change Payment Method" link and compact view is part of the Drop-In UI, and will display along with the customer's previous payment methods until the form is submitted.

That said, as you're using the onPaymentMethodReceived callback, the Drop-In UI will no longer inject a payment_method_nonce DOM element into your form and submit it, so in order to remove the Drop-in UI from your page, you can either hide the DOM element its displaying in by changing its display style value to none, or opt to use teardown which will remove anything created in the setup call, which includes the payment method display.

Braintree DropIn form displays change Payment Method

1 Answers