Skip to main content

SDK Integration

There are two ways to integrate the NetValve TokenFieldSDK:

  • HTML Only Configuration;
  • JavaScript SDK Configuration.

HTML Only Configuration Approach​

This is 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>
warning

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.
Example Code
<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 there is a Netvalve property. Use this to call the initTokenFields.
Example Code
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 Loading 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 netvalve-sdk-ready custom event:

Example Code
// 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 Steps​

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. Refer to the Call Sale API With Token document.