Error: "Can not find a node to attach Checkout to", "Undefined" injected into checkout DIV about adyen-web-sdk-sample-code HOT 16 CLOSED

Thank you for spotting this issue and the reproduction steps, the HTML + Javascript versioning do not seem to align in our demo code. The only way to solve this, is for us to version this repo (even for demo purposes).

from adyen-web-sdk-sample-code.

i have the same error, using v1.2.0

from adyen-web-sdk-sample-code.

Hey @jorwan , could you tell us which javascript libraries you are using and where (on the page) you are loading in the library?

from adyen-web-sdk-sample-code.

I'm having the same issue, running v1.2.0. The script is loaded in the header together with jquery.

from adyen-web-sdk-sample-code.

@maxharland Could you give us some more info?:

• Browser usage
• How you define the node (preferably your checkout SDK initiation javascript
• Whether you are loading in jQuery before the checkoutSDK

We have not been able to reproduce the issue.

from adyen-web-sdk-sample-code.

Thanks for the quick reply!

I tried both Chrome and Safari.

This is the Javascript function that initiates the SDK:

  /**
   * Configure Adyen Checkout
   */
  var adyenCheckout = ( data ) => {

    var sdkConfigObj = {
    	context : 'test'
    }

    var checkout = chckt.checkout(data, '.adyen', sdkConfigObj);
    
    chckt.hooks.beforeComplete = function(node, paymentData) {
      // `node` is a reference to the Checkout container HTML node.
      // `paymentData` is the result of the payment. Includes the `payload` variable,
      // which you should submit to the server for the Checkout API /verify call.

      return false; // Indicates that you want to replace the default handling.
    };
  };

I'm receiving a valid response from the test-server which I'm passing to the above function through this snippet:

          <script type="text/javascript">
            $(document).ready( () => {

                var data = <?php echo $setupData; ?>;
                console.log( data );
                widgets.adyenCheckout(data);
            });
          </script>

I'm loading jQuery before the SDK

from adyen-web-sdk-sample-code.

Could you expose part of your setupResponse data object and post it here?
Please obfuscate any data you don't want to expose --> like the origin, originKey, publicKey and publicKeyToken.

• Does it contain the "HTML" object?
• Could you try echo'ing it as a javascript string and then parse it (for debugging purposes).

Make sure that in your setup call the flag:
'html' => 'true',
is set.

from adyen-web-sdk-sample-code.

I just found the mistake.
I did not send the 'origin' property in the setup call.
Now it works perfectly

from adyen-web-sdk-sample-code.

Btw this was the server response:

{
  authoriseFromSDK: 'true',
  disableRecurringDetailUrl: 'https://checkoutshopper-test.adyen.com/checkoutshopper/services/PaymentInitiation/v1/disableRecurringDetail',
  generationtime: '2018-01-25T13:18:43Z',
  initiationUrl: 'https://checkoutshopper-test.adyen.com/checkoutshopper/services/PaymentInitiation/v1/initiate',
  logoBaseUrl: 'https://checkoutshopper-test.adyen.com/checkoutshopper/img/pm/',
  origin: '',
  payment: {
    amount: {
      currency: 'EUR',
      value: 1995
    },
    countryCode: 'DE',
    reference: '16',
    sessionValidity: '2018-01-25T14:18:43Z',
    shopperLocale: 'de_DE',
    shopperReference: '[email protected]'
  },
  paymentData: ‚XXX‘,
  paymentMethods: [
	…
  ],
  publicKey: ‚XXX‘,
  publicKeyToken: ‚XXX‘
}

Maybe the server should deny the setup request if the html flag is set to true and the origin property is missing, so others won't make the same mistake.

Thanks 👍

from adyen-web-sdk-sample-code.

Thanks, good point 👍.

from adyen-web-sdk-sample-code.

An error message has been added to our code base (API). It will be released in the next scheduled release. (First week of February).

from adyen-web-sdk-sample-code.

Hi,

I am also having the same issue, where i am not able to bind the div element using
checkout = chckt.checkout(jsonreponse, '.checkout', sdkConfigObj);

I am able to see the json response from https://checkout-test.adyen.com/services/PaymentSetupAndVerification/v32/setup.

Please help me on this issue.

Thanks,
Vinay

from adyen-web-sdk-sample-code.

Hey Vinay,

1. Do you have any more information on how your page looks, code-wise?
2. Whether you are using this sample code (including the setup call)
3. What JSON response you get from the setup call (excluding your publicKeyToken), e.g. is there an HTML object in this response?

from adyen-web-sdk-sample-code.

Thanks for your reply. Actually it is working fine now. I had some issue with the Origin url which i was using in the setup call.

from adyen-web-sdk-sample-code.

use jQuery on document ready, since the Adyen script wants to set the div even if the page is not done loading. Worked for me

from adyen-web-sdk-sample-code.

use jQuery on document ready, since the Adyen script wants to set the div even if the page is not done loading. Worked for me

Thanks for your input.
We actually advise to only initiate the checkout when you have a div / dom element ( effectively adding the javascript to the bottom of the page or onDocumentReady).
Unless chckt.checkout() is called we don't append anything / do not create a div within the page.

from adyen-web-sdk-sample-code.