SDK Integration Approaches
- Kyle Robinson
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.
Start by providing or identifying
divcontainers 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>Then add a script. In the browser window is a
Netvalveproperty. Use this to call theinitTokenFields.
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)
}
});
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.