graph LR
Script_Loader["Script Loader"]
PayPalScriptProvider["PayPalScriptProvider"]
PayPalButtons["PayPalButtons"]
PayPalMarks["PayPalMarks"]
PayPalMessages["PayPalMessages"]
PayPalCardFieldsProvider["PayPalCardFieldsProvider"]
PayPalNameField["PayPalNameField"]
PayPalNumberField["PayPalNumberField"]
PayPalExpiryField["PayPalExpiryField"]
PayPalCVVField["PayPalCVVField"]
PayPalHostedFieldsProvider["PayPalHostedFieldsProvider"]
PayPalHostedField["PayPalHostedField"]
Export_Facade_Hooks_Layer["Export Facade & Hooks Layer"]
Unclassified["Unclassified"]
Script_Loader -- "loadScript(options)" --> PayPalScriptProvider
PayPalScriptProvider -- "provides ScriptContext" --> PayPalButtons
PayPalScriptProvider -- "provides ScriptContext" --> PayPalMarks
PayPalScriptProvider -- "provides ScriptContext" --> PayPalMessages
PayPalScriptProvider -- "provides ScriptContext" --> PayPalCardFieldsProvider
PayPalScriptProvider -- "provides ScriptContext" --> PayPalHostedFieldsProvider
PayPalCardFieldsProvider -- "registers field via CardFieldsContext" --> PayPalNameField
PayPalCardFieldsProvider -- "registers field via CardFieldsContext" --> PayPalNumberField
PayPalCardFieldsProvider -- "registers field via CardFieldsContext" --> PayPalExpiryField
PayPalCardFieldsProvider -- "registers field via CardFieldsContext" --> PayPalCVVField
PayPalHostedFieldsProvider -- "registers field via HostedFieldsContext" --> PayPalHostedField
Export_Facade_Hooks_Layer -- "re‑exports" --> PayPalScriptProvider
Export_Facade_Hooks_Layer -- "re‑exports" --> PayPalButtons
Export_Facade_Hooks_Layer -- "re‑exports" --> PayPalMarks
Export_Facade_Hooks_Layer -- "re‑exports" --> PayPalMessages
Export_Facade_Hooks_Layer -- "re‑exports" --> PayPalCardFieldsProvider
Export_Facade_Hooks_Layer -- "re‑exports" --> PayPalHostedFieldsProvider
Export_Facade_Hooks_Layer -- "exposes hook" --> usePayPalScript
Export_Facade_Hooks_Layer -- "exposes hook" --> useValidateContext
Export_Facade_Hooks_Layer -- "exposes hook" --> usePayPalCardFields
Export_Facade_Hooks_Layer -- "exposes hook" --> usePayPalHostedFields
click PayPalScriptProvider href "https://github.com/CodeBoarding/GeneratedOnBoardings/blob/main/paypal-js/PayPalScriptProvider.md" "Details"
click Export_Facade_Hooks_Layer href "https://github.com/CodeBoarding/GeneratedOnBoardings/blob/main/paypal-js/Export_Facade_Hooks_Layer.md" "Details"
The react-paypal-js library orchestrates loading the PayPal JavaScript SDK and exposing it through a hierarchy of React contexts and thin wrapper components. A low‑level Script Loader builds the SDK URL, injects a script tag, and resolves the global paypal namespace. The top‑level PayPalScriptProvider invokes this loader, tracks its promise state, and stores the resolved namespace in a ScriptContext that is consumed by all downstream UI components. UI primitives (PayPalButtons, PayPalMarks, PayPalMessages) read the context to instantiate their respective SDK widgets. Two field‑management suites – Card‑Fields and Hosted‑Fields – each provide a provider that creates a dedicated SDK field instance, registers individual field components via a shared context, and renders the specific input elements. An export façade (index.ts) re‑exports all public symbols and supplies ergonomic hooks (usePayPalScript, useValidateContext, usePayPalCardFields, usePayPalHostedFields) so library consumers can interact with the underlying contexts without coupling to implementation details. The overall data‑flow is: loader → script provider → UI / field providers → field components, with the façade and hooks acting as the external entry points.
Low‑level utility that builds the PayPal SDK URL, injects a <script> element, guarantees idempotent loading and resolves the global paypal namespace.
Related Classes/Methods:
PayPalScriptProvider [Expand]
React context provider that calls the Script Loader, tracks loading state (PENDING / RESOLVED / REJECTED), stores the resolved paypal namespace in ScriptContext and makes it available to the whole React tree.
Related Classes/Methods:
Thin wrapper that reads ScriptContext via usePayPalScriptReducer, validates SDK presence, creates the Buttons SDK instance and forwards props via useProxyProps.
Related Classes/Methods:
Thin wrapper that reads ScriptContext, validates SDK presence, creates the Marks SDK instance and forwards props via useProxyProps.
Related Classes/Methods:
Thin wrapper that reads ScriptContext, validates SDK presence, creates the Messages SDK instance and forwards props via useProxyProps.
Related Classes/Methods:
Provider that creates the SDK CardFields instance (via loadScript → ScriptProvider), checks eligibility, and registers each field in a shared CardFieldsContext.
Related Classes/Methods:
Renders the CardFields NameField UI element using the shared CardFieldsContext.
Related Classes/Methods:
Renders the CardFields NumberField UI element using the shared CardFieldsContext.
Related Classes/Methods:
Renders the CardFields ExpiryField UI element using the shared CardFieldsContext.
Related Classes/Methods:
Renders the CardFields CVVField UI element using the shared CardFieldsContext.
Related Classes/Methods:
Provider that creates the SDK HostedFields instance, exposes it via HostedFieldsContext, and registers the hosted field components.
Related Classes/Methods:
Renders a specific hosted input (e.g., card number) using the shared HostedFieldsContext.
Related Classes/Methods:
Export Facade & Hooks Layer [Expand]
Re‑exports all public symbols (components, providers, fields) and supplies custom hooks (usePayPalScript, useValidateContext, usePayPalCardFields, usePayPalHostedFields) that give ergonomic access to the underlying contexts without exposing internal implementation details.
Related Classes/Methods:
Component for all unclassified files and utility functions (Utility functions/External Libraries/Dependencies)
Related Classes/Methods: None