💳

【Shopify.dev和訳】Apps/Checkout/Post-purchase/Overview

2021/09/12に公開

Shopify

apps

tech

この記事について

この記事は、Apps/Checkout/USE CASES/Post-purchase/Overviewの記事を和訳したものです。

Shopify アプリのご紹介

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

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

購入後のチェックアウト機能の概要

購入後のチェックアウトエクステンションは、マーチャントが購入後のページを Shopify のチェックアウトに直接追加することを可能にします。購入後のページは、注文が確定した後、サンキューページの前に表示されます。これらのエクステンションを使って、以下のようなカスタムコンテンツを追加することができます。

アップセルのオファー
アンケート依頼
フィードバックのお願い
寄付のお願い
割引コードの提供
重要なお知らせ
ロイヤリティの登録

必要条件

パートナーアカウントと開発ストアを作成している。
Shopify CLIをインストールしていること。
ガイドラインと制限と考慮事項に従っている。
ライブストアで購入後のチェックアウトエクステンションを使用するためのアクセスを要求する。
あなたはアプリがどのように Shopify に適合するか、またあなたが作ることができるアプリの異なるタイプを理解しています。

お客様の流れ

次の図は、購入後のチェックアウトエクステンションを使用するアプリのハイレベルなカスタマーフローを示しています。

お客様は、支払い情報ページに移動します。
ページは Checkout::PostPurchase::ShouldRender 拡張ポイントをロードします。
(オプション）拡張機能は、アプリサーバーにネットワークコールを行い、購入後のページに必要なデータを取得します。拡張機能では、ブラウザのローカルストレージにデータを保存して、最初のレンダリングまでの時間を短縮することができます。
拡張機能は、renderの結果を支払い情報ページに返します。renderがtrueになるためには、必要な条件がすべて満たされている必要があります（たとえば、購入後のオファーが表示される前に、お客様のクレジットカードが保管されている必要があります）。
お客様がチェックアウトを完了します。
render が true を返した場合、購入後のページは Checkout::PostPurchase::Render 拡張ポイントをロードします。保存されているデータはすべて、直接 render 拡張ポイントで利用できます。アプリは done を呼び出して、顧客をサンキューページにリダイレクトする必要があります。

App Bridge Checkout

購入後のチェックアウトエクステンションは、App Bridge Checkout を使用します。これは、エクステンションを Shopify の CDN にホストし、Shopify のチェックアウトに直接統合する技術です。App Bridge Checkout には、一貫した UI コンポーネント、拡張ポイント、開発ツールのセットが含まれています。

あなたは、Vanilla JS または React で記述し、TypeScript を使用するかどうかを決定してエクステンションを作成します。Shopify は安全にホストし、クライアントの中であなたのユーザーインターフェースをレンダリングします。拡張機能がチェックアウトで顧客に表示されるときには、以下の図に示すように、アプリが提供するインターフェース要素と Shopify が提供するインターフェース要素の両方が含まれます。

Shopify アプリのご紹介

Discussion

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