Skip to content
A StimulusJS controller to add Stripe.js and Elements to your page
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
README.md
index.js
package.json

README.md

Stimulus Stripe Elements controller

A Stimulus controller to use Stripe.js and Elements

Install

Assuming StimulusJS is already installed. Add the stimulus-stripe-elements module:

$ yarn add stimulus-stripe-elements

or

$ npm install stimulus-stripe-elements

Next, include the stripe.js script on your pages.

<head>
<script src="https://js.stripe.com/v3/"></script>
</head>

HTML

<form
  data-controller="stripe"
  data-target="stripe.form"
  data-action="stripe#submit"
  data-stripe-public-key="{stripe_public_key}"
  data-stripe-style="
    "base": {
      "fontFamiliy": "system-ui",
      "fontSize": "16px",
      "color": "#3d4852",
      "fontSmoothing": "antialiased",
      "::placeholder": {
        "color": "#CFD7DF"
      },
      "invalid": {
        "color": "#e5424d",
        ":focus": {
          "color": "#303238"
        }
      }
    }
  "
  action="" method="post">
  <div class="field">
    <label for="card-element">Credit or debit card</label>
    <div data-target="stripe.card" data-action="change->stripe#change" class="input">
    <div data-target="stripe.errors" role="alert"></div>
  </div>

  <button name="button" type="submit" class="btn btn--primary">Submit payment</button>
</form>

ERB

<%= form_with(
  url: billing_url,
  local: true,
  data: {
    controller: "stripe",
    target: "stripe.form",
    action: "stripe#submit",
    stripe_public_key: Rails.application.credentials.dig(Rails.env.to_sym, :stripe, :public_key),
    stripe_style: '{
      "base": {
        "fontFamiliy": "system-ui",
        "fontSize": "16px",
        "color": "#3d4852",
        "fontSmoothing": "antialiased",
        "::placeholder": {
          "color": "#CFD7DF"
        },
        "invalid": {
          "color": "#e5424d",
          ":focus": {
            "color": "#303238"
          }
        }
      }
    }'
  }) do |form| %>

  <div class="field">
    <label for="card-element">Credit or debit card</label>
    <div data-target="stripe.card" data-action="change->stripe#change" class="input"> </div>
    <div data-target="stripe.errors" role="alert"></div>
  </div>

  <%= form.button "Submit payment", class: "btn btn--primary", data: { disable_with: "Submitting payment…" } %>
<% end %>

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/eelcoj/stimulus-stripe-elements.

License

This package is available as open source under the terms of the MIT License.

You can’t perform that action at this time.