Web SDK

Last changes: 03-21-2023

Render Form

Include WebSDK

<script src="https://sdk.cons.networktoken.upcf.jpmmps.com/ntc.sdk.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>NETWORK TOKEN PROVISIONING</title>
    <script src="https://sdk.cons.networktoken.upcf.jpmmps.com/ntc.sdk.js"></script>
</head>
<body>
  <div id="container">
    <!-- Card data collection form is rendered here.-->
  </div>
</body>
</html>
Promise window.NTCWebSdk.render(container, env, tokenId, options)

Calling NTCWebSdk.render(...) function will trigger load of the secured credit card collection form for the given tokenId and render it into the provided html container. Other customization options are provided in the 'options' parameter. 

window.NTCWebSdk.render(container, env, tokenId, {
    
    'css': '.foo{color: white}',
    'cssUrls': [
        'https://your-stylesheets.jpmmps.com/style1.css'
    ],
    'locale': 'en-US',
    'paymentOptionCodes': ['VISA', 'MSTRCRD'],
    'ccBlacklist': ['(a-z).*'],
    'submitButtonTitle': 'CONTINUE'

}).then(result => {
    ...
    ...
}).catch(error => {
    ...
    ...
}).finally(() => {
    ...
    ...
});

Configuration Options

Rendering method require the configuration object containing the parameters reflecting your rendering choice.

Field Description Data Type Mandatory
container Container on integrator's website, which will be used to render the form. string Yes
env Base URL of the SmartPay WebAPI URI Yes
tokenid The ID of the network token, returned from Create Token API. UUID Yes
options.css Inline CSS selectors which are injected into the rendered form. string No
options.cssUrls Array containing list of URLs to externally hosted stylesheets to be injected into the rendered form html. Array(string) No
options.locale Locale of the credit card form, e.g. en-US. string Yes
options.paymentOptionCodes A list of credit card brand codes, which will be accepted by the form. Possible values: VISA, MSTRCRD, AMEX Array(string) yes
options.ccBlacklist A list of regular expressions for blacklisting specific card BIN ranges. Array(string) No
options.submitButtonTitle Text, which will be displayed on the submit button string Yes

Promise

The SDK returns a promise when the render function was executed. The promise can be handled by the integrator in order to do any additional steps.

Once received success result, actual token provisioning status should be check via Get Token API.

Errors in the SDK or in provisioning process need to be handled in catch() section of the promise object. The promise has the following parameters: code, message.

The code parameter contains the actual error code as per the table below. Message provides the exact message of the error, to be used in debugging and as reference for our customer support.

Error code Description
cannot_render A message explaining which property is not correct and why”.
cannot_decode "Env is not a non empty string” OR “TokenId is not a non empty string"
invalid_session The provided payment form session is invalid - redirectUrl property is missing.
incorrect_request If request to create payment form fails or backend validation errors will be shown with this error code
tokenisation_failed The tokenisation operation failed.

Complete integration sample

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>NETWORK TOKEN PROVISIONING</title>
    <script src="https://sdk.cons.networktoken.upcf.jpmmps.com/ntc.sdk.js"></script>
  <style>
    .container > iframe { height: 600px; }
  </style>
</head>
<body>
<label>
    <span>Token id</span>
    <input type="text" id="token-id" placeholder="TokenID">
</label>
<input type="button" value="Render" onclick="render()">
<div>
  <label>
    <span>Status: </span>
    <span id="status"/>
  </label>
</div>
<div id="iframe_container" class='container'></div>
<script>
  function render() {
    const container = 'iframe_container';
    const env = 'https://api.cons.smartpay.vwfs.io';
    const tokenId = document.getElementById('token-id').value;
  let status = "";
    const options = {
      'css': '.foo{color: white}',    
      'cssUrls': ["https://your-stylesheets.jpmmps.com/style1.css"],          
      'locale': 'en-US',
      'paymentOptionCodes': ['VISA', 'MSTRCRD'],
      'ccBlacklist': ['(a-z).*'],
      'submitButtonTitle': 'TOKENIZE!',
    };
    window.NTCWebSdk.render(container, env, tokenId, options).then(result => {
      console.log('On Success', result);
    status = "SUCCESS";
    }).catch(error => {
      console.error('On error');
      console.log('Code:', error.code);
      console.log('Message: ', error.message);
    status = "FAIL. See console logs.";
    }).finally(() => {
    var statusElement = document.getElementById('status');
    statusElement.innerHTML = status;
      console.log('Finished');
    });
  }
</script>
</body>
</html>