Laravel：将Braintree与Cashier集成

Question

只是好奇，

有人成功地使用laravel/cashier-braintree集成了Braintree吗？

我在这里卡住了：
$user->newSubscription('main', 'monthly')->create($creditCardToken);

按照文档的说明，我想需要类似这样的代码： $data = [ 'firstName' => $request->first_name, 'lastName' => $request->last_name, ]; $creditCardToken = Auth::id(); $planId = [在Braintree中定义的计划ID] $user->newSubscription('main', $planId)->create($creditCardToken, $data);

在官方文档中，我不需要指定任何信用卡信息，因为它已经被弃用了。

"无法创建Braintree客户：未知的payment_method_nonce。\n 过期日期是必需的。\n 信用卡号码是必需的。\n 信用卡必须包括数字、payment_method_nonce或venmo_sdk_payment_method_code。"

糟糕！让我们无论如何添加它： $data = [ 'firstName' => $request->first_name, 'lastName' => $request->last_name, 'creditCard' => [ 'number' => $request->number, 'expirationMonth' => $request->month, 'expirationYear' => $request->year, 'cvv' => $request->cvv, 'billingAddress' => [ 'firstName' => 'Jen', 'lastName' => 'Smith', 'company' => 'Braintree', 'streetAddress' => '123 Address', 'locality' => 'City', 'region' => 'State', 'postalCode' => '12345', ], ], ];

现在我只收到以下反馈：
"无法创建Braintree客户：未知的payment_method_nonce。" 在官方Braintree_Customer::create()中有一些有用的信息。实际上，您可以轻松地实现不使用cachier与braintree_php_guide相同的Braintree。

那怎么办？我必须放弃Cachier吗？

- François Laurent

---

我的错，它被标记为不稳定的。 - François Laurent

Answer 1

使用Braintree的收银员已经在我这里工作了。起初对我来说有点困惑。

其背后的思想是，用户直接将关键信用卡数据发送给Braintree而不是你。因此，你需要一个表单，通过JavaScript将其数据发送到Braintree。之后，你会收到一个令牌（payment_method_nonce）。你必须使用此令牌来向用户计费。

因此，在Laravel 5.2中，我以以下方式实现了它。由于我想使用bootstrap格式，所以实现起来有点复杂。你可以通过使用旧版javascript v2 SDK来更轻松地完成此操作（灵活性较低）。

我的实现方法：

/app/Http/routes.php

Route::get      ('upgrade', 'AccountController@getUpgrade')->name('account.upgrade');
Route::post     ('upgrade', 'AccountController@postUpgrade');

/app/Providers/AppServiceProvider.php

class AppServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        \Braintree_Configuration::environment(env('BRAINTREE_ENV'));
        \Braintree_Configuration::merchantId(env('BRAINTREE_MERCHANT_ID'));
        \Braintree_Configuration::publicKey(env('BRAINTREE_PUBLIC_KEY'));
        \Braintree_Configuration::privateKey(env('BRAINTREE_PRIVATE_KEY'));

        \Laravel\Cashier\Cashier::useCurrency('eur', '€');

        // ....
    }
    // ...
}

/app/Http/Controllers/AccountController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;

class AccountController extends Controller
{
    // ..

    public function getUpgrade()
    {
        return view('account.upgrade');
    }

    public function postUpgrade(Request $request)
    {
        $plan = 'myservice-yearly';

        $nonce = $request->input('payment-method-nonce');

        // optional user data
        $user = $request->user();
        $user_data = [
            'id' =>     'myservice_'.$user->id,
            'email' =>  $user->email,
        ];

        // optional subscription data
        $subscription_data = [];

        $user->newSubscription('main', $plan)
            ->create($nonce, $user_data, $subscription_data);

        return 'thank-you';
    }
}

/resources/views/account/upgrade.blade.php

<h1>Upgrade</h1>

<button class="btn btn-primary" id="paypal_button"><i class="fa fa-paypal"></i> Mit PayPal zahlen</button>
<hr>
{!! Form::open(['route' => 'account.upgrade', 'class'=>'panel-body', 'id'=> 'paymentform']) !!}
    <div class="row">
        <div class="form-group col-xs-4">
            <label class="control-label">credit card number</label>
            <!--  Hosted Fields div container -->
            <div class="form-control" id="card-number"></div>
            <span class="helper-text"></span>
        </div>
    </div>
    <div class="row">
        <div class="form-group col-xs-4">
            <div class="row">
                <label class="control-label col-xs-12">expiration date</label>
                <div class="col-xs-6">
                    <!--  Hosted Fields div container -->
                    <div class="form-control" id="expiration-month"></div>
                </div>
                <div class="col-xs-6">
                    <!--  Hosted Fields div container -->
                    <div class="form-control" id="expiration-year"></div>
                </div>
            </div>
        </div>
    </div>

    <label class="control-label">security code (CCV)</label>
    <div class="row">
        <div class="form-group col-xs-2">
            <!--  Hosted Fields div container -->
            <div class="form-control" id="cvv"></div>
        </div>
    </div>

    <button type="button" class="btn btn-primary">Pay with <span id="card-type">credit card</span></button>

    <input type="hidden" name="payment-method-nonce" value="">
{!! Form::close() !!}

<!-- Load the Client component. -->
<script src="https://js.braintreegateway.com/web/3.4.0/js/client.min.js"></script>

<!-- Load additional components if desired. -->
<script src="https://js.braintreegateway.com/web/3.4.0/js/hosted-fields.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.4.0/js/paypal.min.js"></script>

<script>
    $(function(){
        braintree.client.create({
            authorization: '{{ Braintree\ClientToken::generate() }}'
        }, function (err, clientInstance) {
            if (err) {
                console.error(err);
                return;
            }

            braintree.paypal.create({
                client: clientInstance
            }, function (err, paypalInstance) {
                $('#paypal_button').click(function () {
                    // Tokenize here!
                    paypalInstance.tokenize({
                        flow: 'vault', // Required
                        billingAgreementDescription: 'MyService Premium'
                    }, function (err, payload) {
                        console.log(payload);
                        $('input[name="payment-method-nonce"]').val(payload.nonce);
                        $('#paymentform').submit();
                    });
                });
            });

            braintree.hostedFields.create({
                client: clientInstance,
                styles: {
                    'input': {
                        'font-size': '14px',
                        'font-family': 'helvetica, tahoma, calibri, sans-serif',
                        'color': '#3a3a3a'
                    },
                    ':focus': {
                        'color': 'black'
                    }
                },
                fields: {
                    number: {
                        selector: '#card-number',
                        placeholder: '4111 1111 1111 1111'
                    },
                    cvv: {
                        selector: '#cvv',
                        placeholder: '123'
                    },
                    expirationMonth: {
                        selector: '#expiration-month',
                        placeholder: 'MM'
                    },
                    expirationYear: {
                        selector: '#expiration-year',
                        placeholder: 'JJ'
                    }
                }
            }, function (err, hostedFieldsInstance) {
                if (err) {
                    console.error(err);
                    return;
                }

                hostedFieldsInstance.on('validityChange', function (event) {
                    var field = event.fields[event.emittedBy];

                    if (field.isValid) {
                        if (event.emittedBy === 'expirationMonth' || event.emittedBy === 'expirationYear') {
                            if (!event.fields.expirationMonth.isValid || !event.fields.expirationYear.isValid) {
                                return;
                            }
                        } else if (event.emittedBy === 'number') {
                            $('#card-number').next('span').text('');
                        }

                        // Apply styling for a valid field
                        $(field.container).parents('.form-group').addClass('has-success');
                    } else if (field.isPotentiallyValid) {
                        // Remove styling  from potentially valid fields
                        $(field.container).parents('.form-group').removeClass('has-warning');
                        $(field.container).parents('.form-group').removeClass('has-success');
                        if (event.emittedBy === 'number') {
                            $('#card-number').next('span').text('');
                        }
                    } else {
                        // Add styling to invalid fields
                        $(field.container).parents('.form-group').addClass('has-warning');
                        // Add helper text for an invalid card number
                        if (event.emittedBy === 'number') {
                            $('#card-number').next('span').text('Looks like this card number has an error.');
                        }
                    }
                });

                hostedFieldsInstance.on('cardTypeChange', function (event) {
                    // Handle a field's change, such as a change in validity or credit card type
                    if (event.cards.length === 1) {
                        $('#card-type').text(event.cards[0].niceType);
                    } else {
                        $('#card-type').text('Card');
                    }
                });

                $('#paymentform').submit(function (event) {
                    var value = $('input[name="payment-method-nonce"]').val();
                    console.log(event);
                    console.log('nonce=' + value);

                    if (value == '') {
                        //console.log('preventing');
                        event.preventDefault();
                        hostedFieldsInstance.tokenize(function (err, payload) {
                            if (err) {
                                console.error(err);
                                return;
                            }

                            // This is where you would submit payload.nonce to your server
                            $('input[name="payment-method-nonce"]').val(payload.nonce);
                            $('#paymentform').submit();
                        });
                    } /*else {
                        console.log('should submit');
                    }*/
                });
            });
        });
    });
</script>

参见：

• 设置您的客户端（JS v3 SDK）
• 设置您的客户端（JS v2 SDK）

- Alexander Taubenkorb