💳

【Shopify.dev和訳】Apps/Checkout/Overview

2021/09/12に公開

Shopify

apps

tech

この記事について

この記事は、Apps/Checkout/Overviewの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

チェックアウトアプリの拡張機能

チェックアウトアプリ拡張機能を使用すると、開発者はアプリコードをチェックアウトに拡張し、チェックアウトエクスペリエンスのさまざまな側面を簡単にカスタマイズできます。利用可能なチェックアウトアプリ拡張機能には、UI 拡張機能とスクリプトの 2 種類があります。

これらのアプリ拡張機能により、カスタマイズの配布が簡単になり、マーチャントがすばやくインストールでき、アップグレードが安全になり、Shopify が新機能をリリースしても、マーチャントは引き続きプラットフォームのメリットを享受できます。

特徴

現在、チェックアウトアプリの拡張機能を使用すると、次のことができます。

メッセージやインタラクティブオファーなどの新しいパーソナライズされたコンテンツを購入後のページに追加します。
配送方法や支払い方法など、一連のチェックアウトオプションをカスタマイズします。

間もなく、次のこともできるようになります。

カスタムコンテンツ、メッセージ、インタラクティブ要素など、チェックアウトに新しい UI を追加します。
チェックアウト時に購入者から追加情報を取得します。
購入者が入力した情報を検証します。
カスタム割引を作成します。

UI 拡張機能

UI 拡張機能を使用すると、チェックアウトに新しいユーザーインターフェイス（UI）と機能を追加でき、Shopify が提供する拡張機能ポイント、API、UI コンポーネントを使用してアプリに組み込まれます。

チェックアウト UI 拡張コードは Shopify の CDN でホストされており、短納期で提供されます。拡張コードは、ブラウザーの WebWorker サンドボックス内で安全に実行されます。

UI 拡張機能は、さまざまなカスタマイズのユースケースをサポートするのに十分な柔軟性を提供するように設計されていますが、ガードレールを維持して、信頼とパフォーマンスのチェックアウトが常に知られていることを保証します。

購入後の UI 拡張ポイント

開発者にリリースされる最初の UI 拡張ポイントは、パブリックベータで利用可能な購入後の拡張機能です。これらの拡張機能を使用すると、開発者と Plus マーチャントは、オファー（アップセルなど）を表示したり、購入後のページで購入者にコンテンツを表示したりできます。このページは、購入者がチェックアウトを完了して注文を確認した直後、ただし、ありがとうページに到着する前に表示されます。

その他のチェックアウト UI 拡張機能

チェックアウト拡張機能の開発が進むにつれて、Shopify はチェックアウト用の追加の UI 拡張ポイント、追加の API、およびサポートされているユースケースのセットを拡張するための新しいチェックアウトコンポーネントをリリースします。

スクリプト

スクリプトを使用すると、カスタムのサーバー側ロジックをチェックアウトに追加し、支払い方法、配送料、およびチェックアウトラインアイテムの動作を安全に変更できます。スクリプトを使用して、次のことを実行できます。

B2B 顧客の送料を非表示にする
送料に処理時間を追加する
優先する支払い方法を優先する
対象外のお客様の手動支払い方法を非表示にする

スクリプトのしくみ

スクリプトを作成し、カスタムアプリにデプロイします。次に、マーチャントはストアにアプリをインストールして、顧客が Shopify のチェックアウトを操作したときにスクリプトが実行されるようにします。

altテキスト

次の図は、スクリプトのライフサイクルを示しています。

altテキスト

アプリ開発者は、Shopify CLI を使用してスクリプトを作成し、スクリプトをテストして構成し、カスタムアプリにスクリプトをデプロイします。アプリ開発者は、パートナーダッシュボードで実行時間とエラーを確認することでスクリプトを監視します。
商人は自分の店でスクリプトを有効にするには、その店舗にカスタムアプリケーションをインストールし、期待通りにスクリプトが動作していることを確認します。
お客様はShopifyのチェックアウトを操作して、Shopifyがスクリプトを見つけて実行できるようにします。

Benefit

Shopify スクリプトの利点は次のとおりです。

同じ場所に配置されたスクリプトは Shopify で実行されます:スクリプトは同じ場所に配置され、Shopify で直接実行されるため、Shopify のチェックアウトに合わせて拡張されます。
パフォーマンスの向上：複雑なスクリプトは 10 ミリ秒未満で実行できます。Shopify Scripts は WebAssembly アーキテクチャに基づいて構築されており、開発プロセスをスピードアップし、信頼性を向上させ、スクリプトの実行を高速化します。
手続き型 API ではなく宣言型 API：スクリプト API は宣言型 API ですが、以前の ShopifyEditor スクリプトは手続き型 API でした。これは、Shopify Scripts API に何をしたいかを伝え、Shopify がそれを行うための最善の方法を見つけ出すことを意味します。たとえば、Shopify は、チェックアウトやカートを直接変更するのではなく、操作可能で予測どおりに機能する、明確に定義され、サポートされている機能のリストを公開します。スクリプト API も強く型付けされているため、実行時ではなくコンパイル時に多くのエラーが表示されます。

次のステップ

学ぶ購入後のチェックアウトの拡張機能あなたは商人が Shopify チェックアウト内購入後の経験を作成し、管理できるようにするために使用することができます。
Shopify のチェックアウト時に支払い方法を顧客に表示する方法を変更します
Shopify のチェックアウト時に顧客に配送方法を表示する方法を変更します。

Shopify アプリのご紹介

Discussion

ログインするとコメントできます