Cancel a React Modal with Escape Key or External Click

Lou Mauget Articles, Development Technologies & Tools, React, Tutorial 1 Comment

Web application users are accustomed to canceling a popup (aka dialog or modal) by pressing the escape key, and many modals can even cancel if the user clicks outside it. How does a React developer code that without a plumbing mess between the modal and every visible component beneath it? How do you cancel a React modal with an escape key or external click?

I’m glad you asked because I have an answer. In this blog, I’ll show a pair of easy-to-use custom React hooks that simplify the task.

Stripe Elements Integration

Getting Started With Stripe Elements Integration

David Hoffmann Articles, Development Technologies & Tools, JavaScript, React, Tutorial 2 Comments

Recently, I was involved with a project that required the client to collect payments from their customers. This brought up many questions on the best approach to process orders to accomplish this.

We wondered, is a Stripe Elements integration the answer, or can we avoid fees and process payments ourselves? For the vast majority of companies, ourselves included, yes, Stripe is the answer. The complexity of Payment Card Industry (PCI) Compliance alone makes this a no-brainer. In addition, the development of payment infrastructure is very time-consuming and costly.

In this blog, I will discuss Stripe Elements and its integration and the best way to implement them with React. I will cover basic Stripe information, how to set up a Stripe account, and a brief code overview to help you get on your way to incorporating Stripe…