将JavaScript用于Stripe Elements

Question

如何将我的Javascript文件包含到视图中？

我有条纹元素，但没有显示字段。

它适用于摘要，但不适用于我的应用...

 // Create a Stripe client. var stripe = Stripe('324576895435678976FL1LHd'); // Create an instance of Elements. // Create an instance of Elements var elements = stripe.elements(); // Custom styling can be passed to options when creating an Element. // (Note that this demo uses a wider set of styles than the guide below.) var style = { base: { color: '#32325d', lineHeight: '24px', fontFamily: '"Helvetica Neue", Helvetica, sans-serif', fontSmoothing: 'antialiased', fontSize: '16px', '::placeholder': { color: '#aab7c4' } }, invalid: { color: '#fa755a', iconColor: '#fa755a' } }; // Create an instance of the card Element var card = elements.create('card', {style: style}); // Add an instance of the card Element into the `card-element` <div> card.mount('#card-element'); // Handle real-time validation errors from the card Element. card.addEventListener('change', function(event) { var displayError = document.getElementById('card-errors'); if (event.error) { displayError.textContent = event.error.message; } else { displayError.textContent = ''; } }); // Handle form submission var form = document.getElementById('payment-form'); form.addEventListener('submit', function(event) { event.preventDefault(); stripe.createToken(card).then(function(result) { if (result.error) { // Inform the user if there was an error var errorElement = document.getElementById('card-errors'); errorElement.textContent = result.error.message; } else { // Send the token to your server stripeTokenHandler(result.token); } }); }); 

 *, label { font-family: "Helvetica Neue", Helvetica, sans-serif; font-size: 16px; font-variant: normal; padding: 0; margin: 0; -webkit-font-smoothing: antialiased; } #button-element { border: none; border-radius: 4px; outline: none; text-decoration: none; color: #fff; background: #32325d; white-space: nowrap; display: inline-block; height: 40px; line-height: 40px; padding: 0 14px; box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08); border-radius: 4px; font-size: 15px; font-weight: 600; letter-spacing: 0.025em; text-decoration: none; -webkit-transition: all 150ms ease; transition: all 150ms ease; float: left; margin-left: 12px; margin-top: 31px; } #button-element:hover { transform: translateY(-1px); box-shadow: 0 7px 14px rgba(50, 50, 93, .10), 0 3px 6px rgba(0, 0, 0, .08); background-color: #43458b; } #form-element { padding: 30px; height: 120px; } label { font-weight: 500; font-size: 14px; display: block; margin-bottom: 8px; } #card-errors { height: 20px; padding: 4px 0; color: #fa755a; } .form-row { width: 70%; float: left; } .token { color: #32325d; font-family: 'Source Code Pro', monospace; font-weight: 500; } .wrapper { width: 90%; margin: 0 auto; height: 100%; } #stripe-token-handler { position: absolute; top: 0; left: 25%; right: 25%; padding: 20px 30px; border-radius: 0 0 4px 4px; box-sizing: border-box; box-shadow: 0 50px 100px rgba(50, 50, 93, 0.1), 0 15px 35px rgba(50, 50, 93, 0.15), 0 5px 15px rgba(0, 0, 0, 0.1); -webkit-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; transform: translateY(0); opacity: 1; background-color: white; } #stripe-token-handler.is-hidden { opacity: 0; transform: translateY(-80px); } /** * The CSS shown here will not be introduced in the Quickstart guide, but shows * how you can use CSS to style your Element's container. */ .StripeElement { background-color: white; padding: 8px 12px; border-radius: 4px; border: 1px solid transparent; box-shadow: 0 1px 3px 0 #e6ebf1; -webkit-transition: box-shadow 150ms ease; transition: box-shadow 150ms ease; } .StripeElement--focus { box-shadow: 0 1px 3px 0 #cfd7df; } .StripeElement--invalid { border-color: #fa755a; } .StripeElement--webkit-autofill { background-color: #fefde5 !important; } .ElementsApp, .ElementsApp .InputElement { color: #32325d;line-height: 24px;font-family: "Helvetica Neue", Helvetica, sans-serif;font-size: 16px;height: 24px;-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .ElementsApp:not(.is-autofilled) .InputElement:-webkit-autofill { color: #32325d; -webkit-text-fill-color: #32325d; } .ElementsApp .InputElement + .Input-placeholder--ie { opacity: 1;color: #aab7c4; } .ElementsApp .InputElement::-webkit-input-placeholder { opacity: 1;color: #aab7c4; } .ElementsApp .InputElement::-moz-placeholder { opacity: 1;color: #aab7c4; } .ElementsApp .InputElement:-ms-input-placeholder { opacity: 1;color: #aab7c4; } .ElementsApp .InputElement::placeholder { opacity: 1;color: #aab7c4; } .ElementsApp .InputElement.is-invalid { color: #fa755a; } .ElementsApp:not(.is-autofilled) .InputElement.is-invalid:-webkit-autofill { color: #fa755a; -webkit-text-fill-color: #fa755a; } .ElementsApp.is-invalid .Icon-fill--invalid { fill: #fa755a; } 

  <script src="https://js.stripe.com/v3/"></script> <script src="stripejs.js"></script> <form id="form-element" action="/charge" method="post" id="payment-form"> <div class="form-row"> <label for="card-element"> Credit or debit card </label> <div id="card-element"> <!-- a Stripe Element will be inserted here. --> </div> <!-- Used to display form errors --> <div id="card-errors" role="alert"></div> </div> <button id="button-element">Submit Payment</button> </form> 

如果您在没有JS的情况下运行代码，那就是我的应用程序中的样子。 所以我无法正确连接JS

关于如何正确执行此操作的任何建议？

我努力了：

添加“ // = require stripejs”，带有和不带有“ .js”

将整个JS脚本添加到application.js文件中

将脚本直接添加到视图中-出现了一个字段，但可以正常运行。 我不明白为什么它可以在代码段，jsfiddle等中运行，但在我的应用程序中却无法运行

在CMD中，我收到此错误：

 ActiveRecord::RecordNotFound (Couldn't find Listing with 'id'=stripejs): app/controllers/listings_controller.rb:131:in `set_listing' 

Answer 1

Rails正在使用Assets Pipeline交付资产。 您可以在此处的官方指南中阅读有关内容。

有几种方法可以在页面中导入JS，但是最好的方法是使用stripe.js的gem版本。 您可以将自定义JS代码放入/app/assets/javascripts/application.* 。

另一种方法是绕过Assets Pipeline，将您的资产放到/ public，它等效于服务器的根目录。