💳

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

2021/09/12に公開

Shopify

apps

tech

この記事について

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

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

Shopify アプリのご紹介

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

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

Payment methods サンプルスクリプト

このガイドでは、payment methods APIを実装する一連のサンプルスクリプトを提供します。

構成に基づいて支払い方法をフィルタリングする

このスクリプトは、次の両方の条件が満たされた場合に支払い方法をフィルタリングします。

支払い方法名は、構成のpaymentMethodNameフィールドと一致します。フィールドが構成に設定されていない場合は、Unknownとなります。
チェックアウトの合計価格が、CAD（カナダドル）の構成のしきい値フィールドよりも大きいか、フィールドが構成に設定されていない場合は$ 100.00CAD（日本円で約 9,000 円）です。

src / script.ts

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

export function paymentMethodsHandler(
  input: PaymentMethods.Input,
  configuration: Configuration,
): PaymentMethods.Result {
  // スクリプトからの出力を出力するには、 `Console.log`を使用します。
  Console.log('Hello! This is a log from your script!');

  const filterResponse = filter(input.purchaseProposal, input.paymentMethods, configuration);

  // レスポンス配列に何も返さない場合、チェックアウトは影響を受けません。
  return new PaymentMethods.Result(
    new PaymentMethods.SortResponse([]),
    filterResponse,
    new PaymentMethods.RenameResponse([]),
  );
}

function filter(
  purchaseProposal: Domain.PurchaseProposal,
  paymentMethods: Domain.PaymentMethod[],
  configuration: Configuration,
): PaymentMethods.FilterResponse {
  var hiddenMethods = new Array<Domain.PaymentMethod>();

  for (let i = 0; i < paymentMethods.length; i++) {
    const paymentMethod = paymentMethods[i];

    if (shouldHide(purchaseProposal, paymentMethod, configuration)) {
      hiddenMethods.push(paymentMethod);
    }
  }

  return new PaymentMethods.FilterResponse(hiddenMethods);
}

function shouldHide(
  purchaseProposal: Domain.PurchaseProposal,
  paymentMethod: Domain.PaymentMethod,
  configuration: Configuration,
): bool {
  const nameMatches = nameConfiguration(configuration) == paymentMethod.name;
  const aboveThreshold = purchaseProposal.totalPrice() > thresholdConfiguration(configuration);

  return nameMatches && aboveThreshold;
}

function nameConfiguration(configuration: Configuration): string {
  const defaultNameFilter = 'Unknown';
  return configuration.exists('paymentMethodName') ? configuration.get('paymentMethodName')! : defaultNameFilter;
}

function thresholdConfiguration(configuration: Configuration): Money {
  const defaultThreshold = (100).toString();
  const threshold = <f64>(
    safeParseInt(configuration.exists('threshold') ? configuration.get('threshold')! : defaultThreshold)
  );

  let result = Money.fromAmount(threshold, Currencies.CAD);

  // Money型で計算することができます。ですが、数値の演算子はMoney演算子の後に来るようにしてください。たとえば、（2.0 *result）を試してもうまくいきません。
  result = result * 2.0;
  result = result / 2.0;
  return result;
}

最初のお支払い方法の名前を変更する

このスクリプトは、1 つ以上の支払い方法がある場合、最初の支払い方法の名前をRenamed Payment Method!に変更します。

src / script.ts

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

export function paymentMethodsHandler(
  input: PaymentMethods.Input,
  // eslint-disable-next-line @shopify/assemblyscript/no-unused-vars
  _configuration: Configuration,
): PaymentMethods.Result {
  // スクリプトからの出力を出力するには、 `Console.log`を使用します。
  Console.log('Hello! This is a log from your script!');

  const renameResponse = renameFirstPaymentMethod(input.paymentMethods);

  // レスポンス配列に何も返さない場合、チェックアウトは影響を受けません。
  return new PaymentMethods.Result(
    new PaymentMethods.SortResponse([]),
    new PaymentMethods.FilterResponse([]),
    renameResponse,
  );
}

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

  if (paymentMethods.length > 0) {
    const renameProposal = PaymentMethods.RenameProposal.rename(paymentMethods[0], 'Renamed Payment Method!');
    renameProposals.push(renameProposal);
  }

  return new PaymentMethods.RenameResponse(renameProposals);
}

構成に基づいて支払い方法の名前を変更する

