跳到主要内容

支付存储 (wc/store/payment)

概述​

支付数据存储用于存储支付方式数据和支付处理信息。当支付状态发生变化时，数据存储会反映这些变化。

⚠️ 目前，所有操作仅供内部使用，我们正在确定哪些操作对扩展程序与此数据存储进行交互是有用的。我们不鼓励扩展程序在此数据存储上分发操作。

以下示例显示了存储在支付数据存储中的数据。此示例显示了多个支付网关处于活动状态，并且保存了一个令牌的情况。

{
    status: 'idle',
    activePaymentMethod: 'stripe',
    activeSavedToken: '1',
    availablePaymentMethods: {
      bacs: {
        name: 'bacs'
      },
      cheque: {
        name: 'cheque'
      },
      cod: {
        name: 'cod'
      },
      stripe: {
        name: 'stripe'
      }
    },
     availableExpressPaymentMethods: {
      payment_request: {
        name: 'payment_request'
      }
    },
    savedPaymentMethods: {
      cc: [
        {
          method: {
            gateway: 'stripe',
            last4: '4242',
            brand: 'Visa'
          },
          expires: '12/32',
          is_default: true,
          actions: {
            'delete': {
              url: 'https://store.local/checkout/delete-payment-method/1/?_wpnonce=123456',
              name: 'Delete'
            }
          },
          tokenId: 1
        }
      ]
    },
    paymentMethodData: {
      token: '1',
      payment_method: 'stripe',
      'wc-stripe-payment-token': '1',
      isSavedToken: true
    },
    paymentResult: null,
    paymentMethodsInitialized: true,
    expressPaymentMethodsInitialized: true,
    shouldSavePaymentMethod: false
}

用法​

要使用此存储，您需要在引用它的任何模块中导入 paymentStore StoreDescriptor。 假设 @woocommerce/block-data 已注册为指向 wc.wcBlocksData 的外部，您可以通过以下方式导入键：

const { paymentStore } = window.wc.wcBlocksData;

选择器​

getState​

返回支付存储的当前状态。

🚨 避免使用此选择器，应使用专门的选择器。 此选择器仅用于在单元测试中模拟选择器。

返回值​

  • object: 支付存储的当前状态，包含以下属性：
    • _status_: string: 支付过程的当前状态。可能的值包括：idle (待审), started (已开始), processing (处理中), ready (就绪), error (错误), success (成功), failed (失败)。
    • _activePaymentMethod_: string: 激活的付款方式的 ID。
    • _activeSavedToken_: string: 激活的已保存令牌的 ID。
    • _availablePaymentMethods_: object: 可用的付款方式。目前，它只是一个以付款方式 ID 为键的对象。每个成员包含一个 name 字段，其值为付款方式 ID。
    • _availableExpressPaymentMethods_: object: 可用的快捷付款方式。目前，它只是一个以付款方式 ID 为键的对象。每个成员包含一个 name 字段，其值为付款方式 ID。
    • _savedPaymentMethods_: object: 当前客户的已保存付款方式。这是一个对象，它将针对每种付款方式而有所不同。例如，Stripe 的已保存令牌将以如下方式返回：
    • _paymentMethodData_: object: 当前的付款方式数据。这取决于每种付款方式，因此此处无法提供更多详细信息。
    • _paymentResult_: object: 包含以下属性的对象： - _message_: string: 由支付网关返回的信息。 - _paymentStatus_: string: 付款的状态。可能的值包括：success (成功), failure (失败), pending (待审), error (错误), not set (未设置)。 - _paymentDetails_: object: 由支付网关返回的付款详情。 - _redirectUrl_: string: 结账完成后，用于重定向到的 URL。
    • _paymentMethodsInitialized_: boolean: 如果已初始化付款方式，则为 true，否则为 false。
    • _expressPaymentMethodsInitialized_: boolean: 如果已初始化快捷付款方式，则为 true，否则为 false。
    • _shouldSavePaymentMethod_: boolean: 如果应保存付款方式，则为 true，否则为 false。

示例​

const store = select( paymentStore );
const currentState = store.getState();

isPaymentIdle​

查询付款状态是否为 idle (待审)。

返回值​

  • boolean: 如果付款状态为 idle (待审)，则为 true，否则为 false。

示例​

const store = select( paymentStore );
const isPaymentIdle = store.isPaymentIdle();

isExpressPaymentStarted​

查询是否已点击快捷付款方式。

返回值​

  • boolean: 如果已点击快捷付款方式的按钮，则为 true，否则为 false。

示例​

const store = select( paymentStore );
const isExpressPaymentStarted = store.isExpressPaymentStarted();

