決済サービスの選定を悩んでいる方必見！決済サービス選定方法からPayJPのTypeScript実装方法を決済構築エキスパートが解説 ✍️ ！

import _ from "lodash";

type Option = {
  id?: string;
  src?: string;
  class?: string;
  "data-partial"?: boolean; //入力後にtokenを作成しwindowを閉じるか否か
  "data-text"?: string;
  "data-submit-text"?: string;
  "data-lang"?: string;
  "data-on-created"?: string;
  "data-on-failed"?: string;
  "data-name-placeholder"?: string;
};

export default class PayjpService {
  private dataKey: string;
  private scriptTagAppendDom: HTMLElement;
  private option?: Option;
  private defaultOption: Option = {
    id: "payjp-script",
    src: "https://checkout.pay.jp/",
    class: "payjp-button",
    "data-partial": true,
    "data-text": "決済画面に進む",
    "data-submit-text": "支払い",
    "data-lang": "ja",
    "data-on-created": "onTokenCreated",
    "data-on-failed": "onTokenFailed",
  };

  constructor(
    dataKey: string,
    scriptTagAppendDom: HTMLElement,
    onTokenCreated: Function,
    onTokenFailed: Function,
    option?: Option
  ) {
    this.dataKey = dataKey;
    this.scriptTagAppendDom = scriptTagAppendDom;
    this.option = option;
    window.onTokenCreated = onTokenCreated;
    window.onTokenFailed = onTokenFailed;
  }

  public appendPayJpScriptTag() {
    const option: Option = Object.assign(
      {
        ...this.defaultOption,
        "data-key": this.dataKey,
      },
      this.option || {}
    );
    const scriptEl = document.createElement("script");
    _.forEach(option, (v, k) => {
      scriptEl.setAttribute(k, v as string);
    });
    this.scriptTagAppendDom.appendChild(scriptEl);
  }
}

// Vue

import {
  defineComponent,
  onMounted,
  useContext
} from "@nuxtjs/composition-api";
import _ from "lodash";
import PayjpService from "~/services/payjpService";

export default defineComponent({
  middleware: "authenticated",
  setup() {
    const context = useContext();
   
    const onTokenCreated = () => {
      settlementLoading.value = true;
      const payjpTokenElm = document.getElementsByName(
        "payjp-token"
      )[0] as HTMLInputElement;
      if (!payjpTokenElm) throw new Error("not found token element.");
      const token = payjpTokenElm.value;
      console.log(token);
      // TODO: トークンをサーバーへ送信し決済処理を完了させること(以下API送信処理を参考)
      setTimeout(() => {
        settlementLoading.value = false;
        settlementComplete.value = true;
      }, 2000);
    };

    const onTokenFailed = (res: Error) => {
      throw new Error(JSON.stringify(res.message, null, 2));
    };

    onMounted(() => {
      // HTML描画のDOMに依存する処理なのでMauntedにて実行
      const scriptTagAppendDom = document.getElementById("payjp-area");
      if (scriptTagAppendDom === null)
        throw new Error("not found scriptTagAppendDom.");
      const payjpService = new PayjpService(
        context.$config.PAYJP_PUBLIC_KEY, // nuxt.config.jsのpublicRuntimeConfigに要設定
        scriptTagAppendDom,
        onTokenCreated,
        onTokenFailed
      );
      payjpService.appendPayJpScriptTag();
    });

    return {
      columns,
      settlementLoading,
      settlementComplete,
      onClickBackToMypage,
    };
  }
});