Introduction

GlobalPay is a payment technology provider who provides gaming and non-gaming payment products.
The VIP Preferred APM (Alternate Payment Method) is provided by GlobalPay.

Nuvei Environments

VIP Preferred can be used in Nuvei’s Cashier, Checkout, and Web SDK, and REST API payment environments.

Purpose

This guide provides steps to integrate the VIP Preferred APM into your payment flows using the Nuvei Web SDK and Checkout payment environments.

Prerequisites and Notes

• This document assumes that you have completed all account setup prerequisites, and are ready to integrate the VIP Preferred payment method into your payment flow.
• The VIP Preferred payment method is supported only for US based customers, and all amounts sent/received are stated in US Dollars (USD).
• Test credentials and testing procedures should be obtained directly from the APM providers.

Getting Started

Use Nuvei Web SDK to create a VIP Preferred UI.

1. Begin by setting up the VIP Preferred UI objects in the Nuvei Web SDK environment.
2. Initiate the VIP Preferred UI for your customers to perform VIP Preferred functions, as described below.

Setting Up the VIP Preferred UI Object

Set up a Web SDK object to display a VIP Preferred UI to collect customer input.

The VIP Preferred UI should:

• Display customer’s VIP Preferred account balance.
• Enroll a New VIP Preferred Account.
• Add a bank account to a VIP Preferred Account.

The placeholder object should present:

• Two buttons: “Pay <amount>” and “Add Bank Account“.
• VIP Preferred Balance
• Bank Account drop-down of existing bank accounts in the customer’s VIP Preferred account.
• “Save my details for future use” checkbox
• ID Number
• ID Type
• ID Expiry (MMYY)
• ID State
• Routing Account
• Bank Account
• SSN (social security number)
• “I agree to Terms & Conditions” checkbox

Click tab to open…

Example VIP Preferred UI

Example VIP Preferred Account Balance UI

Example Enrolling into VIP Preferred ACH UI

UI Styling

You can customize the “look and feel” of your VIP Preferred UI object by defining your own container attributes.
For example:

