# ウェブサイトにPayPalを導入する: 無料ボタンを使うべきとき、使うべきでないとき

> 1つは、単品商品向けの無料のPayPalボタン。もう1つは、たまたまPayPalにも対応しているカートプラットフォームです。選び間違えると、数週間を無駄にします。

Ryan Badger - 2023年8月11日 - 読了目安 3 分

## 「PayPalショッピングカート」が意味しうる2つのこと

これを検索する人が求めているのは、たいてい次のどちらかです。

1. **各商品の隣に置くPayPalボタン。** クリックして支払うだけです。本物のカートはなく、1点ずつのチェックアウトです。
2. **本格的なショッピングカート**(複数の商品を追加し、数量を変更し、最後にまとめて1回でチェックアウトする)で、決済手段の1つとしてPayPalに対応しているもの。

この2つには、まったく異なる解決策が必要です。無料の「PayPal Buttons」は、道1にはとてもよく合いますが、道2には役に立ちません。本当に必要なのがどちらかに応じて、適切なツールを選びましょう。

## 道1: 単品商品用のPayPalボタン

一度に1つの商品(デジタルダウンロード、単一のサブスクリプション、寄付)を売るなら、PayPalのスマート決済ボタンはあなたのために作られています。無料で、サードパーティのソフトウェアは不要で、JavaScriptをサイトに直接貼り付けるだけです。

一般的な設定は次のとおりです。

```
<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&currency=USD"></script>
<div id="paypal-button-container"></div>
<script>
  paypal.Buttons({
    createOrder: (data, actions) => actions.order.create({
      purchase_units: [{ amount: { value: '19.99' } }]
    }),
    onApprove: (data, actions) => actions.order.capture().then(details => {
      // Fulfil the order here (send download link, redirect, etc.)
    })
  }).render('#paypal-button-container');
</script>
```

これで完了です。PayPalが、チェックアウトのモーダル、カード入力、PayPalへのログイン、通貨、(任意で)税金を処理し、支払いが完了するとコールバックが届きます。

> **ヒント:** 自分で組み込む場合は、`onApprove`のハンドラーを、クライアント側だけでなく、Webhook経由でサーバー側に置きましょう。クライアント側のコールバックはUXの確認用です。「支払いが確かに行われた」ことを示す唯一の権威あるシグナルは、Webhookです。

**道1が行き詰まるところ:** カートが必要になった時点です。商品の閲覧、複数の商品の追加、数量の調整、クーポンコード、まとめ配送、顧客ログイン、注文履歴。どれも存在しません。自分で作るしかありません。

## 道2: PayPalに対応したショッピングカートのシステム

本物のカートが必要になったら、PayPalを直接組み込むのをやめて、あなたの代わりにPayPalを組み込んでくれるカートプラットフォームを使い始めます。選択肢は多数あります。

- **Shopify**(ホスト型、$29+/月、下位プランでは取引手数料あり)
- **WooCommerce**(自社ホスティング、コアは無料、ホスティング+プラグインで費用がかさむ)
- **Snipcart**(既存サイト向けのカートオーバーレイ、手数料2%)
- **Shoprocket**(どんなサイトにも埋め込める、定額制、取引手数料0%)

いずれも、カートの仕組み(カートに追加、数量の更新、割引コード、配送オプション、顧客アカウント、注文管理)を提供します。いずれも、カード、Apple Pay、Google Payなどと並ぶチェックアウトの選択肢の1つとして、PayPalを有効にできます。

### Shoprocketの場合

CMSに関係なく、すでに運営しているサイトに、スクリプトタグを1つ貼り付けます。

```
<!-- EXAMPLE ONLY. Grab your real snippet from Sales channels → Embeds in your dashboard -->
<script src="https://cdn.shoprocket.io/loader.js" data-pk="pk_yourkey"></script>
<div data-shoprocket="catalog" data-embed-id="emb_xxx"></div>
```

これで、スライドアウト式のカートを備えたカタログが表示されます。ダッシュボードで、設定 → 決済方法 → PayPalを有効にし、クライアントIDを貼り付けて、保存します。顧客には、チェックアウトでVisaやMastercardと並んでPayPalボタンが表示され、カートは通常どおりに動作し、注文はPayPalの取引データがすべて付いた状態で、Shoprocketのダッシュボードに届きます。

プラグインのインストールも、テーマの編集も、開発作業も不要です。WordPress、Webflow、Squarespace、Carrd、Notion、Framer、静的HTMLなど、スクリプトタグを実行できるものならどこでも動作します。

## 実際にはどちらの道が必要か

