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