Using javascript for 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'

mkrl · Accepted Answer · 2018-10-25 06:10:27Z

0

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.

answered Oct 25, 2018 at 6:10

mkrl

7507 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

uno Over a year ago

I have "//= require stripejs.js" within my applications.js file. Still not working -- i also tried without the ".js"

uno Over a year ago

tried adding the entire JS script into the application file and didn't work. Can't figure out why it works in the snippet but not the application

uno Over a year ago

How needed is the stripe-rails gem... shouldn't just the stripe gem work fine for what I have already? What do you think?

uno Over a year ago

installed the stripe-rails gem... doesn't seem to work. I kept getting an error stating "undefined method `secret_key'" ... and would only work when I deleted the stripe.rb file...i added my secret key under stripe_secret_key in my .env file too. not sure if im doing something wrong. This should be working tho. theres probably something very small going on

mkrl Over a year ago

It doesn't seem that the root of your problem is a missing JS file, you can check if it is actually being delivered by loading your application in browser, opening developer console and going into the "Sources" tab, which should have all the assets that are being served to the client. The best way to store your secret keys in development is to use secrets.yml which will contain all your sensible data stackoverflow.com/questions/26498357/… .

|

Collectives™ on Stack Overflow

Using javascript for Stripe Elements

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related