コンテンツにスキップ

E-commerce

Astroでは決済APIからリンク決済まで様々なE-commerceのオプションを提供しています。

決済処理オーバーレイ

いくつかの決済サービス(例:Lemon Squeezy、 Paddle)などはウェブサイトから直接ユーザーが購入できる決済フォームを追加します。これらのフォームはウェブサイトに直接埋め込むかオーバーレイとして表示することができます。さらに、これらのフォームは細かなブランディングなどを提供し、ボタンや外部リンク、コードなどの形を通して使うこともできます。

Lemon Squeezy

Lemon Squeezyは決済や国際的な通貨に対応したサブスクリプション、PayPalから国際的な税金の対応まで様々な機能が統合されたプラットフォームです。アカウントダッシュボードからデジタル商品やサービスを管理したり、商品/サービスURLを取得することができます。

基礎的なLemon.js JavaScript ライブラリを使用することで商品を決済リンクから販売することができます。

基本的な使い方

以下に記載している例は、Lemon Sqeezyで「今すぐ購入」リンクをAstroページに追加する例です。ボタンをクリックすることでユーザーは単一の決済を行うことができます。

  1. 下に記載されている<script>タグをページのhead、または body要素に追加します:

    <script src="https://app.lemonsqueezy.com/js/lemon.js" defer></script>

  2. 商品URLに繋がるアンカータグをページに追加してください。また、クリック時に決済オーバーレイを表示するためにlemonsqueezy-buttonクラスを適用してください。

    <a class="lemonsqueezy-button" href="https://demo.lemonsqueezy.com/checkout/...">
  今すぐ購入
</a>

Lemon.js

Lemon.jsはオーバーレイの制御やオーバーレイイベントの管理などの追加機能にも対応しています。

詳細はLemon Squeezy developer getting started guideを確認してください。

Paddle

Paddleはデジタル製品およびサービスを請求するためのソルーションです。Paddleは決済、税金、そしてサブスクリプションの管理をオーバーレイまたはインラインチェックアウトを通じて処理します。

Paddle.jsはPaddleを使用して統合されたサブスクリプション請求体験を構築できる軽量なJavaScriptライブラリーです。

基本的な使い方

以下のコードはPaddleで「購入ボタン」要素をAstroページに追加する例です。リンクをクリックすることで、ユーザーは単一の決済を行うことができます。決済リンクのドメインがPaddleによって承認された後はHTML属性を使用することで好きなページの要素を決済オーバーレイにすることができます。

  1. headかbodyタグに以下の二つの<script>タグを追加します:

    <script src="https://cdn.paddle.com/paddle/v2/paddle.js"></script>
<script type="text/javascript">
  Paddle.Setup({ 
    token: '7d279f61a3499fed520f7cd8c08' // クライアントサイドトークンを追加する
  });
</script>

  2. 任意の要素をPaddleの決済ボタンに変えるために paddle_buttonクラスを適応します:

    <a href="#" class="paddle_button">今すぐ購入</a>

  3. Paddle上の商品のpriceIdとquantityを設定するためにdata-items属性を適応してください。任意でサポートされているHTMLデータ属性をデータの自動入力や、決済成功時の管理、ボタンや決済オーバレイのスタイリングするために追加することもできます。

    <a 
  href="#"
  class="paddle_button"
  data-display-mode="overlay"
  data-theme="light"
  data-locale="en"
  data-success-url="https://example.com/thankyou"
  data-items='[
    {
      "priceId": "pri_01gs59hve0hrz6nyybj56z04eq", 
      "quantity": 1
    }
  ]'
>
  今すぐ購入
</a>

Paddle.js

HTMLデータ属性を渡す代わりに、JavaScriptを使用することで複数の属性を渡したりより一層カスタマイズをすることができます。 インラインチェックアウトを使用することでユーザーのアップグレードワークフローを作成することもできます。

詳しい情報は Paddle.jsを使用したインラインチェックアウトの方法を参照してください

完全なE-commerceソリューション

サイトのショッピングシステムや決済システムの一層深くカスタマイズするためには、完全な金融サービスプロバイダー(Snipcartなど)を追加します。これらのプラットフォームは他のサードパーティーサービス(アカウントマネージメント、パーソライズ、アナリティクス)などと統合することもできます。

