The Field container

The field container is the DOM element where Smart Fields are rendered and managed. Proper container setup is essential for ensuring optimal performance, security, and user experience.

Container Requirements

When creating a container for a Smart Field, observe the following:

Each contained field must have a unique id or selector so the SDK can target it for mounting.
The container should be empty when the SDK mounts; no manual <input> or <iframe> inside.
The checkout page must be served over HTTPS (to avoid Browser MixedContent warnings or blocking of iframes).
The container should be large enough to host the iframe and apply custom styling either via CSS applied to the container or via options passed to the SDK.

Example HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Localpayment Smart Fields</title>
    <script src="https://sdk.stage.localpayment.com/localpayment-sdk.min.js"></script>
  </head>
  <body>
      <form id="payment-form">

      <!-- Card Field Container -->
      <div class="form-group">
        <label for="pan-container">Card Number</label>
        <div id="pan-container"></div>
        <div class="error-message" id="pan-error"></div>
      </div>

      <!-- Expiration Date Field Container -->
      <div class="form-group">
        <label for="expiration-container">Expiration Date</label>
        <div id="expiration-container"></div>
        <div class="error-message" id="expiration-error"></div>
      </div>

      <!-- CVV Field Container -->
      <div class="form-group">
        <label for="cvv-container">CVV</label>
        <div id="cvv-container"></div>
        <div class="error-message" id="cvv-error"></div>
      </div>

      <button type="submit">Pay Now</button>
    </form>
  </body>
</html>