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

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

最新の更新日
Nov 17, 2023 4:36 PM
記事作成日
Jan 8, 2023 1:29 PM
Category
EC
Tag Library
📲
API
⚗️
SaaS
🛒
Shopify
Target Keywords
vol.
Podcast

目次:

image

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

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

具体的には、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
image

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

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

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

PayPal configuration – Snipcart Documentation

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

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

image

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

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

image

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

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

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

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

image

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" 特設サイト

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

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

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

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

nyar-arcoaster-pb

atsuyamaru ⋅ 5 months ago

Snipcartの利用料金

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

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

2% / transactions + Payment gateway fees

Pricing - Snipcart

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

$10の最低月額金額あり

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

有料プラン契約後の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を当てることにより簡易的なデザイン変更が可能です。

成果をだすWebサイト制作、企画・戦略から伴走するWeb制作を実施しています

成果をだすWebサイト制作、企画・戦略から伴走するWeb制作を実施しています。 SEOを意識した制作や、制作後の運用・成果を見据えたWebサイトづくりが得意です。

🍀 Webサイト制作とSEOの専門家 - Marketing Wizard

上リンクには私のプロフィール・実績を掲載しています。ご確認のうえ、お気軽にご相談ください。

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

Category:

Tags:

|
🛒
Shopify
 |
📲
API

XFacebookLinkedInGitHub

🍀 自己紹介・事業紹介・実績掲載のサイト🍀

■ TOPページ・カテゴリ一覧へ

■ タグライブラリ・タグ一覧

■ すべての記事一覧

■ 魔法使いのWebマーケティング: 旧ブログ（→外部サイト）

■ 魔法使いのWebマーケティングラジオ（→外部サイト）

©CopyRight 2021. 魔法使いのWebスクリプト・まほウェブ | 魔法使いのwebマーケティング All Rights Reserved.