Introduction

GlobalPay (Pavilion Payments) provides the VIP Preferred APM, a payment processing solution that allows businesses to accept a wide range of electronic payments, including credit and debit cards, E-wallets, and bank transfers.

Purpose

This guide provides steps to integrate the VIP Preferred APM into your payment flows using the Nuvei Web SDK and Simply Connect integration methods.

Prerequisites and Notes

• This document assumes that you have completed all account setup prerequisites, and are ready to integrate VIP Preferred 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 a 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

Press 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:
Press 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": "2000-06-30",
    "country": "US",
    "email": "[email protected]",
    "identification": "123456789"
  }, 
  "deviceDetails": {
    "ipAddress": "<customer's IP address>"
  }, 
  "urlDetails": {
    "notificationUrl":"<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": "2000-06-30",
    "country": "US",
    "email": "[email protected]",
    "identification": "123456789"
  };

  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: '[email protected]',
    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 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 presses 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 presses the Pay button, send the payment request:
   Press tab to open…
   
   • Web SDK
   • Simply Connect

   Send the createGlobalpayPayment() as shown below:
   (For a list of the standard mandatory parameters for payments, see the 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": "2000-06-30",
       "country": "US",
       "email": "[email protected]"
       },
     "userDetails": {
       "firstName": "John",
       "lastName": "Smith",
       "address": "22 Main Street",
       "phone": "6175556309",
       "zip": "02460",
       "city": "Boston",
       "state":"MA",
       "county":"Suffolk",
       "language": "en",
       "dateOfBirth": "2000-06-30",
       "country": "US",
       "email": "[email protected]",
       "identification": "123456789"
     },
       "deviceDetails": {
         "ipAddress": "<customer's IP address>" //req
       }
     }
   })
   

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

   Web SDK

   Send the createGlobalpayPayment() as shown below:
   (For a list of the standard mandatory parameters for payments, see the 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": "2000-06-30",
       "country": "US",
       "email": "[email protected]"
       },
     "userDetails": {
       "firstName": "John",
       "lastName": "Smith",
       "address": "22 Main Street",
       "phone": "6175556309",
       "zip": "02460",
       "city": "Boston",
       "state":"MA",
       "county":"Suffolk",
       "language": "en",
       "dateOfBirth": "2000-06-30",
       "country": "US",
       "email": "[email protected]",
       "identification": "123456789"
     },
       "deviceDetails": {
         "ipAddress": "<customer's IP address>" //req
       }
     }
   })
   

   Simply Connect

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

   VIP Preferred 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. 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.

   JSFiddle – Web SDK

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

   JSFiddle – Simply Connect

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

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