DEV Community 👩‍💻👨‍💻

DEV Community 👩‍💻👨‍💻 is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Benny Powers 🇮🇱🇨🇦
Benny Powers 🇮🇱🇨🇦

Posted on • Updated on • Originally published at bennypowers.dev

Any Framework, One Stripe Integration

It's Release Day!! 🎉

A happy hedgehog

Take a 👀 at @power-elements/stripe-elements, a package which exposes the Stripe.js API through cross-framework, declarative custom elements.

What that means is that with the help of <stripe-elements>, you can easily integrate Stripe credit card payments into your site, no matter which framework you're using - if any! Even if your payment form is inside Shadow DOM (not yet officially supported by Stripe.js), you can still take payments securely with these custom elements.

And this latest version adds a nice new feature. Introducing: <stripe-payment-request>

Demo

The above demo will try to use <stripe-payment-request> for a nicer UX, but if the browser is unable, will fall back to a classic <stripe-elements> credit card form.

If you want to check out the Payment Request support, you'll need

  • A browser which supports the Payment Request API (or Apple Pay for Safari)
  • At least one credit card saved in the browser (i.e. test card 4242424242424242)
  • You need a Stripe testing publishable key

To use the fallback form, all you need is the publishable key.

And like I mentioned above, stripe-elements web components work with any framework.

For More Info...

For complete API documentation see the README, and for live demos of various use cases, check out the Storybook

Take it for a spin in your next project:

npm i -S @power-elements/stripe-elements
Enter fullscreen mode Exit fullscreen mode
<script type="module" src="https://unpkg.com/@power-elements/stripe-elements?module"></script>
Enter fullscreen mode Exit fullscreen mode

Top comments (5)

Collapse
 
tdotholla profile image
Kiel

Oooooooh i have two products that use Stripe right now...
will definitely try this out...

Great writeup!

Collapse
 
btopro profile image
Bryan Ollendyke

This was on my todo list for this year, thank you so much for checking things off my list for me ;). I'll contribute to this instead once we get to the need for this later this year :)

Collapse
 
bennypowers profile image
Benny Powers 🇮🇱🇨🇦 Author

Looking forward to it!

A few ideas I've been kicking around are adding a type attr like

<stripe-elements type="card|iban|idealbank|cvc|cardNumber|cardExpiry"></stripe-elements>

and using Element#update to sync form data to the element, maybe declaratively with slotted inputs

Collapse
 
btopro profile image
Bryan Ollendyke

Something like this?

<stripe-elements>
  <date-picker slot="cardExpiry" month year no-day name="cardExpiry"></date-picker>
  <input slot="card" name="card"/>
</stripe-elements>
Thread Thread
 
bennypowers profile image
Benny Powers 🇮🇱🇨🇦 Author • Edited on

PCI requires the inputs to be in Stripe's iframe, but I was thinking more something like

<stripe-elements>
  <form slot="billing-info">
    <input name="name"/>
    <input name="address"/>
  </form>
</stripe-elements>

or some such, so that the generated representation (token|source|paymentMethod) has that info inside
see stripe.com/docs/js/tokens_sources/... and stripe.com/docs/js/tokens_sources/...

It would be ideal if, even in a browser that doesn't support the formdata event, we could still get data from custom controls in the form.

In defense of the modern web

I expect I'll annoy everyone with this post: the anti-JavaScript crusaders, justly aghast at how much of the stuff we slather onto modern websites; the people arguing the web is a broken platform for interactive applications anyway and we should start over;

React users; the old guard with their artisanal JS and hand authored HTML; and Tom MacWright, someone I've admired from afar since I first became aware of his work on Mapbox many years ago. But I guess that's the price of having opinions.