• Documentation
  • API Reference
  • Documentation
  • API Reference
Expand All Collapse All
  • Payment Overview
    • Introduction
    • Choosing an Integration Method
  • Accept Payment
    • Payment Page
      • Quick Start
      • Input Parameters
      • Output Parameters
    • Web SDK
      • Quick Start
      • Nuvei Fields
        • Styling
      • Additional Functions
      • APM Payments
      • Tokenization-Only Flow
      • Scenarios
      • Using ReactJS
        • Full Samples
        • Sandbox Examples
      • FAQs
    • Checkout
      • Quick Start
        • UI Customization
        • Payment Customization
        • Advanced Controls
        • Checkout Examples
      • Server-to-Server
      • Payment Scenarios
      • Mobile SDKs (Beta Release)
        • Android Mobile SDK (Beta Release)
        • iOS Mobile SDK (Beta Release)
      • Flow Diagrams
      • Plugins
        • Magento
          • Rebilling with Magento
        • WooCommerce
          • Rebilling with WooCommerce
        • PrestaShop
          • PrestaShop with Web SDK
          • PrestaShop with Checkout
        • OpenCart
        • Shopify (via AsiaBill)
        • Mirakl
        • Salesforce
        • SAP
        • WIX
      • Marketplaces
    • Features
      • Authentication
      • Financial Operations
        • Refund
        • Void
        • Auth and Settle
        • Partial Approval
        • Currency Conversion (DCC and MCP)
        • Payout
      • Card Operations
        • Card-on-File
        • PCI and Tokenization
        • Zero-Authorization
        • Merchant-Initiated Transactions (MIT)
        • Blocking Cards
      • Subscription (Rebilling)
      • 3D-Secure
        • 3D-Secure Explained
        • 3DS Implementations
          • 3DS MPI-Only Web SDK
          • 3DS MPI-Only REST
          • 3DS External MPI
          • 3DS Responses
        • 3DS Functions
          • 3D-Secure Fingerprinting
          • 3D-Secure Authentication Challenge
      • Webhooks (DMNs)
        • Payment Transaction Requests
        • Control Panel Events API
    • Guides
      • Testing Cards, APIs and APMs
        • Testing Cards
        • Testing APIs with Postman
        • Testing APMs
      • Response Handling
      • Alternative Payment Guides (APMs)
      • Airline Ticket Guides
        • Airline Addendum
        • External Authorization Addendum
      • Payment Facilitators (PayFac)
      • Cashier
        • Cashier Events Guide
        • Cashier Features
      • Withdrawal Guide
      • Risk Guide
        • Nuvei Services
        • Transaction Types
        • Credits and Payouts
        • Fraud to Sale Programs
        • Compliance Programs
        • Chargebacks
      • eKYC Guide
      • Server SDKs
        • Java SDK
        • .NET SDK
        • PHP SDK
        • Node.JS SDK
      • Fast Track Onboarding Developer Guide
      • Currency Conversion Guides
        • Multiple Currency Pricing (MCP)
        • Dynamic Currency Conversion (DCC)
          • DCC in Cashier or Payment Page
          • DCC in REST API Workflows
          • DCC in Web SDK Workflows
      • Website Compliance Guides
    • Additional Links
      • FAQs
      • API Reference
      • Release Notes
      • Country and Currency Codes

    Checkout Examples

    On this page:
    • Overview
      • Initiating a Session
      • Editing Sample Code in JSFiddle
    • Checkout Examples
      • Example of Checkout()

    Overview

    This section shows you how to run and customize various Nuvei Checkout examples, using the JSFiddle demonstration environment.

    Prerequisites
    • In order to accept a payment, first perform the steps to initiate a session.
    Checkout Examples
    • Checkout() SDK

    Initiating a Session

    • Before you can submit a payment with our client-side Checkout, you need to send the /openOrder API call, which has two main functions:
      • Authenticates you as our merchant using your given credentials. You can find your credentials here.
      • Sets up an order in the Nuvei system to contain the transaction details, and returns a sessionToken, that is  referenced later in the checkout() method and Checkout payment flow.
    • The /openOrder request must be performed on your backend server, never on the frontend, because it requires your secret key, which should NOT be exposed on the client-side to prevent front-end user manipulation.

    • For the /openOrder authentication, you must create the checksum field. This is a SHA-256 encrypted string of concatenation of the following fields in the following order:merchantId, merchantSiteId, clientRequestId, amount, currency, timeStamp and your secret key in the end.

      Before using the Server SDK, make sure to initialize the SDK before any request by including the relevant SDK initialization.

      You can simulate the openOrder functionality using a Postman script (follow our guide on using this here). Then use this Postman script to run and test the /openOrder method.

    • POST is used for all Nuvei REST API methods that involve a transfer of data from client to server.

    Editing Sample Code in JSFiddle

    Each scenario contains example code that you can edit.

      1. To edit, click “Edit in JSFiddle” in the top right corner.
        This redirects you to a page where you run and test the code.
      2. On the JSFiddle page, set your credentials in the section at the top of the page:
        var sfc = SafeCharge({
            env: 'int', // Nuvei API environment - 'int' (integration) or 'prod' (production - default if omitted)
            merchantId: '', //as assigned by Nuvei
            merchantSiteId: '' // your Merchant Site ID provided by Nuvei
          });

    Feel free to change your code, including the HTML and CSS. Have fun 🙂 !

    Checkout Examples

    Example of Checkout()

    2022 Nuvei. All rights reserved.