Closed SaraDev77 closed 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 !
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
AdyenCheckout
Dropin
window
const { AdyenCheckout, Dropin } = window.AdyenWeb
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
would anyone please help to go forward with my app !