Snipcart

Snipcartは強力なデベロッパーファーストのHTML/JavaScriptショッピングカートプラットフォームです。

SnipCartは、輸送プロバイダー、ショッピングカートと他のシステムを繋げるウェブフックの有効化、支払い方法の選択(Paypal, Square, Stripe等)、Eメールテンプレート、そしてテスト環境を提供するサードパーティーサービスと統合させることもできます。

:::tip完成済みのSnipCartソリューションが必要ですか？　SnipCartアカウントと連携するだけで使える機能的なAstroのコミュニティテンプレートのastro-snipcartを確認してみてください。:::

基本的な使い方

以下はSnipcart決済システムと「カートに追加する」「決済する」ボタンの追加方法の例です。この方法を使用することで、ユーザーは直接決済ページに行くのではなく、カートに商品を追加することができるようになります。

Snipcartストアのセットアップなどが含まれた完全なガイドが必要な場合the Snipcartインストールドキュメントを確認してください。

  1. body要素の中に以下のスクリプトタグSnipcartインストールガイドを参照を追加します。

    <body></body>
<script>
  window.SnipcartSettings = {
    publicApiKey: "YOUR_API_KEY",
    loadStrategy: "on-user-interaction",
  };

  (function()...); // Snipcart ドキュメントから提供
</script>

  2. window.SnipcartSettingsをいずれかの提供されているSnipcartの設定を使用してショッピングカートの動作や見た目をカスタマイズします。

    <script>
  window.SnipcartSettings = {
    publicApiKey: "YOUR_API_KEY",
    loadStrategy: "manual",
    version: "3.7.1",
    addProductBehavior: "none",
    modalStyle: "side",
  };

  (function()...); // Snipcard ドキュメントから参照
</script>

  3. クリック時にカートに商品を追加するためにclass="snipcart-add-item"を任意のHTML要素(<button>要素など)に適応します。また、一般的なSnipcart商品属性から値段や説明、その他の項目を含めることもできます。

    <button
  class="snipcart-add-item"
  data-item-id="astro-print"
  data-item-price="39.99"
  data-item-description="A framed print of the Astro logo."
  data-item-image="/assets/images/astro-print.jpg"
  data-item-name="Astro Print"
  data-item-custom1-name="Frame color"
  data-item-custom1-options="Brown|Silver[+10.00]|Gold[+20.00]"
  data-item-custom2-name="Delivery instructions"
  data-item-custom2-type="textarea"
>
  カートに追加
</button>

  4. 決済ポップアップを通じてユーザーが購入プロセスを完了するためにsnipcart-checkoutクラスが適応されたSnipCart決済ボタンを追加します。

    <button class="snipcart-checkout">クリックして決済</button>

Snipcart JavaScript SDK

Snipcart JavaScript SDKを使用することで、SnipcartのCartをプログラム上から設定やカスタマイズできます。

SDKを使用することで以下のようなカスタマイズができます:

  • 現在のSnipcartの状態を入手し、カートに特定の操作を実行する。
  • イベントを待機してコールバックをダイナミックに発動させる。
  • 状態の変化があった場合のCartの完全な状態を入手する。
Astroプロジェクトと統合できる機能の詳しい情報を確認するためにはSnipcartドキュメントを参照してください。

astro-snipcart

Snipcartの利用を簡単にできるastro-snipcartコミュニティパッケージは2つあります。

  • @lloydjatkinson/astro-snipcart Astro テンプレート:このAstroテンプレートは追加で完全なe-commerceソルーションのためのデザインシステムが含まれています。詳細はAstroSnipcartのドキュメントをご覧ください。ドキュメントでは、Snipcart APIをAstroでネイティブに使用できる方法を提供することがastro-snipcartを作成した動機だったと説明されています。

  • @Adammatthiesen/astro-snipcart インテグレーション: このインテグレーションはastro-snipcartテーマから大きな影響を受けて作成されたインテグレーションです。使用することで、既存のプロジェクトに、商品を追加したりカートを管理することができるAstroコンポーネント(またはVueコンポーネント)を追加します。詳細は完全なチュートリアルを確認してください。

コミュニティリソース

貢献する コミュニティ スポンサー