こんにちは、タイトルでだいたい言い尽くしましたが、このような悩みを自分および自分の周りでよく聞くようになったので、Stripeの方に教えてもらいながらどうすればいいか整理しました。 あくまで「めちゃくちゃ開発コストをかけない範囲で」の解決策なので多少トリッキーですがお付き合いください。あるいは、この記事を読んで「そろそろちゃんとコストかけて作りこむか」と決めていただいてもいいと思います。基本的にStripeの実装経験がある方向けの記事です。 どういう状況か さて、状況を具体的にするために具体例を挙げていきましょう。 1アカウントあたり月額3000円のSaaSを運営している。 当初はクレジットカードのみ、利用開始日に決済が走る標準の課金体系で進めていた サービスが成長し、法人の取引が増えて「請求書払いいけますか？」と聞かれることが増えた。 ここでいう請求書払いとは、10/1開始で契約したとし

Tailwind CSS Components LibraryFlyonUI is an open-source Tailwind CSS Components Library with semantic classes and powerful JS plugins.

はじめに こんばんは！ 皆さんは以下のようなすぐ消えてしまう要素をDevToolsで確認したいときはどうしますか？ 常に表示されるようにわざわざコードを修正してから、DevToolsで要素を確認したりしていませんか？DevToolsをうまく使うことで、わざわざコードの修正をせずとも簡単に要素の確認をできるのでそのちょっとしたTipsのご紹介です！ ① CSSイベントでの確認方法 まずはCSSイベントで要素の表示制御を行っているパターンでの確認方法です。以下のようにCSSイベントのhoverで表示制御をしている要素を例にDevToolsで確認する方法を見ていきましょう！ import "./style.css"; export const Index = () => { return ( <div> <button className="myButton">Button</button> <

皆さん、フォーム作ってますか？ Webサイトやアプリを作るにあたって避けられないのがForm作成、多くの方が autocomplete を設定するなど、より使いやすいフォームを作成するために尽力されていることと思います。 一方で、悪気なく書いたコードでより使いにくいフォームになってしまっている例が世の中には多く見られます(特に銀行系) 今回は、よくあるフォームの実装を例に、(特に日本語話者にとって)より使いやすいフォームにするためのちょっとした仕様や私が考える対策を書いていこうと思います。 忙しい方のために最初に書いておくと、この記事に書いてあることの多くは autocomplete の仕様を意識した実装をしましょう の一言に集約されます。 多くの方にとっては「何を当たり前のことを」と思われる項目も多いかとは思いますが、当たり前のことがされていないフォームが世の中には多すぎるので、少しでも