支払いボタンブロックを使用すると、WooCommerceストアや複雑なチェックアウト設定なしで、SeedProdの任意のページで直接Stripe支払いを受け付けることができます。Stripeアカウントを接続し、金額と説明を設定するだけで、完全に機能する支払いボタンがページに表示され、すぐに集金できます。
このブロックは、完全なeコマースストアのオーバーヘッドなしで、個々の製品、デジタルダウンロード、サービス、イベントチケット、または寄付キャンペーンを販売するのに理想的です。ボタンは、SeedProdの標準ボタンブロックと同じ柔軟なデザインシステムでスタイル設定されており、テンプレート、グラデーション背景、境界線コントロール、アイコンサポートを提供して、ページデザインに完全に一致させることができます。
支払いボタンブロックをページに追加する
SeedProdページに支払いボタンブロックを追加するには、次の手順に従ってください。
ステップ1：ブロックを追加する
デザイン > ブロックの下で、支払いボタンブロックをページの目的のセクションにドラッグアンドドロップします。
ステップ2：コンテンツ設定を構成する
追加したら、支払いボタンブロックをクリックして設定を開きます。コンテンツタブは3つのセクションに分かれています。
支払い設定:
支払い詳細を設定する前に、Stripeアカウントを接続する必要があります。Stripeで接続をクリックして、SeedProdがアカウントを通じて支払いを処理することを承認します。接続したら、次のフィールドに入力できます。
- 金額: 請求する支払い金額を入力します（必須）。この値は、ボタンがクリックされたときにStripeに渡されます。
- 支払い説明: 顧客が支払っている内容の簡単な説明を入力します（必須）。これはStripeダッシュボードと顧客の領収書に表示されます。
- 支払い通貨: 世界の通貨の包括的なリストから、取引の通貨を選択します（デフォルト: USD）。
- 成功URL: 支払い完了後、顧客をリダイレクトするURL（例: ありがとうページ）を入力します。
ボタン:
- ボタンテキスト: ボタンに表示されるメインのラベルを入力します（デフォルト: 「今すぐ支払う」）。
- ボタンサブテキスト: メインのボタンラベルの下に、オプションで2行目の小さなテキストを追加します。
- 配置: ボタンの水平方向の配置（左、中央、右）を、デスクトップ、タブレット、モバイルごとにデバイスごとに設定します。
- サイズ: ボタンのサイズを、Tiny、Small、Medium、Large、X Large、2X Largeから選択します。
アイコン:
- テキスト前アイコン: アイコンピッカーを使用して、ボタンテキストの左側に表示するアイコンを選択します。
- テキスト後アイコン: アイコンピッカーを使用して、ボタンテキストの右側に表示するアイコンを選択します。
ステップ2a: テンプレートスタイルを選択する
テンプレートタブでは、ワンクリックで支払いボタンにあらかじめ作成されたスタイルを適用できます。利用可能なテンプレートには、ピルボタン、フラットボタン、ブル—ボタン、ライトグリーンボタン、グリーンボタン、オレンジボタン、レッドボタン、イエローボタン、ホワイトボタン、グレーボタン、ブラックボタンがあります。テンプレートを適用すると、選択したプリセットに合わせてボタンの色、形状、スタイルが即座に更新されます。
ステップ3：デザインをカスタマイズする
高度な設定タブのスタイルセクションでは、ボタンの視覚的な外観を細かく制御できます。
- タイポグラフィ: ボタンテキストのフォントファミリー、サイズ、太さ、スタイル、行の高さ、文字間隔、大文字/小文字を設定します。
- ボタンのスタイル: フラット、2D、ビンテージ、ゴーストボタンのレンダリングスタイルから選択します。
- 背景色: 通常時とホバー時のボタンの背景色を設定します。
- ボタンのテキストカラー: 通常時とホバー時のボタンラベルの色を設定します。
- ボタンの背景スタイル: ソリッドとグラデーションの背景を切り替えます。グラデーションモードでは、タイプ（放射状/線形）、角度、位置、最初の色と2番目の色、およびそれらの位置ストップが表示されます。
- 垂直パディング: ボタンの内側の上下の余白を制御します。
- 水平パディング: ボタンの内側の左右の余白を制御します。
- 角丸: 角丸の値を調整して、ボタンの角を丸くします。
- ボタンの境界線の幅: ボタンの周りの境界線の太さを設定します。
- ボタンの境界線の色: ボタンの境界線の色を選択します。
- テキストシャドウ: 事前定義されたサイズオプション（なし、ヘアライン、小、中、大、特大、2倍特大）を使用して、ボタンラベルにテキストシャドウを追加します。
- シャドウ: 同じ事前定義されたサイズオプションを使用して、ボタンにボックスシャドウを追加します。
高度な設定タブには、間隔（マージンとパディング）、カスタムCSS属性、デバイスの表示、アニメーションの表示に関する制御も用意されています。
ステップ4：変更を保存
支払いボタンブロックの設定と外観のカスタマイズが完了したら、作業を保存してください。
これで、支払いボタンブロックをページに正常に追加しました！Stripeアカウントを接続し、支払い詳細を設定すれば、ショッピングカートや完全なeコマース設定なしで、ページで実際の取引を受け付けることができます。テンプレート、ボタンのスタイル、アイコンの組み合わせを試して、ページのデザインに自然に収まり、訪問者の購入を促進する支払いボタンを作成してください。