{"type":"doc","content":[{"type":"paragraph","content":[{"text":"There are ","type":"text"},{"text":"two ways","type":"text","marks":[{"type":"strong"}]},{"text":" to integrate the NetValve TokenFieldSDK:","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"HTML Only Configuration Approach","type":"text"}]},{"type":"paragraph","content":[{"text":"This a minimal approach which requires no JavaScript, but doesn't support callbacks. Use this for simple form submissions where no custom handling is needed.","type":"text"}]},{"type":"paragraph","content":[{"text":"Simply wrap your existing payment form with the ","type":"text"},{"text":"netvalve-tokenfields","type":"text","marks":[{"type":"code"}]},{"text":" element:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":"\n \n","type":"text"}]},{"type":"paragraph","content":[{"text":"Important: The payment ","type":"text"},{"text":"

","type":"text","marks":[{"type":"code"}]},{"text":" ideally should be a direct child of ","type":"text"},{"text":"","type":"text","marks":[{"type":"code"}]},{"text":". The SDK will search for the nearest form element to intercept form submissions and handle tokenization.","type":"text"}]},{"type":"paragraph","content":[{"text":"See all the allowed HTML ","type":"text"},{"text":"field attributes/properties","type":"text","marks":[{"type":"link","attrs":{"href":"https://netvalve.atlassian.net/wiki/spaces/ND/pages/147914821"}}]},{"text":".","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Javascript SDK Configuration Approach","type":"text"}]},{"type":"paragraph","content":[{"text":"This approach provides more control and allows you to handle callbacks. ","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Start by providing or identifying ","type":"text"},{"text":"div","type":"text","marks":[{"type":"code"}]},{"text":" containers ","type":"text"},{"text":"where the fields will be rendered to.","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"codeBlock","content":[{"text":"\n

\n \n","type":"text"}]},{"type":"orderedList","attrs":{"order":2},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Then add a script. In the browser window is a ","type":"text"},{"text":"Netvalve","type":"text","marks":[{"type":"code"}]},{"text":" property. Use this to call the ","type":"text"},{"text":"initTokenFields","type":"text","marks":[{"type":"code"}]},{"text":".","type":"text"}]}]}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"window.Netvalve.initTokenFields({ \n formSelector: '#payment-form', // form element, or form container div\n payButtonId: 'submitBtn', // required if using onSubmitPayment\n fields: {\n cardNumber: {\n containerSelector: '#card-number-container' \n },\n cardCvv: {\n containerSelector: '#cvv-container'\n },\n cardExpiry: {\n containerSelector: '#expiry-container'\n }\n },\n onSubmitPayment\" (paymentToken) => {\n // form submission logic\n console.log('The valid payment token is: ' + paymentToken)\n }\n});","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Script load sequence ","type":"text"}]},{"type":"paragraph","content":[{"text":"The script containing the ","type":"text"},{"text":"Netvalve.initTokenFields","type":"text","marks":[{"type":"code"}]},{"text":" call must come AFTER the script appended in ","type":"text"},{"type":"inlineCard","attrs":{"url":"https://netvalve.atlassian.net/wiki/spaces/ND/pages/147947535"}},{"text":" .","type":"text"}]},{"type":"paragraph","content":[{"text":"If you do not control this, or you want to ensure ","type":"text"},{"text":"window.Netvalve","type":"text","marks":[{"type":"code"}]},{"text":" is defined, use the custom event: ","type":"text"},{"text":"netvalve-sdk-ready","type":"text","marks":[{"type":"code"}]},{"text":":","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"// Wait for the SDK to be ready\nwindow.addEventListener('netvalve-sdk-ready', function(event) {\n if (event.detail.success) {\n // Initialize the token fields with configuration\n window.Netvalve.initTokenFields({ ..//configutation })\n }\n});","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Next Step","type":"text"}]},{"type":"paragraph","content":[{"text":"View all the ","type":"text"},{"text":"JavaScript SDK configuration properties","type":"text","marks":[{"type":"link","attrs":{"href":"https://netvalve.atlassian.net/wiki/spaces/ND/pages/147914806"}}]},{"text":".","type":"text"}]},{"type":"paragraph","content":[{"text":"Configure the SDK for styling, validation and form submission.","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"inlineCard","attrs":{"url":"https://netvalve.atlassian.net/wiki/spaces/ND/pages/147849287"}},{"text":" ","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"inlineCard","attrs":{"url":"https://netvalve.atlassian.net/wiki/spaces/ND/pages/147947581"}},{"text":" ","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"inlineCard","attrs":{"url":"https://netvalve.atlassian.net/wiki/spaces/ND/pages/147881992"}},{"text":" ","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Final Step","type":"text"}]},{"type":"paragraph","content":[{"text":"Use the token in place of the credit card data in the Sale API.","type":"text"}]},{"type":"paragraph","content":[{"type":"inlineCard","attrs":{"url":"https://netvalve.atlassian.net/wiki/spaces/ND/pages/147882002"}},{"text":" ","type":"text"}]}],"version":1}