isPaymentProcessing​

查询付款状态是否为 processing (处理中)。

返回值​

  • boolean: 如果付款状态为 processing (处理中)，则为 true，否则为 false。

示例​

const store = select( paymentStore );
const isPaymentProcessing = store.isPaymentProcessing();

isPaymentReady​

查询状态是否为 ready。

返回值​

  • boolean: 如果付款状态为 ready，则返回 true，否则返回 false。

示例​

const store = select( paymentStore );
const isPaymentReady = store.isPaymentReady();

hasPaymentError​

查询状态是否为 error。

返回值​

  • boolean: 如果付款状态为 error，则返回 true，否则返回 false。

示例​

const store = select( paymentStore );
const hasPaymentError = store.hasPaymentError();

isExpressPaymentMethodActive​

返回是否启用了快速付款方式。当快速付款方式打开并接收用户输入时，此值为 true。对于 Google Pay，当模态框打开时为 true，但其他付款方式可能具有不同的用户界面。

返回值​

  • boolean: 是否启用了快速付款方式。

示例​

const store = select( paymentStore );
const isExpressPaymentMethodActive = store.isExpressPaymentMethodActive();

getActiveSavedToken​

返回当前激活的已保存令牌。客户保存到账户中的付款方式与之关联的令牌。如果选择了其中一个，则此选择器返回当前激活的令牌。如果没有选择任何令牌，则返回一个空字符串。

返回值​

  • string: 当前激活的已保存令牌 ID，如果未选择任何已保存令牌，则返回空字符串。

示例​

const store = select( paymentStore );
const activeSavedToken = store.getActiveSavedToken();

getActivePaymentMethod​

返回当前激活的付款方式的 ID。

返回值​

  • string: 当前激活的付款方式的 ID。

示例​

const store = select( paymentStore );
const activePaymentMethod = store.getActivePaymentMethod();

getAvailablePaymentMethods​

返回可用的付款方式。 这不包含快速付款方式。

返回值​

  • object: 可用的付款方式。 目前，这只是一个以付款方式 ID 为键的对象。 每个成员都包含一个名为 name 的条目，其值为付款方式 ID。

示例​

const store = select( paymentStore );
const availablePaymentMethods = store.getAvailablePaymentMethods();

availablePaymentMethods 将如下所示：

{
    "cheque": {
        name: "cheque",
    },
    "cod": {
        name: "cod",
    },
    "bacs": {
        name: "bacs",
    },
}

getAvailableExpressPaymentMethods​

返回可用的快速付款方式。

返回值​

  • object: 可用的快速付款方式。 目前，这只是一个以付款方式 ID 为键的对象。 每个成员都包含一个名为 name 的条目，其值为付款方式 ID。

示例​

const store = select( paymentStore );
const availableExpressPaymentMethods =
	store.getAvailableExpressPaymentMethods();

availableExpressPaymentMethods 的结构如下：

{
    "payment_request": {
        name: "payment_request",
    },
    "other_express_method": {
        name: "other_express_method",
    },
}

getPaymentMethodData​

返回当前的付款方式数据。 每次活动付款方式发生变化时，此数据都会改变，并且不会为每个付款方式持久化。 例如，如果客户选择了 PayPal，则付款方式数据将特定于该付款方式。 如果他们切换到 Stripe，则付款方式数据将被 Stripe 覆盖，之前的价值（当选择 PayPal 时）将不再可用。

返回值​

  • object: 当前的付款方式数据。 这与每个付款方式相关，因此此处无法提供更多详情。

示例​

const store = select( paymentStore );
const paymentMethodData = store.getPaymentMethodData();

getSavedPaymentMethods​

返回当前客户的所有已保存的付款方式。

返回值​

  • object: 当前客户的已保存的付款方式。 这是一个对象，它将特定于每个付款方式。 例如，Stripe 的已保存令牌以如下方式返回：
savedPaymentMethods: {
	cc: [
		{
			method: {
				gateway: 'stripe',
				last4: '4242',
				brand: 'Visa',
			},
			expires: '04/24',
			is_default: true,
			actions: {
				wcs_deletion_error: {
					url: '#choose_default',
					name: 'Delete',
				},
			},
			tokenId: 2,
		},
	];
}

示例​

const store = select( paymentStore );
const savedPaymentMethods = store.getSavedPaymentMethods();

getActiveSavedPaymentMethods​

返回当前客户的活动已保存的付款方式，即可以用于支付当前订单的付款方式。

返回值​

object - 当前客户的活动已保存的付款方式，即可以用于支付此订单的付款方式。 这是一个对象，它将特定于每个付款方式。 例如，Stripe 的已保存令牌以如下方式返回：