styles = {
  'nuvei-globalpay-container': {
    color: '#717d91',
    backgroundColor: '#fff',
    borderRadius: '5px',
    boxSizing: 'border-box',
    margin: '0 0 5px 0',
    width: '100%',
    display: 'flex',
    maxWidth: '1000px',
    flexWrap: 'wrap'
  },
  'nuvei-globalpay-balance': {
    color: '#717d91',
    backgroundColor: '#ffffff',
    fontSize: '14px',
    margin: '5px 0 5px 15px',
    width: '100%'
  },
  'nuvei-globalpay-welcome-msg': {
    color: '#717d91',
    backgroundColor: '#ffffff',
    fontSize: '14px',
    margin: '5px 0 5px 15px',
    width: '100%'
  },
  'nuvei-globalpay-currency-container': {
    color: '#717d91',
    backgroundColor: '#ffffff',
    fontSize: '14px',
    margin: '15px auto'
  },

  'nuvei-globalpay-modal-header-border': {
    width: '90%',
    borderBottom: '1px solid #ccc',
    margin: '5px auto'
  },


  //dropdown component
  "nuvei-dropdown-bank": {
    position: 'relative',
    //display: 'inline',
    margin: '15px',
    display: 'inline-block',
    width: '100%',
    maxWidth: '720px',
    minWidth: '220px',
    height: '44px',
    borderRadius: '3px',
    overflow: 'hidden'
  },
  "nuvei-dropdown-bank:after": {
    right: '10px',
    top: '16px',
    position: 'absolute',
    pointerEvents: 'none',
    content: "''",
    display: 'inline-block',
    width: '0.4em',
    height: '0.4em',
    borderRight: '0.15em solid black',
    borderTop: '0.15em solid black',
    transform: 'rotate(135deg)',
    marginRight: '0.5em',
    boxSizing: 'content-box'
  },
  'nuvei-globalPay-bank-select': {
    width: 'inherit',
    height: '44px',
    appearance: 'none',
    display: 'inline',
    maxWidth: 'inherit',
    minWidth: 'inherit',
    margin: '0px 0px',
    padding: '0px 0px 0px 12.4px',
    color: '#333',
    backgroundColor: '#ffffff',
    backgroundImage: 'none',
    borderRadius: '4px',
    textAlign: 'left',
    fontSize: '14px',
    position: 'relative',
  },

  //addBankAccount
  'addBankAccount': {
    display: 'inline-block',
    padding: '0 15px',
    color: '#14B5F1',
    fontSize: '16px',
    fontWeight: 'normal',
    backgroundColor: 'transparent',
    border: 'none',
    cursor: 'pointer',
    margin: '0 0 10px 0'
  },

  'addBankAccount:before': {
    content: "'+'",
    display: 'inline-block',
    boxSizing: 'content-box',
    width: '17px',
    height: '17px',
    margin: '0 .7rem 0 0',
    border: '2px solid CurrentColor',
    borderRadius: '50%',
    lineHeight: '100%'
  },

  'addBankButton': {
    width: '100%'
  },


  'nuvei-globalpay-modal': {
    position: 'fixed',
    zIndex: '1',
    padding: '50px 0 0 0',
    left: '0',
    top: '0',
    width: '100%',
    height: '100%',
    overflow: 'auto',
    backgroundColor: 'rgba(0,0,0,0.4)'
  },

  /* Modal Content */
  'nuvei-globalpay-modal-content': {
    position: 'relative',
    display: 'flex',
    flexDirection: 'column',
    backgroundColor: '#fefefe',
    margin: 'auto',
    padding: '0',
    border: '1px solid #888',
    width: '80%',
    boxShadow: '0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)',
    animationName: 'animatetop',
    animationDuration: '0.4s',
    overflow: 'auto',
    maxHeight: 'calc(100vh - 200px)',
    maxWidth: '720px',
  },

  'nuvei-globalpay-modal-header': {
    margin: '5px auto',
  },

  'nuvei-globalpay-header-content': {
    fontSize: '20px',
  },

  'nuvei-globalpay-submit-button': {
    fontSize: '16px',
    fontWeight: 'bold',
    letterSpacing: '0',
    lineHeight: '22px',
    textAlign: 'center',
    boxSizing: 'border-box',
    height: '36px',
    minWidth: '131px',
    border: '1px solid #15d2a3',
    borderRadius: '3px',
    backgroundColor: '#15d2a3',
    color: '#fafafa',
    margin: '5px',
    cursor: 'pointer',
  },

  'nuvei-globalpay-close-button': {
    fontSize: '16px',
    fontWeight: 'bold',
    letterSpacing: '0',
    lineHeight: '22px',
    textAlign: 'center',
    boxSizing: 'border-box',
    height: '36px',
    minWidth: '131px',
    border: '1px solid #95aac1',
    borderRadius: '3px',
    backgroundColor: '#ffffff',
    color: '#95aac1',
    margin: '5px',
    cursor: 'pointer'
  },

  'nuvei-globalpay-buttons': {
    display: 'flex',
    flexWrap: 'wrap',
    alignContent: 'stretch',
    justifyContent: 'center'
  },

  'nuvei-globalpay-field-error-msg': {
    margin: '0',
    color: 'red',
    height: '21px',
    fontSize: '14px',
  },

  'nuvei-form-input.error-field': {
    border: '1px solid red',
  },

  'nuvei-globalpay-modal-body': {
    padding: '2px 16px'
  },

  'nuvei-form-input': {
    width: '100%',
    padding: '12px 20px',
    margin: '8px 0 0 0',
    display: 'inline-block',
    border: '1px solid #ccc',
    borderRadius: '4px',
    boxSizing: 'border-box',
  },

  //enroll Modal
  //TODO FIX IT
  'nuvei-checkbox-input': {
    margin: '8px 8px 0 0',
    display: 'inline-block',
  },

  'nuvei-dropdown-enroll': {
    position: 'relative',
    display: 'inline',
    margin: '0',
    width: '100%',
    maxWidth: '720px',
    minWidth: '220px',
    height: '48px',
    borderRadius: '4px',
    overflow: 'hidden',
  },

  'nuvei-dropdown-enroll:after': {
    right: '10px',
    top: '5px',
    position: 'absolute',
    pointerEvents: 'none',
    content: "''",
    display: 'inline-block',
    width: '0.4em',
    height: '0.4em',
    borderRight: '0.15em solid black',
    borderTop: '0.15em solid black',
    transform: 'rotate(135deg)',
    marginRight: '0.5em',
    boxSizing: 'content-box',
  },

  'nuvei-globalPay-enroll-select': {
    width: 'inherit',
    height: '50px',
    appearance: 'none',
    display: 'inline',
    maxWidth: 'inherit',
    minWidth: 'inherit',
    margin: '8px 0 0 0',
    padding: '0px 0px 0px 12.4px',
    color: '#333',
    backgroundColor: '#ffffff',
    backgroundImage: 'none',
    borderRadius: '4px',
    textAlign: 'left',
    fontSize: '14px',
    position: 'relative',
    borderColor: '#ccc'
  },


  'error-field': {
    borderColor: 'red'
  },

  'greeting': {
    margin: '0 auto',
    fontSize: '16px',
    fontWeight: '500'
  },

  'info': {
    margin: '0 auto',
    fontSize: '16px',
    fontWeight: '500'
  }
}

