Initialization

Load JS

URL

https://pay-cdn.pingpongx.com/production-fra/static/riskDefense/pingpongRiskDefense.min.js

Initialize JS

Caution

For sandbox testing, set env=SANDBOX. For production environment, set env=PRODUCTION.

JavaScript

const pp = new PingPongRiskDefense({
    env: 'SANDBOX'|'PRODUCTION',
    accId: string,
    clientId: string,
    requestId: string,
    merchantUserId: string,
    merchantTransactionId: string
})

Property	Type	Required	Description
env	string	Yes	Current service environment SANDBOX PRODUCTION
accId	string	Yes	PingPong store ID
requestId	string	No	End-to-end transmission parameter
merchantUserId	string	No	Cardholder's member ID on merchant website
merchantTransactionId	string	No	Should be passed as merchantTransactionId in checkout

Get 3DS and Risk Control Parameters

Get generatedData

Execute this step to obtain generatedData before initiating payment request to PingPongCheckout, and pass it to the payment interface during payment.

JavaScript

const generatedData = pp.getGeneratedData()

The returned generatedData structure is as follows:

JavaScript

{
    browserInfo: {
        acceptHeader: string,
        colorDepth: number,
        language: string,
        screenHeight: number
        screenWidth: number
        timeZoneOffset: number
        userAgent: string
        javaEnabled: boolean
        javaScriptEnabled: boolean
    },
    jsGeneratedData: {
        fingerPrint: string,
        forterSiteId: string,
        forterTokenCookie: string | null
    }
}

Order and Payment Interface Message Assembly

Fill browserInfo

When requesting PingPongCheckout's Order and Payment interface, pass the broswerInfo parameters obtained from generatedData in the browserInfo parameter.

Property	Type	Description
language	string	Shopper's browser navigator.language value (as defined in IETF BCP 47)
screenWidth	int	Cardholder's terminal screen width (in pixels)
javaEnabled	bool	Whether cardholder's terminal can execute Java
javaScriptEnabled	bool	Indicates if shopper's browser can execute JavaScript. If field is missing, defaults to true
acceptHeader	string	HTTP response header information, example value: text/html, application/xhtml+xml, application/xml;q=0.9, image/webp, image/apng, *;q=0.8
colorDepth	string
screenHeight	int	Cardholder's terminal screen height (in pixels)
jetLag	int	Time difference between UTC time and cardholder's browser local time in minutes
userAgent	string	Browser user agent information, example: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.121 Safari/537.36

Fill jsGeneratedData

Property	Type	Description
fingerPrint	string	Device fingerprint
forterSiteId	string	Site identifier
forterTokenCookie	string

Request Payment

After completing the above additional parameter filling, you also need to fill in the necessary business parameters for the Order and Payment interface. After successfully initiating payment, the response message will include the parameter threeDUnionParams

Request message example:

JSON

{
  "accId":"2090020315464510103001",
  "clientId":"2090020315464510103",
  "signType":"SHA256",
  "sign":"{{Sign}}",
  "version":"1.0",
  "bizContent":{
    "captureDelayHours":"0",
    "amount":"3",
    "currency":"USD",
    "merchantTransactionId":"{{merchantTransactionId}}",
    "payResultUrl":"https://test-acquirerpay.pingpongx.com/qa/result.html",
    "payCancelUrl":"https://test-acquirerpay.pingpongx.com/qa/result.html",
    "notificationUrl":"https://test-acquirerpay.pingpongx.com/qa/result.html",
    "language":"en",
    "requestId":"{{requestId}}",
    "tradeCountry":"US",
    "shopperIP":"222.126.52.23",
    "paymentMethod":{
      "type":"scheme",
      "cardInfo":{
        "expireMonth":"12",
        "expireYear":"2024",
        "holderFirstName":"w",
        "holderLastName":"w",
        "number":"5200000000001096",
        "cvv":"103"
      }
    },
    "customer":{
      "firstName":"Jamesbb",
      "lastName":"LeBronbb",
      "email":"test@pingpongx.com",
      "phone":"9157030054"
    },
    "goods":[
      {
        "name":"Product name mepsking1",
        "description":"Product description",
        "sku":"Product SKU111",
        "unitPrice":"1000",
        "number":"1",
        "imgUrl":"https://xiu.mepsking.top/material/1/16606169805015585.png",
        "virtualProduct":"Y"
      }
    ],
    "shippingAddress":{
      "firstName":"Jamesbb",
      "lastName":"LeBronbb",
      "phone":"9157030054",
      "email":"3ds@pingpongx.com",
      "street":"3888 Austin Secret Lane",
      "postcode":"84723",
      "city":"Circleville",
      "state":"UT",
      "country":"US"
    },
    "billingAddress":{
      "firstName":"Jamesbb",
      "lastName":"LeBronbb",
      "phone":"9157030054",
      "email":"3ds@pingpongx.com",
      "street":"3888 Austin Secret Lane",
      "postcode":"84723",
      "city":"Circleville",
      "state":"UT",
      "country":"US"
    },
    "browserInfo":{
      "acceptHeader":"text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8",
      "colorDepth":"24",
      "jetLag":"480",
      "language":"nl-NL",
      "javaEnabled":"true",
      "screenHeight":"723",
      "screenWidth":"1536",
      "userAgent":"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.121 Safari/537.36",
      "windowSize":"05"
    },
    "device":{
      "orderTerminal":"02"
    }
  }
}

Whether 3DS Verification is Required

threeDContinue

• When threeDUnionParams.threeDContinue is true, 3D verification needs to be triggered.
• When threeDUnionParams.threeDContinue is false, it will redirect to the merchant's payment result page shopperResultUrl.

3DS Challenge Page

Use JS trigger Method to Trigger 3DS Challenge Page

Pass the threeDUnionParams returned from the payment interface as input parameter to the trigger function. The risk control JS will guide the browser to the 3D challenge page. The cardholder needs to correctly complete 3D verification for successful transaction.

JavaScript

pp.trigger(threeDUnionParams)