activeSavedPaymentMethods: {
	cc: [
		{
			method: {
				gateway: 'stripe',
				last4: '4242',
				brand: 'Visa',
			},
			expires: '04/24',
			is_default: true,
			actions: {
				wcs_deletion_error: {
					url: '#choose_default',
					name: 'Delete',
				},
			},
			tokenId: 2,
		},
	];
}

示例​

const store = select( paymentStore );
const activeSavedPaymentMethods = store.getActiveSavedPaymentMethods();

getIncompatiblePaymentMethods​

返回与结账 Block 不兼容的付款方式列表。

返回值​

  • object: 一个不兼容的付款方式列表，包含以下属性，如果未初始化任何付款方式或快捷付款方式，则返回一个空对象：
    • name 字符串: 付款方式的名称。

示例​

const store = select( paymentStore );
const incompatiblePaymentMethods = store.getIncompatiblePaymentMethods();

getShouldSavePaymentMethod​

返回是否应将付款方式保存到客户的账户中。

返回值​

  • boolean: 如果应保存付款方式，则返回 true，否则返回 false。

示例​

const store = select( paymentStore );
const shouldSavePaymentMethod = store.getShouldSavePaymentMethod();

paymentMethodsInitialized​

返回是否已初始化付款方式。

返回值​

  • boolean: 如果已初始化付款方式，则返回 true，否则返回 false。

示例​

const store = select( paymentStore );
const paymentMethodsInitialized = store.paymentMethodsInitialized();

expressPaymentMethodsInitialized​

返回是否已初始化快捷付款方式。

返回值​

boolean: 如果已初始化快捷付款方式，则返回 true，否则返回 false。

示例​

const store = select( paymentStore );
const expressPaymentMethodsInitialized =
	store.expressPaymentMethodsInitialized();

getPaymentResult​

返回上次付款尝试的结果。

返回值​

  • object: 一个包含以下属性的对象：
{
	message: string;
	paymentStatus: 'success' | 'failure' | 'pending' | 'error' | 'not set';
	paymentDetails: Record< string, string > | Record< string, never >;
	redirectUrl: string;
}

示例​

const store = select( paymentStore );
const paymentResult = store.getPaymentResult();

(@deprecated) isPaymentPristine​

查询 状态 是否为 pristine。

⚠️ 此选择器已过时，将在未来的版本中移除。请使用 isPaymentIdle 代替。

返回值​

  • boolean: 如果 状态 为 pristine，则返回 true，否则返回 false。

示例​

const store = select( paymentStore );
const isPaymentPristine = store.isPaymentPristine();

(@deprecated) isPaymentStarted​

查询 状态 是否为 started。

⚠️ 此选择器已过时，将在未来的版本中移除。请使用 isExpressPaymentStarted 代替。

返回值​

  • boolean: 如果 状态 为 started，则返回 true，否则返回 false。

示例​

const store = select( paymentStore );
const isPaymentStarted = store.isPaymentStarted();

(@deprecated) isPaymentSuccess​

查询 状态 是否为 success。

⚠️ 此选择器已过时，将在未来的版本中移除。请使用 isPaymentReady 代替。

返回值​

  • boolean: 如果 状态 为 success，则返回 true，否则返回 false。

示例​

const store = select( paymentStore );
const isPaymentSuccess = store.isPaymentSuccess();

(@deprecated) isPaymentFailed​

查询付款的状态是否为failed。

⚠️ 此选择器已过时，将在未来的发布版本中被移除。请使用hasPaymentError代替。

返回值​

  • boolean: 如果付款状态为failed，则返回true，否则返回false。

示例​

const store = select( paymentStore );
const isPaymentFailed = store.isPaymentFailed();

(@deprecated) getCurrentStatus​

返回一个包含布尔值的对象，表示付款状态。

⚠️ 此选择器已过时，将在未来的发布版本中被移除。请使用上面的选择器。

返回值​

  • object: 当前付款状态，包含以下键：
    • isPristine boolean: 如果付款流程尚未开始，没有错误并且尚未完成，则返回true。 初始时为true。
    • isStarted boolean: 如果付款流程已经开始，则返回true。
    • isProcessing boolean: 如果付款正在处理中，则返回true。
    • hasError boolean: 如果付款流程导致了错误，则返回true。
    • hasFailed boolean: 如果付款流程失败，则返回true。
    • isSuccessful boolean: 如果付款流程成功，则返回true。
    • isDoingExpressPayment boolean: 如果启用了快速付款方法，则返回true，否则返回false。

示例​

const store = select( paymentStore );
const currentStatus = store.getCurrentStatus();