将JavaScript用于Stripe Elements

Question

How to include my Javascript file into the views?

I have my stripe elements but the fields aren't showing.

It works in the snippet but not in my app...

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

if you run the code without the JS, that is what it looks like in my app. So im not connecting the JS correctly

any suggestions on how I do this the right way?

I have tried:

adding "//= require stripejs" with and without ".js"

adding entire JS script into application.js file

adding script directly into view - a field appeared but would function correctly. I can't understand why it works within the snippet, jsfiddle, etc. but not within my application

In the CMD I receive this error:

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

Answer 1

Rails is using Assets Pipeline to deliver assets. You can read about it in the official guides here .

There are several ways to import JS in your pages, however, the best approach would be to use the gem version of stripe.js. You can place your custom JS code into your /app/assets/javascripts/application.* .

The other way is to bypass Assets Pipeline and drop your assets into /public which is equivalent to the root directory of your server.