Initiate the VIP Preferred UI

After setting up the VIP Preferred UI Object, follow these steps to initiate and display the VIP Preferred UI:
Click tab to open…

sfc.initGlobalpay('#sightline-placeholder', {
  sessionToken: sessionData.sessionToken,
  merchantId: sessionData.merchantId,
  merchantSiteId: sessionData.merchantSiteId,
  "clientUniqueId": "695701003A",
  "clientRequestId": "R4WXUZUZ7A",
  "userId": "E677539C0C54", 
  "userDetails": {
    "firstName": "John",
    "lastName": "Smith",
    "address": "22 Main Street",
    "phone": "6175556309",
    "zip": "02460",
    "city": "Boston",
    "state":"MA",
    "county":"Suffolk",
    "language": "en",
    "dateOfBirth": "1970-06-30",
    "country": "US",
    "email": "john.smith@email.com",
    "identification": "053942684"
  }, 
  "deviceDetails": {
    "ipAddress": "192.168.2.38"
  }, 
  "urlDetails": {
    "notificationUrl":"[The URL to which DMNs are sent]"
  }
}, styles, function(result) {
  console.log(result);
})

const initCheckout = () => {
  let ignorePM = [];
  const onResult = function(result) {
    console.log(result)
    console.log('Final callback data received by caller', JSON.stringify(result))
  }

  let userDetails = {
    "firstName": "John",
    "lastName": "Smith",
    "address": "22 Main Street",
    "phone": "6175556309",
    "zip": "02460",
    "city": "Boston",
    "state":"MA",
    "county":"Suffolk",
    "language": "en",
    "dateOfBirth": "1970-06-30",
    "country": "US",
    "email": "john.smith@email.com",
    "identification": "053942684"
  };

  checkout({
    logLevel: 0,
    payButton: "amountButton",
    showResponseMessage: true,
    sessionToken: document.getElementById('session').value,
    env: 'test',
    merchantSiteId: document.getElementById('metchantSiteID').value,
    merchantId: document.getElementById('metchantID').value,
    country: 'US',
    ignorePMList: ignorePM,
    locale: 'en',
    userId: '850512345',
    userDetails: userDetails,
    currency: 'USD',
    amount: 135,
    renderTo: '.container_for_checkout',
    onResult: onResult,
    autoOpenPM: true,
    alwaysCollectCvv: false,
    fullName: 'CL-BRW1',
    email: 'ranv@nuvei.com',
    fieldStyle: {
      "base": {
        "iconColor": "#c4f0ff",
        "color": "#6b778c",
        "fontWeight": 400,
        "fontFamily": "Nunito Sans",
        "fontSize": "18px",
        "fontSmoothing": "antialiased",
        ":-webkit-autofill": {
          "color": "#ffffff"
        },
        "::placeholder": {
          "color": "#6b778c" // default one picked from chrome
        }
      },
      "invalid": {
        "iconColor": "#FFC7EE",
        "color": "#FFC7EE"
      }
    }
  })
}

Example VIP Preferred in the Payment Method Gallery

VIP Preferred Functions

Use Nuvei Web SDK to enable your customers to enroll (register) a VIP Preferred account and add bank accounts to it, and to make payments using the VIP Preferred APM payment provider.

These are “suggested” flows between you and VIP Preferred, using Nuvei Web SDK:
(You are free to adapt these flows in any way.)

• Display the customer’s VIP Preferred account balance
• Payments using VIP Preferred

Display the Account Balance

1. Allow the customer to select the VIP Preferred payment method:
   
