”Snipcart” 静的サイトHTML上で柔軟なショッピングカートを実装

HTMLにコードを埋め込むだけでカートを実装可能。ヘッドレスEC”Snipcart”

SnipcartはHTMLファイルにJavaScriptコードを貼り付けるだけでSPAによるカート画面を実装できる、ヘッドレスEC向けのカート画面・決済画面実装サービスです。

Add a Shopping Cart to Any Website in Minutes

Snipcart lets you sell physical products all over the world. Shipping, inventory and discount features help you manage orders. Snipcart lets you sell physical or digital subscriptions and handle recurring payments. Customer dashboards let your clients manage their subscriptions on your site Snipcart lets you sell digital products.

snipcart.com

Add a Shopping Cart to Any Website in Minutes

具体的には、HTMLでのボタンタグなどに様々な属性を記述して持たせて、そこで定義された属性によって渡された情報をもつカート画面が生成されるという形。

Snipcartは現在バージョン3となっており、バージョン2まで利用されていたjQueryとは決別しました。

またSnipcartは2021年にWebサイトビルダーのDudaにサービスが買収される形となっており、コロナの影響で伸びているサービスといえるでしょう。

Snipcart自体は決済機能を持たない”ヘッドレスECカート”

Snipcartが提供するのはカート画面のみ。決済サービスとの連携が別途必要

Snipcartが提供するのは、あくまで商品追加や数量の変更、請求先・配送先が設定できる「カート画面」のみ。

いわゆるフロントカート画面のみを提供する、「ヘッドレスECカート」（ヘッドレスコマース）の位置づけのサービスになります。

そのため、Snipcart単体では決済処理を行うことができず、他社の決済サービスとAPI経由で紐付ける必要があります。

ユーザーがSnipcartで入力した内容に基づいて情報が決済サービスに送信されます。他社の決済サービスを決済ゲートウェイとしてのみ利用する形です。（他社決済サービスをバックエンドとして利用）

たとえばShopifyでは、ストアフロント画面は提供せず、APIと管理画面のみを提供する”Shopify Lite”というプランがあります。Shopifyを決済ゲートウェイとしてのみ利用するためのプランといえるでしょう。

Snipcartとの自動紐付けに対応している決済サービス

日本国内で利用可能な、Snipcartとの自動紐付けに対応している決済サービスは下記。

Stripe
Paypal
Square
Mollie

Custom payment gatewayとして他決済ゲートウェイとの紐付けも可能なようです。

PayPalとSnipcartの紐付け: APIキーによる接続

例として、PayPalを決済ゲートウェイとしてSnipcartへ紐付ける方法の流れ概要をご紹介。SnipcartはPayPal Payment ProおよびPayPal Express Checkoutをサポートしています。

PayPal configuration – Snipcart Documentation

まず、PayPalアカウント側でSnipcartでのAPI実行を許可するアクセス権を付与する必要があります。

PayPalアカウントから、新しいサードパーティへの許可を追加するの画面へ移動。

サードパーティのユーザー名として、”geeks_api1.snipcart.com”を入力して検索しましょう。

サードパーティへの許可項目として、下記の項目にチェックをいれてSnipcartへのAPI許可を付与します。

これでSnipcartへ許可を与えることができました。

SnipcartとPayPalを接続させるためのPayPal APIキーは、PayPal Developer Dash board > Apps & Credentials から取得することができます。右上のトグルボタンを”Live”とし、本番稼働用のAPIキーをコピーしておきましょう。

これでPayPalでの設定は完了。Snipcartのダッシュボードで、PAYMENT GATEWAYからPayPalを選択。メールアドレスなどの情報を入力します。

先程取得したPayPal本番用のAPIキーを”API KEY”の項目へ入力することが必要です。

PayPalに決済情報を渡すには、SnipcartのモードをTESTから”LIVE”へと本番稼働させた状態の情報でWebサイト上にコーディングする必要があります。ご注意ください。

Snipcartでカート画面を構築するメリット

これだけだと、Snipcart採用に何のメリットがあるの？普通にStripe Checkoutなどで決済フォームを埋め込めば良いだけでは？と思われる方がいらっしゃるかもしれません。

Snipcartでカート画面を実装するメリットは下記のとおり。

