Subscriptions in Braintree with laravel/cashier-braintree / Laravel 5.2

Question

Need to integrate laravel/cashier-braintree in my Laravel app. Having pretty much no experience with Braintree integration it's really hard to make it work. Can somebody explain in steps how it works, or some tutorial that would be good for this? Tried to follow integration for Stripe, cause they are similar but no success.

This is how my code looks like right now

SubscriptionController.php

public function createToken()
    {
        $clientToken = \Braintree_ClientToken::generate(array('customerId' => ""));
        return $clientToken;
    }

    public function checkout()
    {
        $creditCardToken = $this->createToken();
        $data = [
            'paymentMethodNonce' => $creditCardToken,
            'creditCard' => [
                'number' => Input::get('number'),
                'expirationDate' => Input::get('expiration_date'),
                'cvv' => Input::get('cvv')
            ],
        ];
        $this->user->newSubscription(Input::get('plan'), Input::get('plan'))->create($creditCardToken, $data);

        if ($this->user->subscribed('Small')) {
            return 'Done!';
        }

        var_dump($this->user);
    }

So, I'm getting

Unable to create Braintree customer: Unknown payment_method_nonce.
Expiration date is required.
Credit card number is required.
Credit card must include number, payment_method_nonce, or venmo_sdk_payment_method_code.

If I put in my form name="" I'm getting Unable to create Braintree customer: Unknown payment_method_nonce. So, with name it gets through but something gets wrong with payment_method_nonce. Can't understand why payment won't work with data-braintree-name because just name isn't option because of safety. And if someone knows why I'm getting unknown payment_method_nonce?

Answer 1

Solution:

subscription.blade.php

{!! Form::open(['route' => 'subscription', 'method' => 'post', 'id' => 'checkout'])!!}

<h5>Choose:</h5>

<select name="plan" id="plan" class="form-control">
    <option value="sm">Small</option>
    <option value="lg">Large</option>
</select>

<div class="form-group">
    <h5>Card number:</h5>

    <div id="number" class="form-control"></div>

</div>

<div class="row">
    <div class="col-md-6 col-sm-6">
        <div class="form-group">
            <h5>Date:</h5>

            <div id="expiration-date" class="form-control"></div>

        </div>
    </div>

    <div class="col-md-6 col-sm-6">
        <div class="form-group">

            <div id="cvv" class="form-control"></div>

        </div>
    </div>
</div>

{!! Form::close() !!}

SubscriptionsController.php

public function join()
    {
        $data = [
            'paymentMethodNonce' => Input::get('payment_method_nonce'),
        ];
        $this->user->newSubscription('main', Input::get('plan'))->create(Input::get('payment_method_nonce'), $data);

        return redirect('/');
    }

scripts

<script src="https://js.braintreegateway.com/v2/braintree.js"></script>
<script>
    var colorTransition = 'color 100ms ease-out';

    braintree.setup("@braintreeClientToken", "custom", {
        id: "checkout",
        hostedFields: {

            number: {
                selector: "#number"
            },

            expirationDate: {
                selector: "#expiration-date"
            },

            cvv: {
                selector: "#cvv"
            }
        }
    });
</script>