Giters

chargebee / chargebee-checkout-samples

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Container element not specified for number field

rodrigoreis22 opened this issue · comments

commented

I can't get this example to work https://github.com/chargebee/chargebee-checkout-samples/tree/master/components/jquery/example1

It's giving me this error:

Uncaught (in promise) no_container_element: Container element not specified for number field
    at r.value (https://js.chargebee.com/v2/chargebee-components.js:1:28385)
    at http://localhost:9000/index.js:78:41

index.html:

<html>
  <head>
    <!-- Include chargebee js script -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://js.chargebee.com/v2/chargebee.js"></script>
    <script src="index.js"></script>
  </head>
  <body>
    <form>
      <!-- Specify container elements for mounting card elements -->
      <!-- Chargebee iframes get mounted here... -->
      <!-- Card Number container -->
      <div id="card-number" class="ex1-input"></div>
      <!-- Card Expiry container -->
      <div id="card-expiry" class="ex1-input"></div>
      <!-- Card CVV container -->
      <div id="card-cvc" class="ex1-input"></div>
      
      <!-- Container for displaying validation errors -->
      <div id="error" role="alert"></div>
    </form>
  </body>
</html>

index.js:

// On document ready
$(document).ready(function() {
  // Initialize chargebee with your Site & Publishable API Key 
  var cbInstance = Chargebee.init({
    site: '[removed]',
    publishableKey: '[removed]'
  });

  var options = {
    // Custom fonts
    fonts: [
      'https://fonts.googleapis.com/css?family=Roboto:300,500,600'
    ],

    // CSS Classes that gets applied on the container elements on different field states
    classes: {
      focus: 'focus',
      invalid: 'invalid',
      empty: 'empty',
      complete: 'complete',
    },

    // Custom placeholders
    placeholder: {
      number: "4111 1111 1111 1111",
      expiry: "MM / YY",
      cvv: "123"
    },

    // Style customization
    style: {
      // Styles for default state
      base: {
        color: '#333',
        fontWeight: '500',
        fontFamily: 'Roboto, Segoe UI, Helvetica Neue, sans-serif',
        fontSize: '16px',
        fontSmoothing: 'antialiased',

        // Input text color on focus
        ':focus': {
          color: '#424770',
        },

        // Default placeholder color
        '::placeholder': {
          color: 'transparent',
        },

        // Placeholder color when focused
        ':focus::placeholder': {
          color: '#7b808c',
        },
      },

      // Styles applied when field is in an invalid state
      invalid: {
        color: '#e41029',

        ':focus': {
          color: '#e44d5f',
        },

        '::placeholder': {
          color: '#FFCCA5',
        },
      },
    },
  }

  // Load chargebee components
  cbInstance.load("components").then(() => {

    // Create a card component, with the options
    var cardComponent = cbInstance.createComponent("card", options);
    
    // Create card fields (fields-mode)
    cardComponent.createField("number").at("card-number");
    cardComponent.createField("expiry").at("card-expiry");
    cardComponent.createField("cvv").at("card-cvc");

    // Mount card component
    cardComponent.mount();

    cardComponent.tokenize().then(data => {
      // Get chargebee token here
      console.log(data.token) 
    })
  });
});
commented

Hi @rodrigoreis22!, You should specify a selector instead of directly providing the ID to .at() function. Reference doc

Example:
cardComponent.createField("number").at("#card-number)

Hope this helps.
-Dinesh

commented

Closing the issue. Please raise a new one if the problem persists.