ヘッドレスECを構築する際、面倒なカート画面の設計と実装をSnipcartに任せられる
静的Webサイト上においてもカート機能を実装できる
Stripe Checkoutでは難しいカート画面・決済画面を柔軟にカスタマイズできる

Stripe Checkout Formでは複数商品をカートに入れることが出来ず、1商品ごとにチェックアウトする形になる。チェックアウト画面のカスタマイズ方法もSnipcartの方が豊富。

SnipcartとStripe Checkout Form、Shopify Buy Buttonの比較メモ書き

Snipcartを静的サイト（LP）に埋め込んだヘッドレスカート事例

私Nakataの実績として、下記のランディングページにSnipcartを導入してヘッドレスECを完成させました。

ARコースター "PLANET BOOTH" 特設サイト

プラモデルを「ジオラマ」として遊ぶことができるARマーカー付の台座（コースター）。ARコースター®"PLANET BOOTH"。

pb.nyar835.com

※ 現在はSnipcartのプランを解約しているため、カート画面は読み込まれない状態になっています。

決済ゲートウェイはPaypalを採用しています。

ページ自体はHTML&CSS（TailwindCSS）でコーディングしているのみで、完全な静的ページとなっています。ホスティングはNetlifyで行っています。

コードは私NakataのGitHub上で公開しているので、宜しければチェックしてみてください。

nyar-arcoaster-pb

atsuyamaru ⋅ 3 months ago

Snipcartの利用料金

ペイメントゲートウェイ利用料金 + 取引金額の2%

Snipcartの利用料金は、1取引につき取引金額の2%に加えて、各ペイメントゲートウェイの手数料が発生します。ペイメントゲートウェイ利用料金に上乗せされる形です。

2% / transactions + Payment gateway fees

Pricing - Snipcart

なかなか割高なサービスかもしれませんね…

$10の最低月額金額あり

Snipcartには、たとえ取引が一切発生しなかった月でも料金が発生する「最低月額金額」が設けられています。

有料プラン契約後のSnipcart管理画面より

Standardプランの場合、最低月額料金として$10が発生します。先のペイメントゲートウェイ利用料金 + 取引金額の2%の料金が$10に届かなかった場合でも、必ず$10は毎月発生するという形になります。

Snipcartでカート画面を作成するステップ

Snipcartでのカート画面作成は非常にかんたんです。

Snipcartのインストールスクリプトを記述
日本円に対応させるなど設定変更
商品追加ボタンを作成する

Snipcartをインストールする

WebサイトでSnipcartを有効にするために、Snipcartを実装したいHTMLページのbodyタグ直下に下記インストール用スクリプトを記述します。

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

  (function(){var c,d;(d=(c=window.SnipcartSettings).version)!=null||(c.version="3.0");var s,S;(S=(s=window.SnipcartSettings).timeoutDuration)!=null||(s.timeoutDuration=2750);var l,p;(p=(l=window.SnipcartSettings).domain)!=null||(l.domain="cdn.snipcart.com");var w,u;(u=(w=window.SnipcartSettings).protocol)!=null||(w.protocol="https");var m,g;(g=(m=window.SnipcartSettings).loadCSS)!=null||(m.loadCSS=!0);var y=window.SnipcartSettings.version.includes("v3.0.0-ci")||window.SnipcartSettings.version!="3.0"&&window.SnipcartSettings.version.localeCompare("3.4.0",void 0,{numeric:!0,sensitivity:"base"})===-1,f=["focus","mouseover","touchmove","scroll","keydown"];window.LoadSnipcart=o;document.readyState==="loading"?document.addEventListener("DOMContentLoaded",r):r();function r(){window.SnipcartSettings.loadStrategy?window.SnipcartSettings.loadStrategy==="on-user-interaction"&&(f.forEach(function(t){return document.addEventListener(t,o)}),setTimeout(o,window.SnipcartSettings.timeoutDuration)):o()}var a=!1;function o(){if(a)return;a=!0;let t=document.getElementsByTagName("head")[0],n=document.querySelector("#snipcart"),i=document.querySelector('src[src^="'.concat(window.SnipcartSettings.protocol,"://").concat(window.SnipcartSettings.domain,'"][src$="snipcart.js"]')),e=document.querySelector('link[href^="'.concat(window.SnipcartSettings.protocol,"://").concat(window.SnipcartSettings.domain,'"][href$="snipcart.css"]'));n||(n=document.createElement("div"),n.id="snipcart",n.setAttribute("hidden","true"),document.body.appendChild(n)),h(n),i||(i=document.createElement("script"),i.src="".concat(window.SnipcartSettings.protocol,"://").concat(window.SnipcartSettings.domain,"/themes/v").concat(window.SnipcartSettings.version,"/default/snipcart.js"),i.async=!0,t.appendChild(i)),!e&&window.SnipcartSettings.loadCSS&&(e=document.createElement("link"),e.rel="stylesheet",e.type="text/css",e.href="".concat(window.SnipcartSettings.protocol,"://").concat(window.SnipcartSettings.domain,"/themes/v").concat(window.SnipcartSettings.version,"/default/snipcart.css"),t.prepend(e)),f.forEach(function(v){return document.removeEventListener(v,o)})}function h(t){!y||(t.dataset.apiKey=window.SnipcartSettings.publicApiKey,window.SnipcartSettings.addProductBehavior&&(t.dataset.configAddProductBehavior=window.SnipcartSettings.addProductBehavior),window.SnipcartSettings.modalStyle&&(t.dataset.configModalStyle=window.SnipcartSettings.modalStyle),window.SnipcartSettings.currency&&(t.dataset.currency=window.SnipcartSettings.currency),window.SnipcartSettings.templatesUrl&&(t.dataset.templatesUrl=window.SnipcartSettings.templatesUrl))}})();
