Adding Card Fields

The SDK provides three web components for collecting card details:

<netvalve-cardnumber></netvalve-cardnumber>
<netvalve-cvv></netvalve-cvv>
<netvalve-expiry><netvalve-expiry>

These components can be placed anywhere within your payment form.

Example:

  <! -- Payment Form -->
  <form action="/your-payment-endpoint">
      <input name="cardHolderName" />
      <netvalve-cardnumber></netvalve-cardnumber>
      <netvalve-cvv></netvalve-cvv>
      <netvalve-expiry></netvalve-expiry>
      <button type="submit">Pay</button>
  </form>

Each component creates a secure iframe that renders an input element, ensuring card data is collected securely.

This ensures that sensitive card data never touches your servers.

The iframes are automatically sized to match your input styling and will respond to your page's CSS, making them appear as native input fields to your users.

Next Step

Set up the SDK using either:

an HTML Approach
a JavaScript config approach.

Netvalve Documentation

Adding Card Fields

Next Step

Related pages