Any Framework, One Stripe Integration

Benny Powers ๐Ÿ‡ฎ๐Ÿ‡ฑ๐Ÿ‡จ๐Ÿ‡ฆ - Jan 29 '20 - - Dev Community

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
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player