# 購入スクリーン
この画面は、ユーザーが希望する提供物の購入プロセスを完了する場所です。Stripeコンポーネントが含まれており、Component Marketplaceで見つけることができます。
{% hint style="info" %}
Stripeコンポーネントを利用するには、Stripeアカウントが必要です
{% endhint %}
## コンポーネント
### **テキストコンポーネント — 2つのコンポーネント**
「ラベル」テキストコンポーネントは、カスタム式を使用しています — クラス価格 + サービス手数料（この場合は$3.13）。サービス手数料を請求したくない場合は、カスタム式を削除し、テキストボックスで「Current Class > Price」を選択してください。
同様の計算がカスタム式で行われるのは、合計取引コストを表示するテキストコンポーネントです。
### Stripeコンポーネント — Stripe支払い
このヘルプドキュメントの指示に従ってStripeコンポーネントを設定してください。ここでは、支払われる金額、請求の説明、受領メール、および支払い成功後に発生するアクションを制御できます。
⚡ **送信ボタンのアクション**
各アクションは画面にリストされている順に発生します。これらのアクションは、支払いが成功した場合のみ発生します。
1. トランザクションコレクションにレコードを作成するための作成アクション。関連するトランザクションプロパティを埋めるために、テキストとマジックテキストの組み合わせが使用されます。
2. クラスレコードを更新し、利用可能なスポットを減らすための更新アクション。
3. 「Congrats」画面へのリンクアクション。
## ヒント＆トリック
Stripeコンポーネントを設定せずに購入フローをテストすることができます：
「DEMO “PAY”」ボタンは、Stripeコンポーネントと同じ設定とアクションで設定されていますが、実際の購入は行われません。クラスのためにお金を集めるには、Stripeコンポーネントが設定されていることを確認してください。
「DEMO “PAY”」ボタンでのテストが終了したら、公開されたアプリからボタンと灰色のヘルプテキストを削除してください。