@payjp/payments-js: ESModules JavaScript SDK library for PAY.JP v2 API

@payjp/payments-js は JavaScript / TypeScript で payments.js を利用するためのラッパーライブラリです。 payments.js のロードのサポートや型定義されたヘルパーメソッドを提供します。

インストール方法

npm install @payjp/payments-js

使い方

1. payments.js のロード

import { loadPayments } from '@payjp/payments-js'

const payments = await loadPayments('pk_test_0383a1b8f91e8a6e3ea0e2a9')

2. Widgets の生成

const widgets = payments.widgets({ clientSecret })

3. Form の生成

const paymentForm = widgets.createForm('payment')
const billingAddressForm = widgets.createForm('address', { mode: 'billing' })

4. Form のマウント

paymentForm.mount('#payment-form')
billingAddressForm.mount('#billing-address-form')

5. PaymentFlow、SetupFlowのConfirm

const result = await widgets.confirmPayment({ return_url: 'https://example.com/return_url' })

const result = await widgets.confirmSetup({ return_url: 'https://example.com/return_url' })

Widget を使わない Confirm

一部の決済手段についてはユーザによる入力が必要ないため clientSecret と confirmParams を指定して payments.confirmPayment() を呼び出し、決済フォームの表示を省略して Confirm することができます。 現在は paypay のみ対応しています。

const result = await payments.confirmPayment({
  clientSecret,
  confirmParams: {
    return_url: 'https://example.com/return_url',
    payment_method_data: { type: 'paypay' },
  },
})

エラーハンドリング

confirmPayment() や confirmSetup() は正常に処理が進むと画面遷移が発生します。 これらのメソッドから値が返ってきた場合は error.type で種類を判別し、適切なハンドリングを行ってください。

エラータイプ一覧

type	説明	対応方法
payment_error	支払い処理が失敗しました	利用者に別の支払い情報の入力を促してください
validation_error	入力内容に問題があります	フォームにエラーメッセージが自動表示されるため、通常は追加の対応は不要です
api_error	APIリクエストでエラーが発生しました	code を確認し、実装の見直しまたは時間をおいた再試行を検討してください
sdk_error	SDKの使用方法に問題がある可能性があります	実装内容の再確認をお願いします
user_error	キャンセルや支払い方法が利用不可など利用者の操作に起因するエラーです	通常は追加の対応は不要です

使用例

import { PayjpPaymentsError } from '@payjp/payments-js'

function handleError(error: PayjpPaymentsError) {
  switch (error.type) {
    case "payment_error":
      showMessage("お支払いに失敗しました。別の支払い情報をお試しください。");
      break;
    case "validation_error":
      // フォームにエラーが自動表示されるため、通常は追加の対応は不要です
      break;
    case "api_error":
      // error.code を確認し、実装の見直しまたは再試行を検討してください
      console.error(error.code, error.message);
      break;
    case "sdk_error":
      // SDKの初期化や使用方法に問題がある可能性があります。実装を見直してください
      console.error(error.code, error.message);
      break;
    case "user_error":
      // 利用者の操作に起因するエラーです、通常は追加の対応は不要です
      break;
    default:
      // 将来追加される可能性のある新しいエラータイプに対応
      console.error(error.type, error.code, error.message);
  }
}

const { error } = await widgets.confirmPayment({ return_url: "..." });
if (error) {
  handleError(error);
}