首页 / JAVASCRIPT / javascript – Braintree Drop-In UI需要重新加载才能正常工作

javascript – Braintree Drop-In UI需要重新加载才能正常工作

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – Braintree Drop-In UI需要重新加载才能正常工作，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2729字，纯文字阅读大概需要4分钟。

内容图文

我刚刚开始使用Braintree插件用户界面.客户端是javascript,服务器端是ruby on rails.

我的系统现在非常简单.向用户提供与其相关的发票列表.当发票尚未付款时,他们可以点击“付款”并转到包含Braintree Drop-In UI的新页面.我的问题是：当用户进入“付费”页面时,不会显示插入式用户界面.如果用户重新加载页面,则会显示插入式UI.

为什么？

这是一些相关的代码.这是非常香草,还没有完成 – 只是粗暴对待.

来自发票/ 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>

和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>

解决方法:

我将猜测填充该元素的脚本不是以与Turbolinks一起使用的方式编写的.

尝试opting that page or section out of turbolinks.或者只是完全禁用它,看它是否修复它.

内容总结

以上是互联网集市为您收集整理的javascript – Braintree Drop-In UI需要重新加载才能正常工作全部内容，希望文章能够帮你解决javascript – Braintree Drop-In UI需要重新加载才能正常工作所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/752538.html

来源：【匿名】