</script>

store.html

Installation – Snipcart Documentation

publicApiKeyの部分は、自分の公開APIキーへと変更します。

公開APIキーはテスト用と本番用（LIVE）の2種類があり、テスト用APIキーではテストカード情報を用いて、決済ゲートウェイに送信するまでの動作チェックを行うことが可能です。（ゲートウェイ側での動作チェックは含まない）

日本円表記に対応させる

SnipcartはHTMLファイル上で記述されたlang属性によって言語判定を行い、lang属性と同じ言語で出力するようになっています。

しかし、上記デフォルトのインストール用コードだけだと、カート画面にすすんだ際の「通貨表記」がドル（$）のまま。

そこで1行追加し、日本円での通貨表示に設定を変更します。

<body>
<script>
  window.SnipcartSettings = {
    publicApiKey: "YOUR_API_KEY",
    loadStrategy: "on-user-interaction",
<!-- 下記の1行を追加 -->
		currency: "JPY",
  };

  (function(){var c,d;(d=(c=window.SnipcartSettings).version)!=null||(c.version="3.0");var s,S;(S=(s=window.SnipcartSettings).timeoutDuration)!=null||(s.timeoutDuration=2750);var l,p;(p=(l=window.SnipcartSettings).domain)!=null||(l.domain="cdn.snipcart.com");var w,u;(u=(w=window.SnipcartSettings).protocol)!=null||(w.protocol="https");var m,g;(g=(m=window.SnipcartSettings).loadCSS)!=null||(m.loadCSS=!0);var y=window.SnipcartSettings.version.includes("v3.0.0-ci")||window.SnipcartSettings.version!="3.0"&&window.SnipcartSettings.version.localeCompare("3.4.0",void 0,{numeric:!0,sensitivity:"base"})===-1,f=["focus","mouseover","touchmove","scroll","keydown"];window.LoadSnipcart=o;document.readyState==="loading"?document.addEventListener("DOMContentLoaded",r):r();function r(){window.SnipcartSettings.loadStrategy?window.SnipcartSettings.loadStrategy==="on-user-interaction"&&(f.forEach(function(t){return document.addEventListener(t,o)}),setTimeout(o,window.SnipcartSettings.timeoutDuration)):o()}var a=!1;function o(){if(a)return;a=!0;let t=document.getElementsByTagName("head")[0],n=document.querySelector("#snipcart"),i=document.querySelector('src[src^="'.concat(window.SnipcartSettings.protocol,"://").concat(window.SnipcartSettings.domain,'"][src$="snipcart.js"]')),e=document.querySelector('link[href^="'.concat(window.SnipcartSettings.protocol,"://").concat(window.SnipcartSettings.domain,'"][href$="snipcart.css"]'));n||(n=document.createElement("div"),n.id="snipcart",n.setAttribute("hidden","true"),document.body.appendChild(n)),h(n),i||(i=document.createElement("script"),i.src="".concat(window.SnipcartSettings.protocol,"://").concat(window.SnipcartSettings.domain,"/themes/v").concat(window.SnipcartSettings.version,"/default/snipcart.js"),i.async=!0,t.appendChild(i)),!e&&window.SnipcartSettings.loadCSS&&(e=document.createElement("link"),e.rel="stylesheet",e.type="text/css",e.href="".concat(window.SnipcartSettings.protocol,"://").concat(window.SnipcartSettings.domain,"/themes/v").concat(window.SnipcartSettings.version,"/default/snipcart.css"),t.prepend(e)),f.forEach(function(v){return document.removeEventListener(v,o)})}function h(t){!y||(t.dataset.apiKey=window.SnipcartSettings.publicApiKey,window.SnipcartSettings.addProductBehavior&&(t.dataset.configAddProductBehavior=window.SnipcartSettings.addProductBehavior),window.SnipcartSettings.modalStyle&&(t.dataset.configModalStyle=window.SnipcartSettings.modalStyle),window.SnipcartSettings.currency&&(t.dataset.currency=window.SnipcartSettings.currency),window.SnipcartSettings.templatesUrl&&(t.dataset.templatesUrl=window.SnipcartSettings.templatesUrl))}})();
