Adyen / adyen-web

Adyen Web Drop-in and Components
https://docs.adyen.com/online-payments
MIT License
187 stars 132 forks source link

Cann't integrate with Adyen Drop in #2912

Closed SaraDev77 closed 1 month ago

SaraDev77 commented 1 month ago

I'm trying to establish connection Adyen And it keeps refusing the read of Adyen checkout instance

this is the code I'm using , and all of session keys and every thing is done in our app backend

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Adyan</title>
    <link rel="stylesheet"
          href="https://checkoutshopper-test.cdn.adyen.com/checkoutshopper/sdk/6.3.0/adyen.css"
          integrity="sha384-pC2TKxh6gMtWIUiXzlw5Jnq9ZtnyuPT0ymaHY6skdegLVNDMNiiQ7/NFixA87/Wb"
          crossorigin="anonymous">
    <script src="https://checkoutshopper-test.cdn.adyen.com/checkoutshopper/sdk/6.3.0/adyen.js"
            integrity="sha384-PpkKjJdtlCZuAK7HWeMaOwzrQMGgAWThLG+QZe0sxlohYwfVPP+G65HBrWbgwSoE"
            crossorigin="anonymous"></script>
    <script>
        // This function will run when the script is fully loaded
        async function initializeAdyenCheckout() {
            const configuration = {
                session: {
                    id: 'CS0D6...',
                    sessionData: 'Ab02b4c0....'
                },
                environment: 'test',
                amount: {
                    value: 50,
                    currency: 'EUR'
                },
                locale: 'nl-NL',
                countryCode: 'NL',
                clientKey: 'test_',
                onPaymentCompleted: (result, component) => {
                    console.info(result, component);
                },
                onPaymentFailed: (result, component) => {
                    console.info(result, component);
                },
                onError: (error, component) => {
                    console.error(error.name, error.message, error.stack, component);
                }
            };

            // Create an instance of AdyenCheckout, to pass when you create an instance of Drop-in.
            const checkout = await AdyenCheckout(configuration);

            const dropinConfiguration = {
                // Required if you import individual payment methods.
                paymentMethodComponents: [Card, PayPal],

                // Drop-in configuration only has properties and events related to itself. Drop-in configuration cannot contain global configuration.
                onReady: () => {},
                instantPaymentTypes: ['applepay', 'googlepay'],

                // Configuration for individual payment methods.
                paymentMethodsConfiguration: {
                    card: {
                        // onError configuration for card payments. Overrides the global configuration.
                        onError: () => {}
                    }
                }
            };

            // Create an instance of Drop-in, passing the instance of AdyenCheckout and configuration object for Drop-in.
            const dropin = new Dropin(checkout, dropinConfiguration).mount('#dropin');
        }

        // Wait for the DOM to fully load, then initialize the Adyen Checkout.
        document.addEventListener('DOMContentLoaded', initializeAdyenCheckout);
    </script>
</head>
<body>
    <div id="dropin"></div>
</body>
</html>

would anyone please help to go forward with my app !

ribeiroguilherme commented 1 month ago

As you are loading the UMD script, the AdyenCheckout and Dropin will be assigned to the window object. You need to pull the references from there: const { AdyenCheckout, Dropin } = window.AdyenWeb