• Documentation
  • API Reference
  • Documentation
  • API Reference
Expand All Collapse All
< BACK TO HOME
  • Online Payments
    • Introduction to Online Payments
    • Choosing an Integration Method
    • Payment Scenarios
    • Flow Diagrams
  • Accept Payment
    • Payment Page (Cashier)
      • Quick Start for Payment Page
      • Input Parameters
      • Output Parameters
      • Payment Page Features
      • Examples of Cashier Demo Sites
      • Cashier
        • Cashier Events Guide
        • Cashier Features
        • Withdrawal Guide
    • Web SDK
      • Quick Start for Web SDK
      • Nuvei Fields
        • Styling
      • Additional Functions
      • APM Payments with Web SDK
      • Tokenization-Only Flow
      • Web SDK Scenarios
      • Using ReactJS
        • Full Samples
        • Sandbox Examples
      • Web SDK FAQs
    • Simply Connect
      • Quick Start to Simply Connect
      • UI Customization
      • Payment Customization
      • Advanced Controls
      • Simply Connect Examples
    • Server-to-Server
      • REST 1.0
      • Server SDKs
        • Java SDK
        • .NET SDK
        • PHP SDK
        • Node.JS SDK
    • Mobile SDKs (Beta Release)
      • Android Native SDK
        • Android Nuvei Fields Native SDK (Beta Release)
        • Android Simply Connect Native SDK
        • Android Direct Native SDK (Beta Release)
      • iOS Native SDK
        • iOS Nuvei Fields Native SDK (Beta Release)
        • iOS Simply Connect Native SDK
        • iOS Direct Native SDK (Beta Release)
    • Self Track
  • Features
    • Authentication
    • Financial Operations
      • Refund
      • Void
      • Auth and Settle
      • Partial Approval
      • Currency Conversion: DCC and MCP
        • Multiple Currency Pricing (MCP)
        • Dynamic Currency Conversion (DCC)
          • DCC in Cashier or Payment Page
          • DCC in REST API Workflows
          • DCC in Web SDK Workflows
      • Payout
      • Account Funding Transactions (AFTs)
      • P2P Payment with Nuvei
    • Card Operations
      • Card-on-File
      • PCI and Tokenization
      • Zero-Authorization
      • Merchant-Initiated Transactions (MIT)
      • Blocking Cards
    • Subscriptions (Rebilling)
    • 3D-Secure
      • 3D-Secure Explained
      • 3DS Implementations
        • 3DS MPI-Only Web SDK
        • 3DS MPI-Only REST
        • 3DS External MPI
        • 3DS Responses
        • Challenges and Exemptions
      • 3DS Functions
        • 3D-Secure Fingerprinting
        • 3D-Secure Authentication Challenge
    • Addendums
      • Airlines
        • External Authorization
      • Local Payment (Installments)
      • Level 2&3 Processing Data
  • Integration
    • Testing Cards, APIs and APMs
      • Testing Cards
      • Testing APMs
      • Testing APIs with Postman
    • Response Handling
      • Webhooks (DMNs)
        • Payment Transaction Requests
        • Control Panel Events API
      • Payment Facilitators (PayFac)
    • Additional Links
      • FAQs
      • API Reference
      • Release Notes
      • Country and Currency Codes

    Sandbox Examples

    Home    Web SDK    Using ReactJS    Sandbox Examples

    On this page:
    • Overview
    • Three-Part Card Fields
    • One-Part Card Field
    • Without Nuvei Fields

    Overview

    There are many ways of using ReactJS to collect payment details on your own payment page and send them for processing as part of your own custom payment flow.

    For you your convenience, we have provided the following sets of sandbox ReactJS code samples, which represents just one of the many ways to use ReactJS:

    Press the relevant link below to see the ReactJS code sample in this page… OR, press the relevant link below to see the ReactJS code sample in your browser…
    • Three-Part Card Fields (in Page)
    • Three-Part Card Fields (in Browser)
    • One-Part Card Field (in Page)
    • One-Part Card Field (in Browser)
    • Without Nuvei Fields (in Page)
    • Without Nuvei Fields (in Browser)

    To display the code samples in this page, do the following:

    • To view the App.js the code sample in this page…
      … Drag the margin to the right.
    • To view the SafeCharge,jsx the code sample in this page…
      … Press the top-left menu.
    • Then... press the SafeCharge,jsx file.

    Three-Part Card Fields

    One-Part Card Field

    Without Nuvei Fields

      • Language fr
    • Terms of use
    • Privacy Policy
    Nuvei. All rights reserved.