.png)
・
「Stripeで新しい商品を作成するたびに、WebflowのCMSにも手動でアイテムを追加している…」
「商品情報や価格の更新を両方のプラットフォームで行うのが手間で、更新漏れや入力ミスが心配…」
このように、決済プラットフォームのStripeとWebサイト構築ツールのWebflowを併用する中で、手作業によるデータ連携に限界を感じていませんか？
もし、<span class="mark-yellow">Stripeの商品情報を自動的にWebflowに登録・更新する仕組み</span>があれば、これらの煩わしい二重入力作業から解放され、重要なサイトデザインの改善やマーケティング戦略の立案といったコア業務に集中できる時間を生み出すことができます。
今回ご紹介する自動化の設定は、プログラミングの知識がなくてもノーコードで簡単に設定できるので、ぜひこの機会に導入して、日々の作業をもっと楽にしましょう！
Yoomには<span class="mark-yellow">StripeとWebflowを連携するためのテンプレート</span>が用意されているので、今すぐ試したい方は以下よりバナーをクリックしてスタートしましょう！
StripeとWebflowのAPIを連携させれば、これまで手作業で行っていたデータ登録や更新作業を自動化し、業務を効率化することが可能になります。これにより、商品情報の管理を一元化し、最新の情報をWebサイトに反映させることができます。
ここでは、具体的な自動化の例をいくつかご紹介します。気になる内容があれば、ぜひクリックしてみてください！
Stripeで新しい商品やサービスを作成した際に、その情報を手動でWebflowのCMSにコピー＆ペーストする作業は、手間がかかる上にミスの原因にもなりがちですが、この連携を使えば、<span class="mark-yellow">Stripeでの商品作成をトリガーに、商品名や価格、説明文といった情報をWebflowにアイテムとして自動で追加</span>できます。
これにより、商品登録にかかる時間を短縮し、入力ミスを防ぎながら迅速にサイトへ商品を公開できます。
Stripeで商品の価格や在庫情報、説明文などを更新した際に、Webflow側の情報も手動で修正するのは面倒であり、更新漏れが発生すると顧客からの信頼を損なう可能性があります。
この連携を設定することで、<span class="mark-yellow">Stripeの商品情報が更新されると、Webflow上の対応するアイテム情報も自動で更新</span>されるため、正確で新しい情報をサイト上に維持し、情報管理の手間を削減できます。
それでは、さっそく実際にStripeとWebflowを連携したフローを作成してみましょう！今回はYoomを使用して、ノーコードでStripeとWebflowの連携を進めていきますので、もしまだYoomのアカウントをお持ちでない場合は、こちらの登録フォームからアカウントを発行しておきましょう。
[Yoomとは]
今回は「Stripeで商品が作成されたら、Webflowにアイテムを追加する」フローを作成していきます！
作成の流れは大きく分けて以下です。
ここでは、Yoomとそれぞれのアプリを連携して、操作が行えるようにしていきます。
まずは基本的な設定方法を解説しているナビをご覧ください！
それではここから今回のフローで使用するアプリのマイアプリ登録方法を解説します。
Yoomのワークスペースにログインしたら左のサイドバーにある「マイアプリ」から、右の「+新規接続」をクリックしてください。
アプリ一覧の画面に出たら、右上にある検索ボックスに「Stripe」と入力し、アイコンを見つけてクリックします。
以下の画面が表示されたら、アカウント名にはStripe登録時のメールアドレスなど、任意の名前を入力してください。
アクセストークンはこちらのページ、コピー＆ペーストで入力します。
「マイアプリの作成に成功しました。」の表示が出たら、Stripeとの連携は完了です！
先ほどと同じ手順で、マイアプリ連携からWebflowのアプリアイコンを探してクリックしてください。
アカウント名にはメールアドレスなど任意の名前を、アクセストークンはWebflowにログインして発行し、ペーストします。
任意のアカウントでWebflowにログインし、「Site Settings」をクリックして表示される以下の画面から「Generate API token」をクリックします。
発行するAPIトークンに任意の名前を設定し、「CMS」と「Site」の項目で「Read and Write」の権限を設定してから発行してください。
発行されたAPIトークンをコピーして、Yoomの連携画面に貼り付けて「追加」ボタンを押せばWebflowとの連携も完了です！
Yoomには様々なアプリを活用した自動化のテンプレートが用意されています。今回は以下のテンプレートを試してみましょう。
Yoomにログインした状態で、バナーの「試してみる」をクリックしてみてください。
自動でYoomの画面に遷移して、以下のポップアップが表示されたらテンプレートのコピーは成功です！「OK」をクリックして次のステップに進みましょう。
Yoomのフローボットを動かす引き金となるアクションのことを「アプリトリガー」と呼びます。
このフローボットでトリガーとなっている、Stripeの「商品が作成されたら」というアクションを設定していきましょう。
まずはタイトルを任意で設定し、Stripeと連携するアカウントやアクション内容を確認したら「次へ」を押してください。
Webhookのテストボタンを押してYoomとの連携を確認します。「テスト成功」と出たら「次へ」で進みましょう。
ここで一度Stripeにログインして、テスト用の商品を一つ作成しておきます。今回は例として、以下のような商品を作成しました。
Yoomに戻って「テスト」を押してみてください。「取得した値」として、以下のようにStripeで作成した商品の内容が表示されていれば成功です！
ちなみにYoomでは上記の「取得した値」を、フローボット内の他のアクションで活用できる「アウトプット」と定義しています。
アウトプットを活用することにより、後で新しく情報が更新された場合にも、更新内容を反映した値をフローボットに活用できるため便利ですよ。
アウトプットとは？
ここまで確認できたら「保存する」を押して次のステップに進みましょう。
Stripeで作成された商品情報がYoomに連携されたら、それを活用してWebflowのコレクションにも商品としてアイテムを追加していきましょう。
タイトルを任意で設定し、Webflowと連携するアカウントやアクション内容を確認したら「次へ」を押してください。
「サイトID」には、候補からWebflowの任意のサイトを選択しましょう。
「コレクションID」も同様に、候補から選択して入力します。
次に、フィールド情報を入力していきましょう。それぞれ以下のように取得した値を使って、Stripeに作成された「商品名」と「description」を任意のフィールドに追加していきます。
取得した値をここに入力しておくことで、今後新たにStripe上に商品が作成される度、商品名などの情報が新しいものに更新されていきます。
他にもWebflow側で設定したいフィールドがある場合は、「フィールド情報を追加」をクリックしてください。
必要な設定ができたら、「テスト」ボタンを押してみましょう。取得した値として、以下のようにWebflow側の情報が出ていれば成功です。
Webflowの方にも挙動を確認しにいってみましょう。無事にアイテムが追加されているのが分かりますね。
確認が済んだら、Yoomに戻って「保存する」をクリックしましょう。
お疲れさまでした！すべての必要な設定を完了すると、以下のポップアップが表示されます。「トリガーをON」をクリックして、フローボットを動かしはじめましょう。
これでStripeに商品が追加されたら、自動でWebflow側でもコレクションにアイテムが追加されるようになりました。
今回はStripeからWebflowへデータを連携する方法をご紹介しましたが、逆にWebflowからStripeへのデータ連携を実施したい場合もあるかと思います。その際は、下記のテンプレートも併せてご利用ください。
WebflowのCMSを商品マスタとして管理している場合、Webflowで新しいアイテムを作成するたびにStripeにも商品を手動で登録する作業が発生しますが、この連携によって<span class="mark-yellow">Webflowでのアイテム作成をきっかけに、Stripeに商品が自動で作成</span>されるようになります。
これにより、商品管理のフローをWebflow起点で統一し、Stripeへの登録漏れや二重入力の手間防止につながるでしょう。
WebflowのEコマース機能で新規注文が入った際に、個別の支払いリンクをStripeで手動作成・送付する作業は、注文数が増えるほど負担になります。
この自動化を導入すれば、<span class="mark-yellow">Webflowでの新規注文をトリガーとして、注文情報に基づいたStripeの支払いリンクを自動で生成</span>できるため、決済プロセスを迅速化し、手作業によるミスをなくしてスムーズな顧客対応を実現します。
StripeやWebflowのAPIを活用することで、様々な自動化の実現が可能になります。
Stripeで支払いが行われたら、SlackやMicrosoft Teamsに通知したり、Google スプレッドシートに自動で追加したりできます。また、Gmailでサンクスメールを送信したりすることも可能です。さらに、Stripeで新規顧客が作成されたら、Salesforceにも登録するといった自動化も行えます。
Webflowのフォームが送信されたら、HubSpotにチケットを作成したり、NotionやSalesforceに追加したりできます。また、Webflowでコレクションのアイテムが作成されたら、Google スプレッドシートやAirtableに追加するといった自動化も行えます。
StripeとWebflowの連携を自動化することで、<span class="mark-yellow">これまで手作業で行っていた商品情報の登録や更新といった反復作業の手間を削減し、入力ミスなどのヒューマンエラーの予防ができます。</span>
これにより、担当者はデータ入力作業から解放され、サイトのコンテンツ改善や販売戦略の策定といった、本来注力すべきコア業務に集中できる環境が整います。
今回ご紹介したような業務自動化は、ノーコードツール「Yoom」を使えば、プログラミングの知識がない方でも、画面の指示に従って操作するだけで直感的に業務フローを構築できるので、もし自動化に少しでも興味を持っていただけたなら、ぜひこちらから無料登録して、Yoomによる業務効率化を体験してみてください！
Q：商品画像やバリエーション情報も連携できますか？
はい、可能です。商品画像はStripeから取得した値を追加することでリンクを取得できるため、「ブラウザを操作する」アクションを使ってリンクから画像をダウンロードし、Webflowのアクションで商品画像として設定できます。
サイズや色といったバリエーション情報も、Webflow側で項目が用意されており、Stripe側で情報が入力されていれば、取得した値を用いて連携可能です。
Yoomでブラウザを操作する設定については、こちらのページをご確認ください。
Q：連携が何らかの理由で失敗した場合、エラーに気づく方法はありますか？
Yoomでは進行していたフローボットがエラーとなり、停止された場合にワークスペース発行時に登録したメールアドレス宛に通知が届きます。
その際には該当フローを確認し、エラーの原因や種類が表示される「エラーコード」を確認して修正してください。
詳しくはこちらのページをご確認ください。
Q：Webflow側で独自に設定したカスタムフィールドにも連携できますか？
はい、可能です。Stripe側で商品の説明欄をフォーマット化し、素材やブランド名と言ったWebflowのカスタムフィールドに入る情報を入力していれば、Yoomの「テキストからデータを抽出する」機能を使用して、各項目を情報として「取得した値」として抽出できます。テキストからデータを抽出する方法についてはこちらのページを参考にしてみてください。
.png)
.avif){kind=small}
.png)
.webp)
.webp)