| 売っているもの | 道 |
| --- | --- |
| 1つの商品、1つの価格、バリエーションなし | 道1(PayPalボタン) |
| 数点の商品、チェックアウトはたまに | カートなしで構わなければ道1、そうでなければ道2 |
| 複数商品のカタログ、本格的なストア | 道2(カートプラットフォーム) |
| サブスクリプション、定期課金 | 道2(PayPalボタンは課金のライフサイクルをうまく扱えません) |
| 自動配信のデジタル商品 | 道2(プラットフォームはフルフィルメントを処理しますが、素のPayPalは処理しません) |

## たいていの方にお伝えしていること

1つの商品を売るソロのクリエイターなら、PayPal Buttonsは無料で、十分です。使いましょう。

本格的なストアを運営していて、PayPalがきっかけでカートプラットフォームに向かっているなら、視野を広げる価値があります。ほとんどのストアは、PayPal*に加えて*、Apple Pay、Google Pay、Stripe、Klarna、現地の決済手段を求めています。カートプラットフォームなら、これらすべてを1つの連携の背後に用意してくれるので、1つずつ別々に組み込む必要がありません。

[Shoprocketの無料トライアルを始めて](https://app-v3.shoprocket.io/signup)、10分足らずで、カタログ、カート、チェックアウトが自分のサイトで動くのを確認してください。料金は[こちら](https://v3.shoprocket.io/ja/pricing.md)です。すべてのプランで取引手数料はゼロで、PayPalもほかのすべても含まれます。

## 要点まとめ

- **1つの商品で、カートが不要** → PayPalのスマート決済ボタン(無料)を使う
- **複数商品のカタログ** → カートプラットフォームを選び、その中でPayPalを有効にする
- 素のPayPalボタンの上に、複数商品のカートを自力で作ろうとしないでください。書く必要のない、大量のコードになります。

---

- HTML version: https://v3.shoprocket.io/ja/blog/paypal-on-your-website-when-to-use-the-free-button-and-when-not-to
- Language: 日本語 (ja)
- Also in: [العربية](https://v3.shoprocket.io/ar/blog/paypal-on-your-website-when-to-use-the-free-button-and-when-not-to.md), [Deutsch](https://v3.shoprocket.io/de/blog/paypal-auf-deiner-website-kostenloser-button-oder-warenkorb-plattform.md), [Ελληνικά](https://v3.shoprocket.io/el/blog/paypal-on-your-website-when-to-use-the-free-button-and-when-not-to.md), [English](https://v3.shoprocket.io/blog/paypal-on-your-website-when-to-use-the-free-button-and-when-not-to.md), [Español](https://v3.shoprocket.io/es/blog/paypal-en-tu-web-boton-gratuito-o-carrito-de-compra.md), [Français](https://v3.shoprocket.io/fr/blog/paypal-sur-votre-site-bouton-gratuit-ou-panier.md), [עברית](https://v3.shoprocket.io/he/blog/paypal-on-your-website-when-to-use-the-free-button-and-when-not-to.md), [हिन्दी](https://v3.shoprocket.io/hi/blog/paypal-on-your-website-when-to-use-the-free-button-and-when-not-to.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/blog/paypal-di-situs-web-kapan-pakai-tombol-gratis-dan-kapan-jangan.md), [Italiano](https://v3.shoprocket.io/it/blog/paypal-sul-tuo-sito-pulsante-gratuito-o-carrello.md), [Lietuvių](https://v3.shoprocket.io/lt/tinklarastis/paypal-mygtukas-ar-krepselio-platforma.md), [Norsk](https://v3.shoprocket.io/nb/blogg/paypal-pa-nettstedet-gratis-knapp-eller-handlekurv.md), [Nederlands](https://v3.shoprocket.io/nl/blog/paypal-op-je-website-gratis-knop-of-winkelwagen.md), [Polski](https://v3.shoprocket.io/pl/blog/paypal-na-stronie-kiedy-darmowy-przycisk-a-kiedy-nie.md), [Português](https://v3.shoprocket.io/pt/blog/paypal-no-seu-site-botao-gratuito-ou-carrinho-de-compras.md), [Română](https://v3.shoprocket.io/ro/blog/paypal-pe-site-butonul-gratuit-sau-cos-de-cumparaturi.md), [Русский](https://v3.shoprocket.io/ru/blog/paypal-on-your-website-when-to-use-the-free-button-and-when-not-to.md), [ไทย](https://v3.shoprocket.io/th/blog/paypal-on-your-website-when-to-use-the-free-button-and-when-not-to.md), [Türkçe](https://v3.shoprocket.io/tr/blog/web-sitenizde-paypal-ucretsiz-dugme-ne-zaman.md), [中文](https://v3.shoprocket.io/zh/blog/paypal-on-your-website-when-to-use-the-free-button-and-when-not-to.md)