💳

【Shopify.dev和訳】Apps/Checkout Payment methods/Quickstart

2021/09/12に公開

Shopify

apps

tech

この記事について

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

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

Shopify アプリのご紹介

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

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

Build a payment script

このチュートリアルでは、基本的な決済スクリプトを作成し、それをカスタムアプリにデプロイする方法を学びます。

学習内容

このチュートリアルを終了すると、以下のことができるようになります。

Shopify CLI を使って基本的な決済スクリプトを作成する
スクリプトを Shopify プラットフォームにデプロイして、カスタムアプリに関連付ける。
Shopify のストアでスクリプトを有効にする
ストアでテストオーダーを行い、スクリプトが期待通りに動作していることを確認する。

次の図は、ワークフローを完成させるための手順を示しています。

A diagram showing the steps involved in a payment script

要件

Shopify CLIをインストールしていること。
カスタムアプリを作成している。Shopify Scripts は現在、カスタムアプリのみをサポートしています。
ストアにカスタムアプリをインストールしていること。

Step 1: スクリプトの作成

Shopify CLIを使って、以下のコマンドを実行します。

Terminal

shopify script create --extension-point=payment_methods --name="My payment script"

決済スクリプトの更新

src/script.tsにある決済スクリプトの内容を、以下のコードで置き換えます。paymentMethodsHandler は、顧客がチェックアウトの支払いページに到達したときに実行されます。この関数の結果は、ソート順、削除する支払い方法、または名前を変更する支払い方法です。

src/script.ts

import {PaymentMethods, Configuration, CheckoutDomain as Domain} from '@shopify/scripts-checkout-apis';

export function paymentMethodsHandler(
  input: PaymentMethods.Input,
  configuration: Configuration,
): PaymentMethods.Result {

  const sortResponse = new PaymentMethods.SortResponse([]);
  const filterResponse = new PaymentMethods.FilterResponse([]);
  const renameResponse = renamePaymentMethod(input.paymentMethods);

  return new PaymentMethods.Result(sortResponse, filterResponse, renameResponse);
}

function renamePaymentMethod(paymentMethods: Domain.PaymentMethod[]): PaymentMethods.RenameResponse {
  var renameProposals = new Array<PaymentMethods.RenameProposal>();

  for (let i=0; i<paymentMethods.length; i++) {
    const renameProposal = PaymentMethods.RenameProposal.rename(paymentMethods[i], 'Renamed by scripts');
    renameProposals.push(renameProposal);
  }

  return new PaymentMethods.RenameResponse(renameProposals);
}

Step 2: スクリプトをデプロイする

スクリプトを Shopify プラットフォームにデプロイし、カスタムアプリと関連付けるには、以下のコマンドを実行します。

shopify script push

Step 3: スクリプトの有効化

デフォルトでは、スクリプトはアプリがインストールされたストアで使用することができますが、有効になっていません。チェックアウトの動作を変更するには、スクリプトを有効にする必要があります。

ストアの Shopify 管理画面で、設定をクリックします。
支払いをクリックします。
支払い方法のカスタマイズセクションで、カスタマイズの作成をクリックします。
有効にするスクリプトを選択し、ステータスをオンに更新します。
Saveをクリックします。

Step 4: テストオーダーを行う

ストアにテストオーダーを置き、チェックアウトのステップに進みます。支払いステップで表示される支払い方法は、Renamed by scriptsと表示されているはずです。

支払い方法の上に「Renamed by scripts」というラベルが表示されていることを示すスクリーンショット

次のステップ

加盟店がチェックアウト時に顧客に提供する支払い方法の名前をカスタマイズできるpayment methods scriptを作成します。
Shopify Scripts のpayment methods API reference documentationを読んでください。

Shopify アプリのご紹介

Discussion

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