このスクリプトは、構成のnameToMatchフィールドに等しい名前の支払い方法の名前を、構成のrenameToフィールドで指定された名前に変更します。

src / script.ts

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

export function paymentMethodsHandler(
  input: PaymentMethods.Input,
  configuration: Configuration,
): PaymentMethods.Result {
  // スクリプトからの出力を出力するには、 `Console.log`を使用します。
  Console.log('Hello! This is a log from your script!');

  const renameResponse = renameFirstPaymentMethod(input.paymentMethods, configuration);

  // レスポンス配列に何も返さない場合、チェックアウトは影響を受けません。
  return new PaymentMethods.Result(
    new PaymentMethods.SortResponse([]),
    new PaymentMethods.FilterResponse([]),
    renameResponse,
  );
}

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

  var nameToMatch = configuration.get('nameToMatch')!;
  var renameTo = configuration.get('renameTo')!;
  for (let i = 0; i < paymentMethods.length; i++) {
    if (paymentMethods[i].name == nameToMatch) {
      const renameProposal = PaymentMethods.RenameProposal.rename(paymentMethods[i], renameTo);
      renameProposals.push(renameProposal);
    }
  }

  return new PaymentMethods.RenameResponse(renameProposals);
}

支払い方法を並べ替える

このスクリプトは、支払い方法を名前で並べ替えます。

構成が指定されていない場合、支払い方法は昇順でソートされます。
構成のsortDirectionフィールドがascendingに設定されている場合、支払い方法は昇順でソートされます。
構成のsortDirectionフィールドがdescendingに設定されている場合、支払い方法は降順でソートされます。
構成のsortDirectionフィールドが他の値に設定されている場合、スクリプトはエラーを発生させます。

src / script.ts

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

// 参照やエクスポートに便利なように、ファイルの先頭に定数を抽出できます。
const ASC = 'ascending';
const DESC = 'descending';
const DEFAULT = ASC;

export function paymentMethodsHandler(
  input: PaymentMethods.Input,
  configuration: Configuration,
): PaymentMethods.Result {
  // スクリプトからの出力を出力するには、 `Console.log`を使用します。
  Console.log('Hello! This is a log from your script!');

  const sortResponse = sort(input.purchaseProposal, input.paymentMethods, configuration);

  // 応答配列に何も返さない場合、チェックアウトは影響を受けません。
  return new PaymentMethods.Result(
    sortResponse,
    new PaymentMethods.FilterResponse([]),
    new PaymentMethods.RenameResponse([]),
  );
}

function sort(
  purchaseProposal: Domain.PurchaseProposal,
  paymentMethods: Domain.PaymentMethod[],
  configuration: Configuration,
): PaymentMethods.SortResponse {
  return new PaymentMethods.ContextualQuickSort(purchaseProposal, paymentMethods, configuration).sort(
    (context: PaymentMethods.PaymentMethodContext, lhs: Domain.PaymentMethod, rhs: Domain.PaymentMethod) => {
      const sortDir = configuredSortDirection(context.configuration);
      const left = sortDir == ASC ? lhs : rhs;
      const right = sortDir == ASC ? rhs : lhs;

      return comparePaymentMethods(context, left, right);
    },
  );
}

function comparePaymentMethods(
  context: PaymentMethods.PaymentMethodContext,
  lhs: Domain.PaymentMethod,
  rhs: Domain.PaymentMethod,
): PaymentMethods.Comparator {
  return lhs.name.localeCompare(<string>rhs.name);
}

function configuredSortDirection(configuration: Configuration): string {
  // 構成オブジェクトに期待する値を検証することをお勧めします。デフォルト値が提供されていない場合は提供することを選択できます。また、値が欠落している場合や予期しないタイプの場合はエラーが発生する可能性があります。
  if (configuration.exists('sortDirection')) {
    // "!"はコンパイラーにこの値がnull出ないことがわかっていることを通知します。
    const sortDirection = configuration.get('sortDirection')!;
    if (sortDirection.toLowerCase() == ASC || sortDirection.toLowerCase() == DESC) {
      return sortDirection;
    } else {
      throw 'sortDirection must be either ascending or descending!';
    }
  } else {
    return DEFAULT;
  }
}

次のステップ

完全なpayment methods APIリファレンスドキュメントをお読みください。
基本的なpayment scriptを作成し、カスタムアプリにデプロイします。

Shopify アプリのご紹介

Discussion

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