Nondeterministic Palindrome Machine
Unleash awesomeness. Private packages, team management tools, and powerful integrations. Get started with npm Orgs »

stimulus-stripe-elements

1.1.0 • Public • Published

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.

install

npm i stimulus-stripe-elements

Downloadsweekly downloads

29

version

1.1.0

license

MIT

last publish

collaborators

  • avatar
Report a vulnerability