Implementation:Langgenius Dify UsePay

Knowledge Sources	Langgenius_Dify
Domains	Frontend, React_Hooks
Last Updated	2026-02-12 07:00 GMT

Overview

A collection of React hooks and a modal component for handling payment status checks, billing confirmations, and Notion OAuth integration callbacks via URL search parameters.

Description

The use-pay module exports three hooks and one component:

• useAnthropicCheckPay reads the URL search parameters provider_name and payment_result and, when the provider is anthropic, generates a confirmation object with a localized success or cancellation message.

• useBillingPay follows the same pattern but checks for payment_type=billing instead of a provider name, producing a confirmation object for billing payment outcomes.

• useCheckNotion handles Notion OAuth callback flows. It reads the type, code, and error search parameters. On error, it displays a warning. On receiving a valid code, it triggers the useNotionBinding service hook to complete the OAuth binding and then redirects to the root route upon success.

• CheckModal is a client component that orchestrates all three hooks and renders a Confirm dialog if any of them produce a confirmation state. It aggregates the results with priority order (Anthropic, then Notion, then Billing) and displays the first non-null confirmation. Dismissing the modal navigates the user back to the root route.

Usage

Use these hooks and the CheckModal component in top-level layout components to handle post-redirect payment and OAuth flows. They are designed to be mounted once at the application shell level where URL search parameters from external redirects are captured.

Code Reference

Source Location

• Repository: Langgenius_Dify
• File: web/hooks/use-pay.tsx
• Lines: 1-111

Signature

export type ConfirmType = Pick<IConfirm, 'type' | 'title' | 'content'>

export const useAnthropicCheckPay: () => ConfirmType | null

export const useBillingPay: () => ConfirmType | null

export const useCheckNotion: () => ConfirmType | null

export const CheckModal: () => JSX.Element | null

Import

import {
  useAnthropicCheckPay,
  useBillingPay,
  useCheckNotion,
  CheckModal,
} from '@/hooks/use-pay'

I/O Contract

Inputs (useAnthropicCheckPay)

Name	Type	Required	Description
(URL param) provider_name	string	Implicit	Must be anthropic to trigger; read from URL search params
(URL param) payment_result	string	Implicit	Must be succeeded or cancelled; read from URL search params

Inputs (useBillingPay)

Name	Type	Required	Description
(URL param) payment_type	string	Implicit	Must be billing to trigger; read from URL search params
(URL param) payment_result	string	Implicit	Must be succeeded or cancelled; read from URL search params

Inputs (useCheckNotion)

Name	Type	Required	Description
(URL param) type	string	Implicit	Must be notion to trigger; read from URL search params
(URL param) code	string	Implicit	The Notion OAuth authorization code; read from URL search params
(URL param) error	string	Implicit	The Notion OAuth error message; read from URL search params

Outputs

Name	Type	Description
confirm (from hooks)	null	A confirmation object with type (info or warning), title, and optional content, or null if no action is needed
CheckModal	null	Renders a confirmation dialog if any payment/OAuth callback is detected; returns null otherwise

Usage Examples

Using CheckModal in the App Layout

import { CheckModal } from '@/hooks/use-pay'

function AppLayout({ children }: { children: React.ReactNode }) {
  return (
    <div>
      <header>Dify</header>
      <main>{children}</main>
      <CheckModal />
    </div>
  )
}

Using Individual Hooks for Custom UI

import { useAnthropicCheckPay } from '@/hooks/use-pay'

function PaymentStatusBanner() {
  const confirmInfo = useAnthropicCheckPay()

  if (!confirmInfo)
    return null

  return (
    <div className={confirmInfo.type === 'info' ? 'banner-success' : 'banner-warning'}>
      {confirmInfo.title}
    </div>
  )
}

Related Pages

• Principle:Langgenius_Dify_PaymentIntegration
• Principle:Langgenius_Dify_OAuthCallbackHandling