2. When the customer selects the VIP Preferred payment method the system automatically calls the /getAccountDetails request (using the data collected in the initGlobalpay() request), to  retrieve the customer’s VIP Preferred account balance.
3. Handling the response:
   • If the customer does not have a VIP Preferred account (based on SSN)(the response is "Account not found" with status : "ERROR"), then the system automatically calls the /getEnrollAccount request (using the data collected in the initGlobalpay() request).
   • If the customer has a VIP Preferred account, then the system displays the account balance, as shown below:
     

     Example VIP Preferred UI – Account Balance – With UPO

     1. 

     If the customer clicks Add Bank Account, then the Add Bank Account page is displayed for them to enter their details:

     Example VIP Preferred Add Bank Account

     1. 

VIP Preferred Payments

1. Allow the customer to select the VIP Preferred payment method:
   
2. When the customer clicks the Pay button, send the payment request:
   Click tab to open…
   
   • For Web SDK
   • for Checkout

   Send the createGlobalpayPayment() as shown below:
   (For a list of the standard mandatory parameters for a payment, see the createPayment() method.)

   Example createGlobalpayPayment() Request

     sfc.createGlobalpayPayment({
     "sessionToken": sessionData.sessionToken,
     "merchantId": sessionData.merchantId,
     "merchantSiteId": sessionData.merchantSiteId,
     "clientUniqueId": "695701003A",
     "clientRequestId": "R4WXUZUZ7A",
     "userId": "850512345",
     "billingAddress": {
       "firstName": "John",
       "lastName": "Smith",
       "address": "22 Main Street",
       "phone": "6175556309",
       "zip": "02460",
       "city": "Boston",
       "state":"MA",
       "county":"Suffolk",
       "language": "en",
       "dateOfBirth": "1970-06-30",
       "country": "US",
       "email": "john.smith@email.com"
       },
     "userDetails": {
       "firstName": "John",
       "lastName": "Smith",
       "address": "22 Main Street",
       "phone": "6175556309",
       "zip": "02460",
       "city": "Boston",
       "state":"MA",
       "county":"Suffolk",
       "language": "en",
       "dateOfBirth": "1970-06-30",
       "country": "US",
       "email": "john.smith@email.com",
       "identification": "053942684"
     },
       "deviceDetails": {
         "ipAddress": "192.168.2.38" //req
       }
     }
   })
   

   When the customer clicks the Pay button, the system sends the payment request seamlessly.

   For Web SDK

   Send the createGlobalpayPayment() as shown below:
   (For a list of the standard mandatory parameters for a payment, see the createPayment() method.)

   Example createGlobalpayPayment() Request

     sfc.createGlobalpayPayment({
     "sessionToken": sessionData.sessionToken,
     "merchantId": sessionData.merchantId,
     "merchantSiteId": sessionData.merchantSiteId,
     "clientUniqueId": "695701003A",
     "clientRequestId": "R4WXUZUZ7A",
     "userId": "850512345",
     "billingAddress": {
       "firstName": "John",
       "lastName": "Smith",
       "address": "22 Main Street",
       "phone": "6175556309",
       "zip": "02460",
       "city": "Boston",
       "state":"MA",
       "county":"Suffolk",
       "language": "en",
       "dateOfBirth": "1970-06-30",
       "country": "US",
       "email": "john.smith@email.com"
       },
     "userDetails": {
       "firstName": "John",
       "lastName": "Smith",
       "address": "22 Main Street",
       "phone": "6175556309",
       "zip": "02460",
       "city": "Boston",
       "state":"MA",
       "county":"Suffolk",
       "language": "en",
       "dateOfBirth": "1970-06-30",
       "country": "US",
       "email": "john.smith@email.com",
       "identification": "053942684"
     },
       "deviceDetails": {
         "ipAddress": "192.168.2.38" //req
       }
     }
   })
   

   for Checkout

   When the customer clicks the Pay button, the system sends the payment request seamlessly.

   JSFiddle Examples

   You can use the JSFiddle demonstration environment to view, run and customize VIP Preferred examples below.

   Editing JSFiddle Code

   To edit sample code in JSFiddle:

   1. 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 🙂 !

   JSFiddle – Web SDK

   You can use the JSFiddle demonstration environment to view, run and customize this VIP Preferred Web SDK example:

   JSFiddle – Checkout

   You can use the JSFiddle demonstration environment to view, run and customize this VIP Preferred Checkout example:

   In this particular example, in the initCheckout() function (used to generate the sessionToken), set to "country": "US".