Overview

This page presents you with various Nuvei Web SDK scenarios that you can run and customize using the JSFiddle demonstration environment.

List of Web SDK Scenarios

• Simple Nuvei Fields Scenario
• 3DS Scenarios
• Card-on-File Scenarios
• APM with createPayment and getAPM Scenario

Editing Sample Code in JSFiddle

To edit sample code in JSFiddle:

1.  Press 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.

Initiating a Session

Before you can submit payment using the client-side Nuvei Web SDK, you need to send the /openOrder API call.

Prerequisites and Notes for the /openOrder Request

• The server-side /openOrder API request does the following:
  • Authenticates your Nuvei merchant credentials.
    (You can log in to the Nuvei Control Panel using your username and password to find your credentials here.)
  • Sets up the authenticated order in the Nuvei system, and returns a sessionToken which is needed to send other requests in the session.
• Always send the /openOrder request from your backend server because the checksum parameter calculation includes your secret key, which should NOT be exposed on the client side.

Sending an /openOrder Request

On the server-side, send an /openOrder request with its mandatory parameters, and include the following:

• checksum –
  This is a SHA-256 encrypted string that you create, that is used for request authentication. You can calculate it by performing a SHA-256 encryption on a string of these concatenated fields, in the following order:
  merchantId, merchantSiteId, clientRequestId, amount, currency, timeStamp, and your merchantSecretKey at the end.
• country and email –
  If these are not provided here, then they must be included later in a createPayment() / authenticate3d() request.
• urlDetails.notificationUrl (optional) –
  The URL to which DMNs can be sent.
• preventOverride="1" (optional) –
  This prevents future requests from over-writing values contained in these blocks: userDetails, billingAddress, or shippingAddress.

Simple Nuvei Fields Scenario

Begin by performing the steps described in the Initiating a Session topic.

See an example of the scenario below:

3DS Scenarios

3DS with createPayment()

Begin by performing the steps described in the Initiating a Session topic.

See an example of the scenario below:

3DS with authenticate3d()

Begin by performing the steps described in the Initiating a Session topic.

See an example of the scenario below:

Card-on-File Scenarios

Card-on-File using userPaymentOptionId

Begin by performing the steps described in the Initiating a Session topic.

See an example of the scenario below:

Card-on-File with CVV and Expiration Collection

Begin by performing the steps described in the Initiating a Session topic.

The request:

APM with createPayment() and getAPMs() Scenario

Begin by performing the steps described in the Initiating a Session topic.

This scenario demonstrates:

• Using APMs as the payment method to send the createPayment() request.
• Using the getAPMs() request.