0

I'm integrating Braintree's v.zero drop-in ui as a payment method and on the checkout form.

I fill-up the credit card details and click "Continue to next step", the ajax submit and Braintree loads simultaneously. After a couple of seconds, Braintree finishes and returns the payment nonce. However, the form doesn't continue it's submission.

enter image description here How can I process Braintree first before the form so that I can get the payment nonce value?

Module code

/**
 * Initializes the Braintree client library for use.
 *
 * @param $payment_method
 *   The payment method instance containing the Braintree credentials to use to
 *   submit API requests to Braintree.
 */
function commerce_braintree_vzero_initialize($payment_method) {
  require_once drupal_get_path('module', 'commerce_braintree_vzero') . '/braintree-php-2.37.0/lib/Braintree.php';

  Braintree_Configuration::merchantId($payment_method['settings']['merchant_id']);
  Braintree_Configuration::publicKey($payment_method['settings']['public_key']);
  Braintree_Configuration::privateKey($payment_method['settings']['private_key']);
  Braintree_Configuration::environment($payment_method['settings']['environment']);
}

/**
 * Implements hook_commerce_payment_method_info().
 */
function commerce_braintree_vzero_commerce_payment_method_info() {
  $payment_methods = array();

  $payment_methods['commerce_braintree_vzero'] = array(
    'title' => t('Braintree v.zero'),
    'description' => t('Payment method using Braintree v.zero.'),
    'active' => TRUE,
  );

  return $payment_methods;
}

/**
 * Returns the default settings for Braintree v.zero.
 */
function commerce_braintree_vzero_default_settings() {
  return array(
    'merchant_id' => '',
    'public_key' => '',
    'private_key' => '',
    'environment' => 'sandbox',
  );
}

/**
 * Payment method settings form.
 *
 * @param $settings
 *   Default settings provided from rules
 *
 * @return array
 *   Settings form array
 */
function commerce_braintree_vzero_settings_form($settings) {
  $form = array();

  // Merge default settings into the stored settings array.
  $settings = (array) $settings + commerce_braintree_vzero_default_settings();

  $form['merchant_id'] = array(
    '#type' => 'textfield',
    '#title' => t('Merchant ID'),
    '#default_value' => $settings['merchant_id'],
    '#required' => TRUE,
  );
  $form['public_key'] = array(
    '#type' => 'textfield',
    '#title' => t('Public key'),
    '#default_value' => $settings['public_key'],
    '#required' => TRUE,
  );
  $form['private_key'] = array(
    '#type' => 'textfield',
    '#title' => t('Private key'),
    '#default_value' => $settings['private_key'],
    '#required' => TRUE,
  );
  $form['environment'] = array(
    '#type' => 'radios',
    '#title' => t('Braintree server'),
    '#options' => array(
      'sandbox' => ('Sandbox - use for testing, requires a Braintree Sandbox account'),
      'production' => ('Production - use for processing real transactions'),
    ),
    '#default_value' => $settings['environment'],
  );

  return $form;
}

/**
 * Payment method callback: checkout form.
 */
function commerce_braintree_vzero_submit_form($payment_method, $pane_values, $checkout_pane, $order) {
  // Load Braintree vzero php library
  commerce_braintree_vzero_initialize($payment_method);

  $clientToken = Braintree_ClientToken::generate();

  $form['test'] = array(
    '#markup' => '<div id="asd"></div>' .
    '<script src="https://js.braintreegateway.com/v2/braintree.js"></script><input type="submit">',
  );

  $form['testt'] = array(
    '#type' => 'textfield',
    '#title' => t('Test'),
  );

  drupal_add_js(array('vzero' => array('clientToken' => $clientToken)), 'setting');

  // Load vzero.js.
  $form['#attached']['js'] = array(
    drupal_get_path('module', 'commerce_braintree_vzero') . '/vzero.js',
  );

  return $form;
}

/**
 * Payment method callback: checkout form submission.
 */
function commerce_braintree_vzero_submit_form_submit($payment_method, $pane_form, $pane_values, $order, $charge) {
  commerce_braintree_vzero_transaction($payment_method, $order, $charge);
  drupal_set_message('success');
}

/**
 * Creates an example payment transaction for the specified charge amount.
 *
 * @param $payment_method
 *   The payment method instance object used to charge this payment.
 * @param $order
 *   The order object the payment applies to.
 * @param $charge
 *   An array indicating the amount and currency code to charge.
 */
function commerce_braintree_vzero_transaction($payment_method, $order, $charge) {
  $transaction = commerce_payment_transaction_new('commerce_braintree_vzero', $order->order_id);
  $transaction->instance_id = $payment_method['instance_id'];
  $transaction->amount = $charge['amount'];
  $transaction->currency_code = $charge['currency_code'];
  $transaction->status = COMMERCE_PAYMENT_STATUS_SUCCESS;

  $transaction->message = 'Test message';

  commerce_payment_transaction_save($transaction);
  return $transaction;
}

JS code

(function ($) {
  Drupal.behaviors.vzero = {
    attach: function (context, settings) {

      if ($('#edit-commerce-payment-payment-method-commerce-braintree-vzerocommerce-payment-commerce-braintree-vzero', context).is(':checked')) {
        console.log("LOADED " + $('#asd').length);
        braintree.setup(settings.vzero.clientToken, "dropin", {
          container: "asd",
          paymentMethodNonceReceived: function (event, nonce) {
            console.log('nonce received ' + nonce);
            $('.form-item-commerce-payment-payment-details-testt input').val(nonce);

            $('body').delegate('#edit-continue', 'click', function(event) {
              event.preventDefault();
              console.log('prevent submit');
              return false;
            });
          }
        });
      }
      else {
        console.log("NOT CHECKED");
      }
    }
  }
})(jQuery);

Note: This here is the complete module if you would like to test. https://github.com/leolandotan/commerce_braintree_vzero

1

this patch successfully adds support for Vzero https://www.drupal.org/node/2449881.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.