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

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
Custom payment gatewayとして他決済ゲートウェイとの紐付けも可能なようです。
PayPalとSnipcartの紐付け: APIキーによる接続
例として、PayPalを決済ゲートウェイとしてSnipcartへ紐付ける方法の流れ概要をご紹介。SnipcartはPayPal Payment ProおよびPayPal Express Checkoutをサポートしています。
まず、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を静的サイト(LP)に埋め込んだヘッドレスカート事例
私Nakataの実績として、下記のランディングページにSnipcartを導入してヘッドレスECを完成させました。
※ 現在はSnipcartのプランを解約しているため、カート画面は読み込まれない状態になっています。
決済ゲートウェイはPaypalを採用しています。
ページ自体はHTML&CSS(TailwindCSS)でコーディングしているのみで、完全な静的ページとなっています。ホスティングはNetlifyで行っています。
コードは私NakataのGitHub上で公開しているので、宜しければチェックしてみてください。
Snipcartの利用料金
ペイメントゲートウェイ利用料金 + 取引金額の2%
Snipcartの利用料金は、1取引につき取引金額の2%に加えて、各ペイメントゲートウェイの手数料が発生します。ペイメントゲートウェイ利用料金に上乗せされる形です。
2% / transactions + Payment gateway fees
なかなか割高なサービスかもしれませんね…
$10の最低月額金額あり
Snipcartには、たとえ取引が一切発生しなかった月でも料金が発生する「最低月額金額」が設けられています。
Standardプランの場合、最低月額料金として$10が発生します。先のペイメントゲートウェイ利用料金 + 取引金額の2%の料金が$10に届かなかった場合でも、必ず$10は毎月発生するという形になります。
Snipcartでカート画面を作成するステップ
Snipcartでのカート画面作成は非常にかんたんです。
- Snipcartのインストールスクリプトを記述
- 日本円に対応させるなど設定変更
- 商品追加ボタンを作成する
Snipcartをインストールする
WebサイトでSnipcartを有効にするために、Snipcartを実装したいHTMLページのbodyタグ直下に下記インストール用スクリプトを記述します。
publicApiKeyの部分は、自分の公開APIキーへと変更します。
公開APIキーはテスト用と本番用(LIVE)の2種類があり、テスト用APIキーではテストカード情報を用いて、決済ゲートウェイに送信するまでの動作チェックを行うことが可能です。 (ゲートウェイ側での動作チェックは含まない)
日本円表記に対応させる
SnipcartはHTMLファイル上で記述されたlang属性によって言語判定を行い、lang属性と同じ言語で出力するようになっています。
しかし、上記デフォルトのインストール用コードだけだと、カート画面にすすんだ際の「通貨表記」がドル($)のまま。
そこで1行追加し、日本円での通貨表示に設定を変更します。
また、Snipcartは多通貨同時対応もしているようです。
モーダルウィンドウにも変更が可能
さらに、サイドバーのような形でモーダルウインドウ形式で商品カートへの追加をさせたい場合、下記の1行を追加します。
商品追加ボタンを作成する
実際の商品エリアに「カートに追加する」ボタンを追加します。
下記はサンプルコード。
上記の”data-item-….”に商品情報を設定していけば、その内容が反映されたカート画面が実装されます。
ほかにもさまざまなカスタム属性をもたせることが可能です。詳しくは公式: Products – Snipcart Documentation をご確認ください。
あとはSnipcart管理画面で決済ゲートウェイへの紐付けなどの設定を完了させ、本番用APIへの変更などの作業を終えれば、実際に紐付けられた決済サービスで決済が行われるヘッドレスECカートシステムが完成します。
サンクスページのカスタマイズ
デフォルト設定では、決済ゲートウェイでの決済が完了するとカートページ上部にサンクスメッセージが表示されるのみというシンプルな仕組みになっています。
Customizing Your E-Commerce Thank You Page - Snipcart のページを参考に、サンクスメッセージの変更や自身で制作したサンクスページにリダイレクトさせる設定が可能です。
フォーム項目のカスタマイズ
請求先に電話番号の入力フォームを追加したり、送付先の入力フォームをカスタマイズしたりと、いくつかの例がサンプルコードとともに公式Docsに挙げられています。
Snipcartカート画面の簡易的なCSSカスタマイズ
以上でカート画面までの実装は完了ですが、カート画面の一部スタイルをカスタマイズしたい場合があります。
たとえば、私の場合はなぜか「支払いを進める」ボタンがデフォルトでは背景色と同化しており、マウスホバーさせないとボタンが見えないという状況でした。
Snipcartはページ遷移を行わないSPA形式でカート画面を実装しているため、同じHTMLファイル内でCSSを当てることができます。
本来はSnipcartはCSS変数によってCSSを制御しており、正しくはCSS変数を変更させるThemingという仕組みでCSSを制御するのが正しいやり方のようです。
取り急ぎ私のケースでは、headタグ内で下記CSSを記述する形でPrimaryボタンを変更させました。
クラス名はブラウザのDeveloper Toolで確認して、CSSを当てることにより簡易的なデザイン変更が可能です。
この記事の気になった箇所を読み返す:
- HTMLにコードを埋め込むだけでカートを実装可能。ヘッドレスEC”Snipcart”
- Snipcart自体は決済機能を持たない”ヘッドレスECカート”
- Snipcartが提供するのはカート画面のみ。決済サービスとの連携が別途必要
- Snipcartとの自動紐付けに対応している決済サービス
- PayPalとSnipcartの紐付け: APIキーによる接続
- Snipcartでカート画面を構築するメリット
- Snipcartを静的サイト(LP)に埋め込んだヘッドレスカート事例
- Snipcartの利用料金
- ペイメントゲートウェイ利用料金 + 取引金額の2%
- $10の最低月額金額あり
- Snipcartでカート画面を作成するステップ
- Snipcartをインストールする
- 日本円表記に対応させる
- モーダルウィンドウにも変更が可能
- 商品追加ボタンを作成する
- サンクスページのカスタマイズ
- フォーム項目のカスタマイズ
- Snipcartカート画面の簡易的なCSSカスタマイズ
Category: