SDK Integration Approaches

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-cvv />
        <netvalve-expiry />
        <button type="submit">Pay</button>
    </form>
</netvalve-tokenfields>

Important: The payment <form> must be a direct child of <netvalve-tokenfields>. This allows the SDK to properly 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.

In the browser window is a Netvalve property. Use this to call the initTokenFields.
Important: The 3 netvalve fields for cardnumber, cvv and card expiry must be placed in the HTML, as per the Adding Card Fields step.

Netvalve.initTokenFields({
    formId: 'payment-form',              // Required
    payButtonId: 'submit-button',        // Required if using onSubmitPayment
    onSubmitPayment: (paymentToken) => { // Optional
        console.log('Payment token:', paymentToken);
    },
    onValidate: (message) => {           // Optional
        console.log('Validation:', message);
    }
});

If you provide an onSubmitPayment callback, you must also provide the payButtonId

View all the JavaScript SDK properties

Next Step

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.

https://hpitdxb.atlassian.net/wiki/spaces/GW/pages/1140883462