There are two ways to integrate the NetValve TokenFieldSDK:

HTML Only Configuration Approach

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.

Simply wrap your existing payment form with the netvalve-tokenfields element:

<netvalve-tokenfields>
    <form action="/your-payment-endpoint">
        <netvalve-cardnumber></netvalve-cardnumber>
        <netvalve-cvv></netvalve-cvv>
        <netvalve-expiry></netvalve-expiry>
        <button type="submit">Pay</button>
    </form>
</netvalve-tokenfields>

Important: The payment <form> ideally should be a direct child of <netvalve-tokenfields>. The SDK will search for the nearest form element to intercept form submissions and handle tokenization.

See all the allowed HTML field attributes/properties.

Javascript SDK Configuration Approach

This approach provides more control and allows you to handle callbacks.

  1. Start by providing or identifying div containers where the fields will be rendered to.

<form>
    <div id="card-number-container"></div>
    <div id="cvv-container"> </div>
    <div id="expiry-container"> </div>
    <button type="submit">Pay</button>
</form>

  1. Then add a script. In the browser window is a Netvalve property. Use this to call the initTokenFields.

window.Netvalve.initTokenFields({ 
  formSelector: '#payment-form', // form element, or form container div
  payButtonId: 'submitBtn', // required if using onSubmitPayment
  fields: {
      cardNumber: {
          containerSelector: '#card-number-container' 
      },
      cardCvv: {
          containerSelector: '#cvv-container'
      },
      cardExpiry: {
          containerSelector: '#expiry-container'
      }
   },
   onSubmitPayment" (paymentToken) => {
     // form submission logic
     console.log('The valid payment token is: ' + paymentToken)
   }
});

Script load sequence

The script containing the Netvalve.initTokenFields call must come AFTER the script appended in Initialize Token Fields .

If you do not control this, or you want to ensure window.Netvalve is defined, use the custom event: netvalve-sdk-ready:

// Wait for the SDK to be ready
window.addEventListener('netvalve-sdk-ready', function(event) {
    if (event.detail.success) {
        // Initialize the token fields with configuration
        window.Netvalve.initTokenFields({ ..//configutation })
    }
});

Next Step

View all the JavaScript SDK configuration properties.

Configure the SDK for styling, validation and form submission.

Final Step

Use the token in place of the credit card data in the Sale API.

Call Sale API with token