How to process existing customer payment method when using hosted fields?

Question

I am using Braintree hosted fields to process payments, however I am having issues locating or finding example in how to submit existing payment methods for customers. Using the braintree_customer_id I can retrieve customer information including the creditCards array that contains the last4 digits, cardType, token and other information. Since I am using using hosted fields, the javascript I have used looks something like:

braintree.setup("<?= $clientToken ?>", 'custom', {
  id: 'my-form',
  hostedFields: {
    styles: {
      'input': {
        'font-family': '"Helvetica Neue", Helvetica, Arial, sans-serif',
        'font-size': '14px',
      },
      '::-moz-placeholder': { 'color': '#999' },
      ':-ms-input-placeholder': { 'color': '#999' },
      '::-webkit-input-placeholder': { 'color': '#999' },
    },
    number: {
      selector: '#hosted-fields-number',
      placeholder: 'Credit Card Number'
    },onFieldEvent: handleFieldEvent,
    cvv: {
      selector: '#hosted-fields-cvv',
      placeholder: 'CVV'
    },
    expirationDate: {
      selector: '#hosted-fields-expiration',
      placeholder: 'Expiration Date'
    }
  }, onPaymentMethodReceived: function (obj) {
        var nonce = obj.nonce;
        console.log(obj);
        if(nonce){
            final_checkout(nonce);
        }
    },
    onError: function (){
        alert('wrong details');
    }
});

How do i obtain a payment method nonce needed to be able to execute my payment process? The below example is using hosted fields, how do I handle existing customers using the customer_id and token?

pblesi pblesi · Accepted Answer · 2016-02-11T15:45:50

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

All that is needed to charge a particular customer's payment method is the paymentMethodToken. As this information is not PCI sensitive data, you can pass it directly to your server and make a Braintree_Transaction::salecall. This can be done outside of the hosted fields flow. You can have the customer specify a specific payment method or enter information for a new payment method.

How to process existing customer payment method when using hosted fields?

1 Answers