Question

我目前正在使用braintree托管字段，将信用卡嵌入我的应用程序。我正在看我如何将支付现时从视图传递给控制器。我有javascript似乎触发braintree api并将nonce返回到我的警报但我现在需要将其推送到控制器以执行最后一段代码

在控制器创建方法中我有

def create
    result = Braintree::PaymentMethod.create(
        :customer_id => current_user.customer_cim_id,
        :payment_method_nonce => nonce_from_the_client,
        :cardholder_name => "#{current_user.first_name} #{current_user.last_name}",
        :options => {
            :make_default => true,
            :fail_on_duplicate_payment_method => true
        }
    )

新观点

- title t('.title')
= form_for(@payment_method, :url => myaccount_payment_methods_path(@payment_method), :html => {:id => 'cardForm'}) do |f|
  = render :partial => 'form', :locals => {:f => f}
/ Load Hosted Fields component.
%script{:src => '//js.braintreegateway.com/web/3.0.0-beta.10/js/hosted-fields.min.js'}

表单视图

.mdl-grid
  .panel
    %header.panel__header
      %h1 Card Payment
    .panel__content
      .textfield--float-label
        %label.hosted-field--label{:for => "card-number"}
          %i.material-icons credit_card
          Card Number
        #card-number.hosted-field
      .textfield--float-label
        %label.hosted-field--label{:for => "expiration-date"}
          %i.material-icons date_range
          Expiration Date
        #expiration-date.hosted-field
      .textfield--float-label
        %label.hosted-field--label{:for => "cvv"}
          %i.material-icons lock
          CVV
        #cvv.hosted-field
    %footer.panel__footer
      = f.submit class: 'pay-button', id: 'button-pay', disabled: true

的application.js

var form = document.querySelector('#cardForm');
var submit = document.querySelector('input[type="submit"]');

braintree.client.create({
    authorization: 'sandbox_92dswc7q_mbmb637xwpzgxbrd'
}, function (err, clientInstance) {
    if (err) {
        console.error(err);
        return;
    }

    // Create input fields and add text styles
    braintree.hostedFields.create({
        client: clientInstance,
        styles: {
            'input': {
                'color': '#282c37',
                'font-size': '16px',
                'transition': 'color 0.1s',
                'line-height': '3'
            },
            // Style the text of an invalid input
            'input.invalid': {
                'color': '#E53A40'
            },
            // placeholder styles need to be individually adjusted
            '::-webkit-input-placeholder': {
                'color': 'rgba(0,0,0,0.6)'
            },
            ':-moz-placeholder': {
                'color': 'rgba(0,0,0,0.6)'
            },
            '::-moz-placeholder': {
                'color': 'rgba(0,0,0,0.6)'
            },
            ':-ms-input-placeholder ': {
                'color': 'rgba(0,0,0,0.6)'
            }

        },
        // Add information for individual fields
        fields: {
            number: {
                selector: '#card-number',
                placeholder: '1111 1111 1111 1111'
            },
            cvv: {
                selector: '#cvv',
                placeholder: '123'
            },
            expirationDate: {
                selector: '#expiration-date',
                placeholder: '10 / 2019'
            }
        }
    }, function (err, hostedFieldsInstance) {
        if (err) {
            console.error(err);
            return;
        }

        hostedFieldsInstance.on('validityChange', function (event) {
            // Check if all fields are valid, then show submit button
            var formValid = Object.keys(event.fields).every(function (key) {
                return event.fields[key].isValid;
            });

            if (formValid) {
                $('.pay-button').prop("disabled", false);
            } else {
                $('.pay-button').prop("disabled", true);
            }
        });

        hostedFieldsInstance.on('empty', function (event) {
            $('header').removeClass('header-slide');
            $('#card-image').removeClass();
            $(form).removeClass();
        });

        hostedFieldsInstance.on('cardTypeChange', function (event) {
            // Change card bg depending on card type
            if (event.cards.length === 1) {
                $(form).removeClass().addClass(event.cards[0].type);
                $('#card-image').removeClass().addClass(event.cards[0].type);
                $('header').addClass('header-slide');

                // Change the CVV length for AmericanExpress cards
                if (event.cards[0].code.size === 4) {
                    hostedFieldsInstance.setPlaceholder('cvv', '1234');
                }
            } else {
                hostedFieldsInstance.setPlaceholder('cvv', '123');
            }
        });

        submit.addEventListener('click', function (event) {
            event.preventDefault();

            hostedFieldsInstance.tokenize(function (err, payload) {
                if (err) {
                    console.error(err);
                    return;
                }

                // This is where you would submit payload.nonce to your server
                alert('Got a nonce: ' + payload.nonce);
                // If this was a real integration, this is where you would
                // send the nonce to your server.
                console.log('Got a nonce: ' + payload.nonce);
            });
        }, false);
    });
});

Answer 1

_{完全披露：我在Braintree工作。如果您有任何其他问题，请随时联系support。}

在application.js中的alert行之后，您需要向服务器发送包含付款方式nonce的请求。例如，您可以使用Ajax执行此操作：

$.ajax({ type: "POST", url: your_payment_url, data: {"payment_method_nonce":payload.nonce} });

然后在您的Ruby on Rails控制器中，您可以使用请求中的付款方式nonce调用Transaction.sale来完成交易。有关托管字段的详细信息，请查看此link。

编辑Vault问题：

如果您使用的是保险柜，则每次都可以向用户收取费用而无需付款。创建客户后（通过控制面板或通过Customer.create，您可以直接通过Customer对象的payment_methods属性检索payment_method_token。要稍后向用户收费，请在服务器上检索他们的payment_method_token，致电Transaction.sale，传递payment_method_token。

result = Braintree::Transaction.sale(
  :amount => "your_amount",
  :payment_method_token => "payment_method_token"
)

将Braintree nonce传递给rails控制器上的ruby

1 个答案: