AdaloでStripeを使ってクレジットカード決済機能を実装する方法

2024年1月24日

Stripeを使って、ノーコードツール「Adalo」で作るアプリにクレジットカード決済機能を実装する方法を紹介します。

Stripeアカウントの審査が通過済みの方であれば意外と簡単に導入できるTipsです。

AdaloでECサイトを作りたくて、Stripe決済を実装する手順を探している方の開発の一助になれば幸いです！

動画解説バージョンはこちら！！

著者：大熊滉希
ノーコード特化のアプリ/システム開発事業を展開するEPICsの代表。
前職にて新規事業コンサルティングを行う企業で役員を歴任した後、
最小の経営資源で開発を行えるノーコードに可能性を感じEPICsを創業。

運営会社：EPICs合同会社
日本最大級の開発実績を誇るノーコード特化のアプリ/システム開発会社。
最安30万円・最短2週間から、BubbleやAdaloなど多様なツールの中からニーズに合わせた最適な開発を提案・実施している。Adalo公認エキスパートも在籍。

実装イメージ

AdaloとStripeを連携し、Stripe Paymentコンポーネントを設置すると上記のようなクレジットカード情報入力フォームが表示されるようになります！

カード番号と期限を入力して決済ボタンを押すとStripeの決済処理が走り、決済完了ページへ遷移させる、といった感じです。

AdaloでStripe決済を実装する手順

以下の手順で実装します。

Stripeアカウントを作成して審査に通過する
Stripeのプラグインをインストールする
商品購入などの決済処理を実行したいページにStripeコンポーネントを設置する
AdaloとStripeを連携させる
Publishable keyとSecret keyを入力する
決済ボタンのクリックアクションを設定する
Stripeテスト用のカード情報でテスト決済してみる

Stripeアカウントを作成して審査に通過する

Adaloに限らずですが、Stripe決済を導入するにはまずStripeアカウントを作成して以下のようなビジネス情報を入力して審査を受け、認証されたアカウントが必要不可欠です。

事業所在地
業種
事業のウェブサイト
商品、サービス内容の詳細
顧客サポートの詳細
銀行口座情報
本人確認書類の提出
etc…

この記事ではStripeアカウントの作成方法については割愛させていただきますが、アカウント作成の手順や注意点を分かりやすくまとめた解説記事は探せば腐るほどあるので、はじめてStripeアカウントを作る方はそちらを参考にしてください。

Stripeアカウントの審査には数日かかることを念頭に入れて、案件に取り組むときはクライアントにStripeアカウントの作成を早め早めに依頼しておくと良いでしょう。

Stripeのプラグインをインストールする

MarketplaceでStripeコンポーネント「Stripe Kit」をインストールします。

商品購入などの決済処理を実行したいページにStripeコンポーネントを設置する

商品などの購入を確定させるページにStripe Paymentコンポーネントを設置します。

決済金額と通過の設定をします。

Payment Amount：決済金額を入力します。サンプルでは、Current Productのpriceをセットしています。
Currency Type：通過を選択します。日本円（＝JPY）を選択しましょう。

AdaloとStripeを連携させる

StripeコンポーネントのConnect with Stripeと書かれた水色のボタンをクリックした先のページでAdaloとStripeを連携させるための作業を行います。

画面の指示に従って手を動かせば出来る作業なので、筆者が実装した際のキャプチャを何枚か添付して、詳細は割愛させていただきます。

Publishable keyとSecret keyを入力する

ストライプアカウントは正常に接続されました。
安心してこのウィンドウを閉じてください。

前項で連携が成功したら、上のような画面が表示され、Adaloに戻ると青いボタンが消え、「Stripe Connect active」と表示されることを確認できると思います。

そうしたら次は、テストのために「Test Mode」タブを開いてPublishable keyとSecret keyを入力しましょう。

Publishable keyとSecret keyは、Stripeのダッシュボードからコピーできますよ。

決済ボタンのクリックアクションを設定する

Stripe Paymentコンポーネントの設定項目の「Submit Button」をクリックすると、決済が完了したときに実行したいアクションを設定できる欄が現れます。

設定するアクションの例を以下に列挙します！

商品のステータス（例：isSold）をTrueに更新する
購入者（Logged in User）と出品者（Current Productのseller）で取引やチャットルームを新規作成する
Trigger Notificationでプッシュ通知を飛ばす
決済完了ページ（例：Payment Complete）へ遷移させる

Stripeテスト用のカード情報でテスト決済してみる

最後に、Stripeが用意してくれているテスト用のカード情報でテスト決済して検証しましょう！

テストカードの使用方法の公式ドキュメントはこちら：https://stripe.com/docs/testing#cards

※一度決済すると、そのクレカ情報はSripeに保存されて次回以降は自動でセットされます。

日本最大級のノーコード開発実績！ノーコードなら迷わずEPICs

EPICsはノーコードでの開発に特化をしたプロの開発組織です。

従来のスクラッチでの開発でよく発生する「費用が高い」「開発期間が長い」「知識がなく開発に踏み切れない」という課題に対し、ノーコードでの開発という選択肢で皆様の開発を支援します！

そんな弊社に開発相談をいただくメリットは大きく4つあります！

①豊富な開発実績
創業よりノーコード開発を軸に多様な開発を行ってまいりました。SNSやマッチングアプリ、ECアプリなど多様な開発実績がございます。
豊富な経験をもとに、ただ開発を行うにとどまらず、より良い開発を行うためのアドレスや公開後のご不安やご相談にも対応させていただきます！

②最安30万円！通常の1/10~1/5ほどの低コストで開発
コーディングの工程を削減できるノーコードは、最適かつ最小限の人員で対応が可能です。また弊社では豊富な開発実績があるため、経験を活かした開発を行うことで開発費用を大幅に削減することができます。

③最短2週間！圧倒的な短期間で納品
ノーコード開発では複雑なコードを１から書く必要がないため開発工程を省略することができ、開発期間の大幅な短縮が可能です。

④公開後の保守や運用の徹底サポート
アプリは開発後の運用もとても重要です。EPICsでは開発のみならずその後のサポートも対応可能です！
またノーコードで開発したアプリは、スクラッチで開発したアプリに比べて保守や運用にかかる費用を削減することも可能です！

無料で相談する

開発実績を見る

「勉強になった！」「役に立った！」と思っていただけたら、是非シェアもお願いします！