# 3D Secure Authentication Integration - riskJS Component

# Import The RiskJs

<script src="https://cdn.pyvio.com/plugins/risk-control-v1.js"></script>

# Initialize

# Constructor Method

window.PyvioRiskPlugin(options);

Property	Type	Required(Y/N)	Desc
options.env	String(12)	Y	sandbox/prod
options.websiteId	String(64)	Y	Pyvio WebsiteId
options.merchantUserId	String(64)	Y	Unique identifier of the merchant website
options.riskRequestId	String(64)	Y	Unique identifier for order association
options.requestSource	String(64)	N	S2S/CASHIER Default:CASHIER

# Invocation Example

let options = {
  env: "sandbox",
  websiteId: "WS235625235325237632",
  merchantUserId: "UT15463246325436254",
  riskRequestId: "273563256343257",
  requestSource: "CASHIER",
};

const myRiskPlugin = new window.PyvioRiskPlugin(options);

The initialization part of the riskJs component has been completed.

# Collect Card Information For 3D Init

In order to collect the complete and correct card number, this method can be triggered after the card number and card expiration input lose focus.
After initialization is completed, the plugin injects jsGeneratedData into the callback function.
The callback is an asynchronous method. If the current transaction requires 3DS verification, you need to wait for the callback method to return jsGeneratedData before proceeding with the verification.

# Constructor Method

myRiskPlugin.pyvioRiskInit(options, callback);

cardInfo and cardToken, one of them must be provided.

cardInfo

Property	Type	Required(Y/N)	Desc
options.cardNumber	String(32)	N	International credit card number
options.cardExpireYear	String(32)	N	Expiration Year - 4 digits
options.cardExpireMonth	String(32)	N	Expiration Month - 2 digits

cardToken

Property	Type	Required(Y/N)	Desc
options.cardToken	String(32)	N	Can be used as a replacement for cardInfo

callback

Property	Type	Required(Y/N)	Desc
callback	Function	N	The callback function can access jsGeneratedData

# Invocation Example

/**
 * The initOptions parameter can be passed in the following two ways
 */
let initOptions = {
  cardNumber: cardNumber,
  cardExpireMonth: cardExpireMonth,
  cardExpireYear: cardExpireYear,
};
let initOptions = {
  cardToken: cardToken,
};

myRiskPlugin.getRiskInit(initOptions, callback);

function callback(jsGeneratedData) {
  console.log(jsGeneratedData);
}

# jsGeneratedData

Property	Type	Desc
channel_fingerprint_info	Array	Fingerprint Information
platform	String(32)	Device Type

channel_fingerprint_info

Property	Type	Desc
channel_name	String(32)	Channel Name
fingerprint_id	String(32)	Fingerprint ID

When making a payment, the jsGeneratedData data returned from the callback needs to be passed as risk_info to the create order API.

# 3DS Verification Processing

# How To Handle

After the merchant calls the API for unified order, it needs to determine whether 3DS verification processing is required based on the transaction status and the handling indicator acs_url in the response.
If the payment status is PENDING and acs_url has a value, the merchant's front-end needs to execute the pyvioRiskValid function provided by the risk control JS.
Pass the threeDUnionParams returned by the API as an argument to the pyvioRiskValid function. The risk control JS will guide the browser to the 3D challenge page, where the cardholder needs to successfully complete the 3D verification in order to complete the transaction successfully.

Constructor Method

myRiskPlugin.pyvioRiskValid(threeDUnionParams, callback);

Property	Required(Y/N)	Desc
threeDUnionParams	Y	The data returned after calling the create order API
callback	N	The merchant can handle the normal payment process here. If the transaction enters the 3D process, this callback will not be executed. Otherwise, execute this callback function to handle the normal payment logic.