PlayPlus (Web SDK)

Home    APMs    PlayPlus    PlayPlus (Web SDK)

On this page:

Introduction

Sightline is a payment technology provider who provides gaming and non-gaming payment products.
The Play+ APM (Alternate Payment Method) is provided by Sightline.

Nuvei Environments

Play+ can be used in Nuvei’s Cashier, Simply Connect, Web SDK, and REST API payment environments.

Purpose

This guide provides steps to integrate the Play+ APM into your payment flows using the Web SDK payment environment.

Prerequisites and Notes

  • This document assumes that you have completed all account setup prerequisites, and are ready to integrate Play+ into your payment flow.
  • The Play+ 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 Play+ UI.

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

Setting Up the Play+ UI Object

Set up a Web SDK object to display a Play+ UI to collect customer input.

The Play+ UI should enable customers to:

  • Request their Play+ account balance.
  • Enroll a New Play+ Account.
  • Fund their Play+ Account.
  • Capture the SSN Last 4 Digits when accepting payments (without using UPOs), etc.

The placeholder object should present:

  • Two buttons: “Display” and “Enroll or Fund your Play+ Account“.
  • SSN Last 4 Digits input field (social security number).
  • Play+ balance field.
Example Play+ UI

UI Styling

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

Show the Full Play+ UI Object Styling Example
Example Play+ UI Styling
var styles = {
  container: {
    color: '#717d91',
    border: '0',
    borderRadius: '5px',
    backgroundColor: '#fff',
    boxSizing: 'border-box',
    alignItems: 'center',
    margin: '0 0 5px 0',
    width: '90%',
    display: 'flex',
    maxWidth: '1000px',
    //flexWrap: 'wrap',
    // flexDirection: 'column'
  },
  enrollFundButton: {
    height: '23px',
    width: '90%',
    color: '#ffffff',
    borderRadius: '20px',
    backgroundColor: '#f5429b',
    border: '1px solid #00becf',
    fontSize: '12px',
    letterSpacing: '0',
    lineHeight: '24px',
    outline: 'none',
    fontFamily: '"Nunito Sans", sans-serif',
    margin: '15px auto',
    cursor: 'pointer',
  },
  balance: {
    fontSize: '14px',
    margin: '5px auto'
  },
  balanceContainer: {
    fontSize: '25px',
    margin: '5px auto',
    width: '300px'
  },
  getBalanceButton: {
    fontSize: '25px',
    backgroundColor: '#38c79c'
  },
  ssnInput: {
    fontSize: '25px',
    border: '1px solid #f5429b',
    width: '200px',
    backgroundColor: '#38c79c'
  },
  playPlusBalanceLabel: {
    fontSize: '25px',
    color: 'blue',
    margin: '15px 10px'
  },
  ssnLabel: {
    fontSize: '25px',
    color: 'blue',
    margin: '15px 10px'
  },
  ssnError: {
    color: 'orange',
    fontSize: '25px'
  }
};

Initiate the Play+ UI

After setting up the Play+ UI Object, follow these steps to initiate and display the Play+ UI:

  1. Initiate a session by sending an /openOrder request, which authenticates you as a Nuvei merchant, and returns a sessionToken.
  2. Initiate and display the Play+ UI by sending an initSightline() request using these and other relevant parameters:
    • sessionToken
    • userId from your internal systems. Up to 20 characters.
    • userDetails.firstName
    • userDetails.lastName
    • isUPO (optional – default is false)
      This indicates if the request is Without UPO or With UPO:
      • Without UPO (default):
        • Set isUPO: false (or just don’t include this parameter)
        • Display the SSN Last 4 Digits input field on the Play+ UI, allowing the customer to enter the data.
          (This value should be sent in the userDetails.identification parameter.)
        • Do not send the paymentOption.userPaymentOptionId.
      • With UPO:
        • Set isUPO: true
        • Include paymentOption.userPaymentOptionId
          For example: paymentOption: { userPaymentOptionId: “8076811” },
        • Do not display the SSN Last 4 Digits input field.
          (Do not send the userDetails.identification parameter.)

    Press tab to open…

    Example initSightline() Request without UPO
    sfc.initSightline('#pp', {
  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",
    "country": "US",
    "state":"MA",
    "email": "[email protected]",
    "county":"Suffolk",
    "language": "en",
    "dateOfBirth": "2000-06-30",
    "identification": "053942684"
  },
  "urlDetails": {
    "notificationUrl":"<URL to which DMNs are sent>"
  }
}, styles, function(result) {
  console.log(result);
})
    Example Play+ UI – Without UPO (showing the SSN Last 4 Digits input field)

    Example initSightline() Request with UPO
    sfc.initSightline('#pp', {
  sessionToken: sessionData.sessionToken,
  merchantId: sessionData.merchantId,
  merchantSiteId: sessionData.merchantSiteId,
  "clientUniqueId": "695701003A",
  "clientRequestId": "R4WXUZUZ7A",
  isUPO:true,
  "userId": "E677539C0C54", 
  "userDetails": {
    "firstName": "John",
    "lastName": "Smith",
    "address": "22 Main Street",
    "phone": "6175556309",
    "zip": "02460",
    "city": "Boston",
    "country": "US",
    "state":"MA",
    "email": "[email protected]",
    "county":"Suffolk",
    "language": "en",
    "dateOfBirth": "2000-06-30",
    "identification": "053942684"
  },
  "urlDetails": {
    "notificationUrl":"<URL to which DMNs are sent>"
  }
}, styles, function(result) {
  console.log(result);
})
    Example Play+ UI – With UPO

    Without UPO (default)
    Example initSightline() Request without UPO
    sfc.initSightline('#pp', {
  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",
    "country": "US",
    "state":"MA",
    "email": "[email protected]",
    "county":"Suffolk",
    "language": "en",
    "dateOfBirth": "2000-06-30",
    "identification": "053942684"
  },
  "urlDetails": {
    "notificationUrl":"<URL to which DMNs are sent>"
  }
}, styles, function(result) {
  console.log(result);
})
    Example Play+ UI – Without UPO (showing the SSN Last 4 Digits input field)

    With UPO
    Example initSightline() Request with UPO
    sfc.initSightline('#pp', {
  sessionToken: sessionData.sessionToken,
  merchantId: sessionData.merchantId,
  merchantSiteId: sessionData.merchantSiteId,
  "clientUniqueId": "695701003A",
  "clientRequestId": "R4WXUZUZ7A",
  isUPO:true,
  "userId": "E677539C0C54", 
  "userDetails": {
    "firstName": "John",
    "lastName": "Smith",
    "address": "22 Main Street",
    "phone": "6175556309",
    "zip": "02460",
    "city": "Boston",
    "country": "US",
    "state":"MA",
    "email": "[email protected]",
    "county":"Suffolk",
    "language": "en",
    "dateOfBirth": "2000-06-30",
    "identification": "053942684"
  },
  "urlDetails": {
    "notificationUrl":"<URL to which DMNs are sent>"
  }
}, styles, function(result) {
  console.log(result);
})
    Example Play+ UI – With UPO

Play+ Functions

Use Nuvei Web SDK to enable your customers to enroll (register) a Play+ account, to fund it, and to make payments using the Play+ APM payment provider.

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

Display the Account Balance

  1. Display the Play+ UI, and then allow the customer to request their Play+ account balance.
    (For details, see Setting up the Play+ UI Object and Initiate the Play+ UI.)
  2. When the customer presses the Display button, retrieve their Play+ account balance by calling the /getAccountDetails request.
  3. Display the customer’s Play+ account balance.
    Press tab to open…
    Example Play+ UI – Account Balance – Without UPO

    Example Play+ UI – Account Balance – With UPO

    Without UPO (default)
    Example Play+ UI – Account Balance – Without UPO

    With UPO
    Example Play+ UI – Account Balance – With UPO

Enroll New or Fund Account

  1. Display the Play+ UI, and then allow the customer to Enroll a New Play+ Account, or Fund their Play+ Account.
    (For details, see Setting up the Play+ UI Object and Initiate the Play+ UI.)
  2. When the customer presses the “Enroll or Fund your Play+ Account” button, then send a /fundAccount request.
    Include these parameters:
    • sessionToken
    • userId from your internal systems. Up to 20 characters.
    • paymentOption.alternativePaymentMethod.paymentMethod: “apmgw_PlayPlus“
    • userDetails.firstName
    • userDetails.lastName
    • userDetails.identification (optional)
    Example /fundAccount Request
    {
    "sessionToken":"<sessionToken from /getSessionToken>",
    "merchantId":"<your merchantId>",
    "merchantSiteId":"<your merchantSiteId>",
    "clientUniqueId":"<unique transaction ID in merchant system>",
    "clientRequestId":"<unique request ID in merchant system>",
    "userId":"E677539C0C54",
    "paymentOption":{
        "alternativePaymentMethod":{
            "paymentMethod":"apmgw_PlayPlus"
        }
    },
    "userDetails":{
        "firstName":"John",
        "lastName":"Smith",
        "address":"22 Main Street",
        "phone":"6175551414",
        "zip":"02460",
        "city":"Boston",
        "country":"US",
        "state":"MA",
        "email":"[email protected]",
        "county":"Suffolk",
        "language":"en",
        "dateOfBirth":"2000-06-30",
        "identification":"987456982"
    },
    "urlDetails":{
        "notificationUrl":"<URL to which DMNs are sent>"
    }
}
  3. The request returns a different redirectUrl depending on whether the customer has, or does not have a Play+ account:
    • If the customer does not have a Play+ account, the redirectUrl points to the
      Play+ New Account Enrollment page.
    • If the customer has a Play+ account, the redirectUrl points to the
      Fund My Play+Account – Funding Source page.

    Redirect the customer to the relevant redirectUrl:
    Press tab to open…

    The customer enters their Social Security Number (SSN), and presses Continue.
    Example Play+ New Account Enrollment Page

    The Fund My Play+Account – Funding Source page is displayed, and the customer selects a Funding Source.
    The following steps show an example of selecting the “BANK CARD” option:
    1. Press Bank Card.
      Example Fund My Play+ Account – Funding Source Page

    2. Enter the Security Code (CVV), Amount, accept the Terms and Conditions, and press Continue.
      Example Fund My Play+ Account – Funding Amount Page

    3. Play+ Account Balance is updated automatically to reflect the additional funds.
      Example Fund My Play+ Account – Congratulations! Page

    New Play+ Account Enrollment)
    The customer enters their Social Security Number (SSN), and presses Continue.
    Example Play+ New Account Enrollment Page

    Fund My Play+ Account
    The Fund My Play+Account – Funding Source page is displayed, and the customer selects a Funding Source.
    The following steps show an example of selecting the “BANK CARD” option:
    1. Press Bank Card.
      Example Fund My Play+ Account – Funding Source Page

    2. Enter the Security Code (CVV), Amount, accept the Terms and Conditions, and press Continue.
      Example Fund My Play+ Account – Funding Amount Page

    3. Play+ Account Balance is updated automatically to reflect the additional funds.
      Example Fund My Play+ Account – Congratulations! Page

Play+ Payments

  1. Display the Play+ UI, and then allow customers to perform payments using the Play+ APM.
    (For details, see Setting up the Play+ UI Object and Initiate the Play+ UI.)
  2. Send the createSightlinePayment() request as shown below:
    (For a list of the standard mandatory parameters for a payment, see the method.)
    Press tab to open…
    The customer captures the SSN Last 4 Digits.
    (The value should be sent in the userDetails.identification parameter.)
    Example Play+ UI – Without UPO (showing the SSN Last 4 Digits input field)

    Example createSightlinePayment() Request without UPO
    sfc.createSightlinePayment({
    "sessionToken": sessionData.sessionToken,
    "merchantId": sessionData.merchantId,
    "merchantSiteId": sessionData.merchantSiteId,
    "clientUniqueId": "695701003A",
    "clientRequestId": "R4WXUZUZ7A",
    "billingAddress": {
      "email": "[email protected]",
      "country": "US",
      "firstName": "John",
      "lastName": "Smith",
      "phone": "3459873345",
      "cell": "6175553333",
      "address": "22 Main Street Updated.",
      "city":"Boston",
      "zip":"02460",
      "county":"Suffolk",
      "state": "",
      "language": "en"
    },
    "userDetails": {
      "firstName": "John",
      "lastName": "Smith",
      "email": "[email protected]",
      "phone": "3459873345",
      "cell": "6175553333",
      "dateOfBirth": "2000-06-30",
      "address": "22 Main Street Updated.",
      "city":"Boston",
      "zip":"02460",
      "county":"Suffolk",
      "state": "",
      "country": "US",
      "language": "en",
      "identification": "053942684"
    },

  }, function(crRes) {
    console.log(crRes);
  })

    Example createSightlinePayment() Request with UPO
    sfc.createSightlinePayment({
    "sessionToken": sessionData.sessionToken,
    "merchantId": sessionData.merchantId,
    "merchantSiteId": sessionData.merchantSiteId,
    "clientUniqueId": "695701003A",
    "clientRequestId": "R4WXUZUZ7A",
    "paymentOption": {
      "userPaymentOptionId": "8076811"
    },
    "billingAddress": {
      "email": "[email protected]",
      "country": "US",
      "firstName": "John",
      "lastName": "Smith",
      "phone": "3459873345",
      "cell": "6175553333",
      "address": "22 Main Street Updated.",
      "city":"Boston",
      "zip":"02460",
      "county":"Suffolk",
      "state": "",
      "language": "en"
    },
    "userDetails": {
      "firstName": "John",
      "lastName": "Smith",
      "email": "[email protected]",
      "phone": "3459873345",
      "cell": "6175553333",
      "dateOfBirth": "2000-06-30",
      "address": "22 Main Street Updated.",
      "city":"Boston",
      "zip":"02460",
      "county":"Suffolk",
      "state": "",
      "country": "US",
      "language": "en",
      "identification": "053942684"
    },

  }, function(crRes) {
    console.log(crRes);
  })

    Without UPO (default)
    The customer captures the SSN Last 4 Digits.
    (The value should be sent in the userDetails.identification parameter.)
    Example Play+ UI – Without UPO (showing the SSN Last 4 Digits input field)

    Example createSightlinePayment() Request without UPO
    sfc.createSightlinePayment({
    "sessionToken": sessionData.sessionToken,
    "merchantId": sessionData.merchantId,
    "merchantSiteId": sessionData.merchantSiteId,
    "clientUniqueId": "695701003A",
    "clientRequestId": "R4WXUZUZ7A",
    "billingAddress": {
      "email": "[email protected]",
      "country": "US",
      "firstName": "John",
      "lastName": "Smith",
      "phone": "3459873345",
      "cell": "6175553333",
      "address": "22 Main Street Updated.",
      "city":"Boston",
      "zip":"02460",
      "county":"Suffolk",
      "state": "",
      "language": "en"
    },
    "userDetails": {
      "firstName": "John",
      "lastName": "Smith",
      "email": "[email protected]",
      "phone": "3459873345",
      "cell": "6175553333",
      "dateOfBirth": "2000-06-30",
      "address": "22 Main Street Updated.",
      "city":"Boston",
      "zip":"02460",
      "county":"Suffolk",
      "state": "",
      "country": "US",
      "language": "en",
      "identification": "053942684"
    },

  }, function(crRes) {
    console.log(crRes);
  })

    With UPO
    Example createSightlinePayment() Request with UPO
    sfc.createSightlinePayment({
    "sessionToken": sessionData.sessionToken,
    "merchantId": sessionData.merchantId,
    "merchantSiteId": sessionData.merchantSiteId,
    "clientUniqueId": "695701003A",
    "clientRequestId": "R4WXUZUZ7A",
    "paymentOption": {
      "userPaymentOptionId": "8076811"
    },
    "billingAddress": {
      "email": "[email protected]",
      "country": "US",
      "firstName": "John",
      "lastName": "Smith",
      "phone": "3459873345",
      "cell": "6175553333",
      "address": "22 Main Street Updated.",
      "city":"Boston",
      "zip":"02460",
      "county":"Suffolk",
      "state": "",
      "language": "en"
    },
    "userDetails": {
      "firstName": "John",
      "lastName": "Smith",
      "email": "[email protected]",
      "phone": "3459873345",
      "cell": "6175553333",
      "dateOfBirth": "2000-06-30",
      "address": "22 Main Street Updated.",
      "city":"Boston",
      "zip":"02460",
      "county":"Suffolk",
      "state": "",
      "country": "US",
      "language": "en",
      "identification": "053942684"
    },

  }, function(crRes) {
    console.log(crRes);
  })

JSFiddle Play+ Examples

You can use the JSFiddle demonstration environment to view, run and customize Play+ examples below

Editing Example 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.

Example JSFiddle – Web SDK

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

Example JSFiddle – Simply Connect

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

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

Last update iconLast modified September 2024