• Documentation
  • API Reference
  • Documentation
  • API Reference
Expand All Collapse All
< BACK TO HOME
  • APMs Overview
    • Introduction to APMs
    • APM Integrations and Flows
    • APM Input Fields and APIs
    • APM subMethod Class
    • Account Details Capture
    • APM Countries and Currencies
    • Handling In-Process WebView
  • Global Guides
    • Afterpay
    • Apple Pay
      • Registering with Apple Pay
        • (Manually) Register in the Apple System
          • Create an Apple ID
          • Enroll in the Apple Developer Program
            • Submit an Enrollment Request
            • Complete the Enrollment Process
            • Activate your Apple Developer Program Account
          • Register a Merchant ID in the Apple System
            • Create a Merchant ID
            • Create a Payment Processing Certificate
            • Create a Merchant Identity Certificate
            • Register and Verify Your Domain
      • Nuvei Apple Pay Implementations
        • Payment Page using IFrame
        • Static Apple Pay Button
        • Static Pay Button (Web SDK)
        • Dynamic Apple Pay Button
      • Apple Pay Integration
        • Apple Pay (REST API)
        • Apple Pay (Web SDK)
        • Apple Pay (Simply Connect)
        • Apple Pay Integration Testing
    • Google Pay
      • Google Pay (REST API)
      • Google Pay (Web SDK)
      • Google Pay (Simply Connect)
    • Neteller
    • PayPal
    • PayWithCrypto
    • Skrill
    • Visa Checkout
      • Visa Checkout (REST API)
  • US and Canada Guides
    • ACH
    • Instant Bank Transfer (IBT)
    • Interac Combined
    • Interac eCashout
    • Interac e-Transfer
    • Interac Instant
    • Mazooma
    • PayNearMe
    • PlayPlus
      • PlayPlus (REST)
      • PlayPlus (Web SDK)
    • VIP Preferred
      • VIP Preferred (REST)
      • VIP Pref. (Web SDK/Simply Connect)
  • Europe Guides
    • Aircash
    • BANCOMAT Pay
    • Clearpay
    • Giropay
    • iDEAL
    • MB WAY
    • MobilePay
    • Okto Cash
    • Open Banking
    • PaySafeCard
    • Satispay
    • SEPA Payouts
    • Sofort
  • Latin America Guides
    • CLAVE
    • Colombia Payouts
    • Daviplata
    • Efecty
    • LATAM Payouts
    • Pay4Fun
    • Pay with Cash
    • PIX
    • PIX Payouts
    • PSE
    • QR Redeban
    • STPmex
    • WebPay
  • Asia Pacific Guides
    • AlipayHK
    • Dana
    • DragonPay
    • GCash
    • India Payouts
    • KakaoPay
    • Konbini
    • Local Payments Indonesia
    • NPP
    • QRIS
    • Touch ’n Go
    • TrueMoney
    • WeChat

PlayPlus (Web SDK)

Home    PlayPlus    PlayPlus (Web SDK)

On this page:
  • Introduction
  • Getting Started
    • Setting Up the Play+ UI Object
    • Initiate the Play+ UI
  • Play+ Functions
    • Display the Account Balance
    • Enroll New or Fund Account
    • Play+ Payments
  • JSFiddle Play+ Examples
    • Example JSFiddle – Web SDK
    • Example JSFiddle – Simply Connect

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 set up prerequisites, and are ready to integrate the Play+ payment method 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.
    • 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…

    • Without UPO (default)
    • With UPO
    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": "john.smith@email.com",
        "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": "john.smith@email.com",
        "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": "john.smith@email.com",
        "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": "john.smith@email.com",
        "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 their Play+ account balance
  • Enroll a new Play+ account
  • Fund their Play+ account
  • Payments using Play+

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…
    • Without UPO (default)
    • With UPO
    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
    • 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":"john.smith@email.com",
            "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…

    • New Play+ Account Enrollment)
    • Fund My Play+ Account
    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 createPayment() method.)
    Press tab to open…
    • Without UPO (default)
    • With UPO
    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": "john.smith@email.com",
          "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": "john.smith@email.com",
          "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": "john.smith@email.com",
          "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": "john.smith@email.com",
          "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": "john.smith@email.com",
          "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": "john.smith@email.com",
          "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": "john.smith@email.com",
          "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": "john.smith@email.com",
          "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. Have fun 🙂 !

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".

 

x

    • Language fr
  • Terms of use
  • Privacy Policy
Nuvei. All rights reserved.