Hello Clever Developer Docs

このページでは、Shopify ストアに Hello Clever を追加するために必要なすべてを扱います。Merchant Dashboard でストア用の Payments Account（決済アカウント）を作成し、Shopify App Store から Hello Clever アプリを導入し、App ID と Secret Key で両者を接続します。その後、必要に応じてエクスプレスチェックアウト、チェックアウトページの決済ロゴ、フッターの Hello Clever ロゴ、商品ページのキャッシュバックのタグラインでストアフロントを強化できます。

要件

アプリを導入する前に、ストアが正しく設定されていることを確認してください。

Hello Clever は、加盟店アカウントの構成に応じて複数の国と通貨に対応しています。ストアの住所と通貨が Hello Clever アカウントの地域と一致していることを確認してください。

ストアの住所を確認する

Shopify Admin で Settings > General へ移動します。
Store address の下で、Hello Clever アカウントの地域に一致する国を選択します（例：Australia）。

ストアの通貨を確認する

Shopify Admin で Settings > General へ移動します。
Store defaults の下で、ストアの通貨を Hello Clever の加盟店アカウントに設定されている通貨に一致させます。

Hello Clever を導入する

Merchant Dashboard で Payments Account を作成する

Hello Clever の Merchant Dashboard にログインします。
右上の Create account をクリックします。

このアカウントの通貨を選択する

Create account の画面で、Select a currency for this account の下に表示されている通貨を確認します。別の通貨を使う場合は Change をクリックし、Currency ダイアログの一覧から通貨を選びます（検索欄で絞り込めます）。通貨は Hello Clever の加盟店アカウントに設定されている通貨と一致させてください。

Payments Account の設定を開始する

What would you like to set up? の下で Accept payments and send payouts のカードを確認し、Create Payments Account をクリックします。

アカウントのフォームに入力する

次のフォーム項目を入力します。

Currency：前のステップから引き継がれます（読み取り専用）。
Account name：登録済みのアカウント名（読み取り専用）。
Account nickname：このアカウントを識別するためのラベル（例：Payment Account 1）。
Account image：Browse をクリックしてロゴやストアの画像をアップロードします。ファイルサイズの上限は 2MB です。
Planned integration type：ドロップダウンを開き、Shopify を選択します（For online and in-store merchants の下にあります）。
Website URL：Shopify ストアの URL を入力します（例：https://your-store-name.shopify.com）。

フォームの入力が完了したら、Create Payments Account をクリックします。

ストアフロント向けにアカウントが構成されるよう、Planned integration type を Shopify に設定してください。Website URL がストアと一致していることも確認してください。一致していないと連携が機能しないことがあります。

App ID と Secret Key を確認する

Merchant Dashboard の右上にあるアカウント名をクリックし、Developer の下の Authentication を選択します。
Authentication のページで、Auth 1.0 タブが選択されていることを確認します。
作成した Payments Account に該当する行を見つけ（Account Name & URL と Name & Plugin Type で照合します）、その App ID と Secret Key をコピーします。

Shopify App Store からアプリを導入する

Shopify アカウントにログインした状態で、Hello Clever のアプリページ https://apps.shopify.com/cleverpay にアクセスします。
Install をクリックします。

ストアを接続する

アプリを導入すると、Hello Clever の接続ページ (connect.helloclever.co/connect-shopify) にリダイレクトされます。コピーした App ID と Secret Key を入力し、Connect をクリックします。

設定を確認する

接続が完了すると、ストアのチェックアウトページに Hello Clever が支払いの選択肢として表示されます。チェックアウトを開き、顧客が利用できる決済手段の中に Hello Clever が表示されることを確認してください。

App ID と Secret Key のペアは、1つの Shopify ストアにのみ使用できます。複数のストアに Hello Clever を追加する必要がある場合は、ストアごとに Merchant Dashboard で新しい Payments Account を作成し、それぞれ別の認証情報を発行してください。

チェックアウトの決済ロゴを設定する

Shopify のチェックアウトページで顧客に表示される決済手段のロゴを設定できます。

Payment の設定へ移動する

Shopify Admin の左下にある Settings をクリックし、Payments を選択します。

Hello Clever の設定を開く

Payments のセクションで Hello Clever の決済アプリをクリックします。Hello Clever の設定ページにリダイレクトされます。

ロゴを選択する

チェックアウト時に顧客へ表示したい支払いの選択肢を選びます。

保存する

Save をクリックして変更を適用します。

Shopify はチェックアウトで最大3つの決済ロゴを表示します。それより多くの決済手段が有効になっている場合、最初の3つのロゴのみが表示されます。顧客はロゴの横のツールチップにカーソルを合わせることで、対応する手段の全一覧を確認できます。

フッターに Hello Clever のロゴを追加する

Shopify ストアのフッターに Hello Clever のロゴを表示するには、次の手順に従ってください。

Themes のセクションを開く

Shopify Admin のサイドバーから Themes をクリックします。

テーマエディターを開く

使用中のテーマで Customize ボタンをクリックします。

コードエディターを開く

テーマエディターで左上の3点メニューをクリックし、Edit code を選択します。

フッターのファイルを編集する

コードエディターで footer.liquid のファイルを開きます。

決済手段のループを更新する

footer.liquid 内で次のコードを見つけます。

{% for type in shop.enabled_payment_types %}

これを次に置き換えます。

{% assign enabled_payment_types = 'visa,master,american_express,helloclever' | remove: ' ' | split: ',' %}{% for type in enabled_payment_types %}

変更を保存する

ファイルを保存します。これでストアのフッターに Hello Clever のロゴが表示されます。

エクスプレスチェックアウトを有効にする

Hello Clever のエクスプレスチェックアウトは、商品ページに直接チェックアウトのボタンを追加し、顧客が通常のカートの流れを経ずに購入を完了できるようにします。

バージョン 1.x から 2.0 への移行

現在 Hello Clever アプリのバージョン 1.x を使用している場合、エクスプレスチェックアウトを有効にする前にアップグレードする必要があります。

Shopify の管理画面にログインする

https://admin.shopify.com/store/{your-shopify-store} にアクセスします。{your-shopify-store} はストアの Shopify のスラッグに置き換えてください。

アプリを更新する

https://shopify.helloclever.co/?shop={your-shopify-store}.myshopify.com にアクセスして更新を実行します。

更新された権限に同意する

商品とチェックアウトへのアクセスを付与するため、更新されたアプリの権限を承認します。

theme.liquid を更新する

theme.liquid のファイル内のスクリプトの URL がバージョン 2.0 を参照していることを確認します。

<script
  id="clever_widget_2.0"
  src="https://helloclever.co/lib/clever-widget/VERSION/2.0.0/index.js"
  async
  onload="createCleverWidget()">
</script>

商品ページでエクスプレスチェックアウトを有効にする

使用中のテーマへ移動する

Shopify Admin のサイドバーから Themes をクリックします。

テーマエディターを開く

使用中のテーマで Customize をクリックします。

コードエディターを開く

左上の3点メニューをクリックし、Edit code を選択します。

theme.liquid を開く

ファイルブラウザの Layout のセクションで theme.liquid のファイルを開きます。

ウィジェットのコードを追加する

次のコードを theme.liquid に挿入します。app-id-xxxxx は実際の App ID に置き換えてください。

<script>
  async function createCleverWidget() {
    const widgets = new CleverWidget({
      app_id: 'app-id-xxxxx', // Your App ID
    });
    await widgets.initialize();
    // Cashback tagline on product page
    widgets.cashbackBanner({
      containerSelector: '.product-form__buttons',
    });
    // Express checkout button
    widgets.expressCheckout({
      containerSelector: '.product-form__buttons',
    });
  }
</script>
<script
  id="clever_widget_2.0"
  src="https://helloclever.co/lib/clever-widget/VERSION/2.0.0/index.js"
  async
  onload="createCleverWidget()">
</script>

App ID は、Authentication ページの Auth 1.0 タブで確認できます（Merchant Dashboard のプロフィールメニューの Developer の下）。

保存して確認する

ファイルを保存し、ストアの商品ページへ移動します。Hello Clever のエクスプレスチェックアウトのボタンが表示され、機能していることを確認してください。

containerSelector の値は、ウィジェットをページのどこに描画するかを指定します。エクスプレスチェックアウトのボタンが表示されない場合は、商品ページの HTML を調べて、テーマのカート追加ボタン周辺の正しいクラスまたは ID のセレクターを見つけ、それに合わせて更新してください。

商品ページにキャッシュバックのタグラインを表示する

商品ページに Hello Clever のロゴと即時キャッシュバックの率を直接表示して、顧客が購入前に特典を確認できるようにできます。

テーマエディターを開いてコードを編集する

Shopify Admin で Themes へ移動し、Customize をクリックして、3点メニューから Edit code を選択します。

theme.liquid を開く

Layout のセクションで theme.liquid を開きます。

キャッシュバックバナーのウィジェットを追加する

エクスプレスチェックアウトで使用したものと同じウィジェットのコード（上のセクションに掲載）を挿入します。widgets.cashbackBanner() の呼び出しが、商品ページにキャッシュバックのタグラインを描画します。app-id-xxxxx は Shopify の Payments Account の App ID に置き換えてください。

保存して確認する

ファイルを保存し、商品ページを開いて Hello Clever のロゴとキャッシュバックの率が正しく表示されていることを確認します。表示の見た目はテーマのレイアウトによって異なる場合があります。

連携の基本

プラットフォーム連携

API ユースケース

Clever AI コネクター

セキュリティとコンプライアンス

Shopify に Hello Clever を追加する

要件

Hello Clever を導入する

チェックアウトの決済ロゴを設定する

フッターに Hello Clever のロゴを追加する

エクスプレスチェックアウトを有効にする

バージョン 1.x から 2.0 への移行

商品ページでエクスプレスチェックアウトを有効にする

商品ページにキャッシュバックのタグラインを表示する

​要件

​Hello Clever を導入する

​チェックアウトの決済ロゴを設定する

​フッターに Hello Clever のロゴを追加する

​エクスプレスチェックアウトを有効にする

​バージョン 1.x から 2.0 への移行

​商品ページでエクスプレスチェックアウトを有効にする

​商品ページにキャッシュバックのタグラインを表示する

要件

Hello Clever を導入する

チェックアウトの決済ロゴを設定する

フッターに Hello Clever のロゴを追加する

エクスプレスチェックアウトを有効にする

バージョン 1.x から 2.0 への移行

商品ページでエクスプレスチェックアウトを有効にする

商品ページにキャッシュバックのタグラインを表示する