</script>

また、Snipcartは多通貨同時対応もしているようです。

Multi-currency – Snipcart Documentation

モーダルウィンドウにも変更が可能

さらに、サイドバーのような形でモーダルウインドウ形式で商品カートへの追加をさせたい場合、下記の1行を追加します。

<body>
<script>
  window.SnipcartSettings = {
    publicApiKey: "YOUR_API_KEY",
    loadStrategy: "on-user-interaction",
		currency: "JPY",
<!-- 下記の1行を追加 -->
		modalStyle: "side",
  };

  (function(){var c,d;(d=(c=window.SnipcartSettings).version)!=null||(c.version="3.0");var s,S;(S=(s=window.SnipcartSettings).timeoutDuration)!=null||(s.timeoutDuration=2750);var l,p;(p=(l=window.SnipcartSettings).domain)!=null||(l.domain="cdn.snipcart.com");var w,u;(u=(w=window.SnipcartSettings).protocol)!=null||(w.protocol="https");var m,g;(g=(m=window.SnipcartSettings).loadCSS)!=null||(m.loadCSS=!0);var y=window.SnipcartSettings.version.includes("v3.0.0-ci")||window.SnipcartSettings.version!="3.0"&&window.SnipcartSettings.version.localeCompare("3.4.0",void 0,{numeric:!0,sensitivity:"base"})===-1,f=["focus","mouseover","touchmove","scroll","keydown"];window.LoadSnipcart=o;document.readyState==="loading"?document.addEventListener("DOMContentLoaded",r):r();function r(){window.SnipcartSettings.loadStrategy?window.SnipcartSettings.loadStrategy==="on-user-interaction"&&(f.forEach(function(t){return document.addEventListener(t,o)}),setTimeout(o,window.SnipcartSettings.timeoutDuration)):o()}var a=!1;function o(){if(a)return;a=!0;let t=document.getElementsByTagName("head")[0],n=document.querySelector("#snipcart"),i=document.querySelector('src[src^="'.concat(window.SnipcartSettings.protocol,"://").concat(window.SnipcartSettings.domain,'"][src$="snipcart.js"]')),e=document.querySelector('link[href^="'.concat(window.SnipcartSettings.protocol,"://").concat(window.SnipcartSettings.domain,'"][href$="snipcart.css"]'));n||(n=document.createElement("div"),n.id="snipcart",n.setAttribute("hidden","true"),document.body.appendChild(n)),h(n),i||(i=document.createElement("script"),i.src="".concat(window.SnipcartSettings.protocol,"://").concat(window.SnipcartSettings.domain,"/themes/v").concat(window.SnipcartSettings.version,"/default/snipcart.js"),i.async=!0,t.appendChild(i)),!e&&window.SnipcartSettings.loadCSS&&(e=document.createElement("link"),e.rel="stylesheet",e.type="text/css",e.href="".concat(window.SnipcartSettings.protocol,"://").concat(window.SnipcartSettings.domain,"/themes/v").concat(window.SnipcartSettings.version,"/default/snipcart.css"),t.prepend(e)),f.forEach(function(v){return document.removeEventListener(v,o)})}function h(t){!y||(t.dataset.apiKey=window.SnipcartSettings.publicApiKey,window.SnipcartSettings.addProductBehavior&&(t.dataset.configAddProductBehavior=window.SnipcartSettings.addProductBehavior),window.SnipcartSettings.modalStyle&&(t.dataset.configModalStyle=window.SnipcartSettings.modalStyle),window.SnipcartSettings.currency&&(t.dataset.currency=window.SnipcartSettings.currency),window.SnipcartSettings.templatesUrl&&(t.dataset.templatesUrl=window.SnipcartSettings.templatesUrl))}})();
</script>

商品追加ボタンを作成する

実際の商品エリアに「カートに追加する」ボタンを追加します。

下記はサンプルコード。

<button class="snipcart-add-item"
  data-item-id="starry-night"
  data-item-price="79.99"
  data-item-description="High-quality replica of The Starry Night by the Dutch post-impressionist painter Vincent van Gogh."
  data-item-image="/assets/images/starry-night.jpg"
  data-item-name="The Starry Night">
  Add to cart
</button>

Add to Cart button by Snipcart

上記の”data-item-….”に商品情報を設定していけば、その内容が反映されたカート画面が実装されます。

ほかにもさまざまなカスタム属性をもたせることが可能です。詳しくは公式: Products – Snipcart Documentation をご確認ください。

あとはSnipcart管理画面で決済ゲートウェイへの紐付けなどの設定を完了させ、本番用APIへの変更などの作業を終えれば、実際に紐付けられた決済サービスで決済が行われるヘッドレスECカートシステムが完成します。

サンクスページのカスタマイズ

デフォルト設定では、決済ゲートウェイでの決済が完了するとカートページ上部にサンクスメッセージが表示されるのみというシンプルな仕組みになっています。

Customizing Your E-Commerce Thank You Page - Snipcart のページを参考に、サンクスメッセージの変更や自身で制作したサンクスページにリダイレクトさせる設定が可能です。

フォーム項目のカスタマイズ

請求先に電話番号の入力フォームを追加したり、送付先の入力フォームをカスタマイズしたりと、いくつかの例がサンプルコードとともに公式Docsに挙げられています。

Customization – Snipcart Documentation

Order custom fields – Snipcart Documentation

Snipcartカート画面の簡易的なCSSカスタマイズ

以上でカート画面までの実装は完了ですが、カート画面の一部スタイルをカスタマイズしたい場合があります。

たとえば、私の場合はなぜか「支払いを進める」ボタンがデフォルトでは背景色と同化しており、マウスホバーさせないとボタンが見えないという状況でした。

Snipcartはページ遷移を行わないSPA形式でカート画面を実装しているため、同じHTMLファイル内でCSSを当てることができます。

本来はSnipcartはCSS変数によってCSSを制御しており、正しくはCSS変数を変更させるThemingという仕組みでCSSを制御するのが正しいやり方のようです。

取り急ぎ私のケースでは、headタグ内で下記CSSを記述する形でPrimaryボタンを変更させました。

<head>
   ...
    <link rel="stylesheet" href="./dist/output.css" />
    <style>
      .snipcart-button-primary {
        background-color: #1380e7;
      }
    </style>
    <title>Document</title>
  </head>

store.html

クラス名はブラウザのDeveloper Toolで確認して、CSSを当てることにより簡易的なデザイン変更が可能です。

この記事の気になった箇所を読み返す:

HTMLにコードを埋め込むだけでカートを実装可能。ヘッドレスEC”Snipcart”
Snipcart自体は決済機能を持たない”ヘッドレスECカート”
Snipcartが提供するのはカート画面のみ。決済サービスとの連携が別途必要
Snipcartとの自動紐付けに対応している決済サービス
PayPalとSnipcartの紐付け: APIキーによる接続
Snipcartでカート画面を構築するメリット
Snipcartを静的サイト（LP）に埋め込んだヘッドレスカート事例
Snipcartの利用料金
ペイメントゲートウェイ利用料金 + 取引金額の2%
$10の最低月額金額あり
Snipcartでカート画面を作成するステップ
Snipcartをインストールする
日本円表記に対応させる
モーダルウィンドウにも変更が可能
商品追加ボタンを作成する
サンクスページのカスタマイズ
フォーム項目のカスタマイズ
Snipcartカート画面の簡易的なCSSカスタマイズ

Category:

Tags: