Clever Geek Handbook

Brointree Drop-In UI requires a reboot to work properly

I am just getting started with Braintree UI. Client side - javascript, Ruby on rails server side.

My system is very simple right now. The user is presented with a list of invoices that relate to them. When the invoices have yet to be paid, they can click pay and be taken to a new page that includes Braintree's Drop-In interface. My problem is this: when the user is navigated to the "checkout" page, the dropdown UI is not displayed. If the user reloads the page, the user input interface appears.

Why?

Here's the code. It's pretty vanilla and not done yet - just gross.

From invoices /index.html.erb

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

From the payment 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>

and layouts / 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>
+3


source to share


2 answers


I'm going to guess the script that populates this element is not written in a way that works with Turbolinks.



Try to select this page or section from Turbo Science . Or just disable it completely and see if it fixes it.

+5


source


I faced the same problem in my application .. change in your index page

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

to



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

This will cause the checkout page to load completely when clicked.

+3


source






More articles: