Web SDK

Render Form

Include WebSDK

<script src="https://sdk.cons.networktoken.upcf.jpmmps.com/ntc.sdk.js"></script>

info

Please check Sandbox vs. Production page for latest url.

<!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.jpmmps.com';
    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>

Render Form​

Include WebSDK​

Configuration Options​

Promise​

Complete integration sample​

Render Form

Include WebSDK

Configuration Options

Promise

Complete integration sample