2014-10-14 2 views
3

Я только начинаю с пользовательского интерфейса в Braintree. Сторона клиента - javascript, серверная сторона рубина на рельсах.Пользовательский интерфейс Braintree Drop-In требует перезарядки для правильной работы

Моя система очень проста прямо сейчас. Пользователю предоставляется список фактур, которые относятся к ним. Когда счета-фактуры еще не оплачены, они могут нажать «заплатить» и перейти на новую страницу, которая включает в себя интерфейс Drop-In от Braintree. Моя проблема такова: когда пользователь переводится на страницу «оплата», пользовательский интерфейс выпадающего меню не отображается. Если пользователь перезагружает страницу, появляется пользовательский интерфейс ввода.

Почему?

Вот какой код. Это довольно ванили и не сделали еще - просто разогнали в

От счетов/index.html.erb

<td> 
    <% if invoice.paid %> 
    <%= 'Paid' %> 
    <% else %> 
    <%= link_to 'Pay', payment_path(invoice.id) %> 
    <% end %> 
</td> 

От payments_controller:.

class PaymentsController < ApplicationController 
    skip_before_action :verify_authenticity_token 
    before_action :set_invoice, only: [:pay, :checkout] 

    def pay 
     Braintree::Configuration.environment = :sandbox 
     Braintree::Configuration.merchant_id = 'merchant id' 
     Braintree::Configuration.public_key = 'public key' 
     Braintree::Configuration.private_key = 'private key' 
     gon.client_token = Braintree::ClientToken.generate() 
    end 

    def checkout 
     nonce = params[:payment_method_nonce] 
     result = Braintree::Transaction.sale :amount => @invoice.amount, :payment_method_nonce => "nonce-from-the-client" 
     if result.success? 
      message='Payment processed successfully. Thank you!' 
      @invoice.paid=true 
      @invoice.save 
     else 
      message='Unable to process payment. Reason = ' + result.message 
     end 
     redirect_to invoices_path, notice: message 
    end 

    private 
     def set_invoice 
      @invoice = Invoice.find(params[:id]) 
     end 
end 

pay.html.erb:

<h1>Payments</h1> 

<div> 
    <p>Invoice #: <%= @invoice.id %></p> 
    <p>Date: <%= @invoice.date %> </p> 
    <p>Description: <%= @invoice.description %> </p> 
    <p>Amount: <%= @invoice.amount %> </p> 
</div> 

<div class="form-container radius-box glassy-bg small-10 small-centered medium-8 large-6 columns"> 
    <h2 class="mbs">New Transaction</h2> 
    <%= form_tag payments_checkout_path do%> 
     <%= hidden_field_tag 'id', @invoice.id %> 
     <p>Please enter your payment details:</p> 
     <div id="dropin"></div> 
     <%=submit_tag "Pay #{@invoice.amount}$", class: "button mt1" %> 
    <%end%> 
</div> 

и макеты/application.html.erb

<!DOCTYPE html> 
<html> 
    <head> 
      <title>Actionable Software</title> 
       <%= include_gon %> 
       <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %> 
       <%= javascript_include_tag "application", "data-turbolinks-track" => true %> 
       <%= csrf_meta_tags %> 
       <script src="https://js.braintreegateway.com/v2/braintree.js"></script> 


     <meta name='viewport' content='width=device-width, initial-scale=1.0'> 
    </head> 
    <body> 
     <%= render 'layouts/header' %> 

     <div class='container'> 
      <% flash.each do |name, msg| %> 
       <%= content_tag(:div, msg, class: "alert alert-info") %> 
      <% end %> 

      <%= yield %> 
     </div> 

    </body> 
</html> 

ответ

5

Я собираюсь угадать сценарий, который заполняет этот элемент, не написан таким образом, который работает с Turbolinks.

Пробег: opting that page or section out of turbolinks. Или просто отключите его полностью и посмотрите, исправляет ли он его.

+0

Это было, спасибо! – Chris

3

Я столкнулся с той же проблемой в моем приложении .. изменение на вашей странице индекса

<%= link_to 'Pay', payment_path(invoice.id) %> 

в

<%= link_to 'Pay', payment_path(invoice.id), data: { no_turbolink: true } %> 

Это должно заставить страницу получки загрузить completeley при ссылке.

Смежные вопросы