How do I succesfully install Adyen Web Drop In on my website? - php

Question

I'm new to programming and I am currently doing an internship to improve. That being said, the last days I've spend over 15 hours trying to get Adyen to work on my webpage (for testing purposes), using a test account.
I've first struggled alot with authorization errors, having refilled API Keys, Client Keys, Origin Keys, HMAC Keys and Account Names hundreds of times. Rereading guides over and over without results, nothing worked. Then suddenly, without changing a thing, it worked using curl in terminal to test a first test payment.
I followed the guide: https://docs.adyen.com/online-payments/drop-in-web?tab=redirect_payment_method_1 (Script method), but started getting errors at step 3 (https://gyazo.com/ed4b386035c681e433b0c3616ed90f97). After spending hours without getting a step closer I started creating comments for every step and just copy/pasting everything. Filling in all keys ect. to see if it would get solved by a later step in the code.
I've replaced my account information and keys with 'xxx':
<!-- Adyen CSS, Step 2 -->
<link rel="stylesheet" href="https://checkoutshopper-test.adyen.com/checkoutshopper/sdk/3.21.0/adyen.css"
integrity="sha384-Qg5+SF5siQdYOd98ZWyvD7nx35CSLtRdiqlLUQBB5gBSLh45T8kkgiDUgCAsMGkt"
crossorigin="anonymous">
<!-- Adyen provides the SRI hash that you include as the integrity attribute. Refer to our release notes to get the SRI hash for the specific version. https://docs.adyen.com/online-payments/release-notes -->
<?php
require __DIR__ . '/vendor/autoload.php';
// ----- https://docs.adyen.com/online-payments/drop-in-web?utm_source=ca_test&tab=codeBlockRDCd3_4#step-1-get-available-payment-methods ----- //
// ----- Step 1: Get available payment methods ----- //
// Set your X-API-KEY with the API key from the Customer Area.
$client = new \Adyen\Client();
$client->setEnvironment(\Adyen\Environment::TEST);
$client->setXApiKey("xxx");
$service = new \Adyen\Service\Checkout($client);
$params = array(
"merchantAccount" => "xxx",
"countryCode" => "NL",
"shopperLocale" => "nl-NL",
"amount" => array(
"currency" => "EUR",
"value" => 1000
),
"channel" => "Web"
);
$result = $service->paymentMethods($params);
// ----- Step 2: Add Drop-in to your payments form ----- //
// 2.1 Add script to bottom //
// 2.2 Add CSS to head //
// 2.3 Create a DOM element //
echo "<div id='dropin-container'></div>";
// 2.4 Create a configuration object //
?>
<script>
const configuration = {
paymentMethodsResponse: paymentMethodsResponse, // The `/paymentMethods` response from the server.
clientKey: "xxx", // Web Drop-in versions before 3.10.1 use originKey instead of clientKey.
locale: "en-US",
environment: "test",
onSubmit: (state, dropin) => {
// Your function calling your server to make the `/payments` request
makePayment(state.data)
.then(response => {
if (response.action) {
// Drop-in handles the action object from the /payments response
dropin.handleAction(response.action);
} else {
// Your function to show the final result to the shopper
showFinalResult(response);
}
})
.catch(error => {
throw Error(error);
});
},
onAdditionalDetails: (state, dropin) => {
// Your function calling your server to make a `/payments/details` request
makeDetailsCall(state.data)
.then(response => {
if (response.action) {
// Drop-in handles the action object from the /payments response
dropin.handleAction(response.action);
} else {
// Your function to show the final result to the shopper
showFinalResult(response);
}
})
.catch(error => {
throw Error(error);
});
},
paymentMethodsConfiguration: {
card: { // Example optional configuration for Cards
hasHolderName: true,
holderNameRequired: true,
enableStoreDetails: true,
hideCVC: false, // Change this to true to hide the CVC field for stored cards
name: 'Credit or debit card'
}
}
};
// 2,5 Use the configuration object to create an instance of Adyen Checkout. Then use the returned value to create and mount the instance of Drop-in: //
const checkout = new AdyenCheckout(configuration);
const dropin = checkout.create('dropin').mount('#dropin-container');
// 2.6 Pass the state.data to your server. //
{
isValid: true,
data: {
paymentMethod: {
type: "scheme",
encryptedCardNumber: "adyenjs_0_1_18$k7s65M5V0KdPxTErhBIPoMPI8HlC..",
encryptedExpiryMonth: "adyenjs_0_1_18$p2OZxW2XmwAA8C1Avxm3G9UB6e4..",
encryptedExpiryYear: "adyenjs_0_1_18$CkCOLYZsdqpxGjrALWHj3QoGHqe+..",
encryptedSecurityCode: "adyenjs_0_1_18$XUyMJyHebrra/TpSda9fha978+.."
holderName: "S. Hopper"
}
}
}
</script>
<?php
// ----- Step 3: Make a payment ----- //
// Set your X-API-KEY with the API key from the Customer Area.
$client = new \Adyen\Client();
$client->setEnvironment(\Adyen\Environment::TEST);
$client->setXApiKey("xxx");
$service = new \Adyen\Service\Checkout($client);
// STATE_DATA is the paymentMethod field of an object passed from the front end or client app, deserialized from JSON to a data structure.
$paymentMethod = STATE_DATA;
$params = array(
"merchantAccount" => "xxx",
"paymentMethod" => $paymentMethod,
"amount" => array(
"currency" => "EUR",
"value" => 1000
),
"reference" => "xxx",
"returnUrl" => "xxx"
);
$result = $service->payments($params); //causing an error
// Check if further action is needed
if (array_key_exists("action", $result)){
// Pass the action object to your front end
// $result["action"]
}
else {
// No further action needed, pass the resultCode to your front end
// $result['resultCode']
}
// ----- Step 4: Perform additional front-end actions ----- //
// 4.1 URL-decode the redirectResult appended to your return URL and pass the parameters to your back end. //
// ----- Step 5: Submit additional payment details ----- //
// Set your X-API-KEY with the API key from the Customer Area.
$client = new \Adyen\Client();
$client->setEnvironment(\Adyen\Environment::TEST);
$client->setXApiKey("xxx");
$service = new \Adyen\Service\Checkout($client);
// STATE_DATA is an object passed from the front end or client app, deserialized from JSON to a data structure.
$params = STATE_DATA;
$result = $service->paymentsDetails($params);
// Check if further action is needed
if (array_key_exists("action", $result)){
// Pass the action object to your frontend.
// $result["action"]
}
else {
// No further action needed, pass the resultCode to your front end
// $result['resultCode']
}
?>
// ----- Step 6: Present the payment result ----- //
<script>
// Show a success message
dropin.setStatus('success');
dropin.setStatus('success', { message: 'Payment successful!' });
// Show an error message
dropin.setStatus('error');
dropin.setStatus('error', { message: 'Something went wrong.'});
// Set a loading state
dropin.setStatus('loading'); // start the loading state
dropin.setStatus('ready'); // set back to the initial state
</script>
<!-- Adyen Script, Step 2 -->
<script src="https://checkoutshopper-test.adyen.com/checkoutshopper/sdk/3.21.0/adyen.js"
integrity="ha384-XpFdeUhSQQeuZeLjRcNvDBK/16avmyQiiF0t3iXT1Q/4n9b6TKM68T+hv5aZdsvc"
crossorigin="anonymous"></script>
<!-- Adyen provides the SRI hash that you include as the integrity attribute. Refer to our release notes to get the SRI hash for the specific version. https://docs.adyen.com/online-payments/release-notes -->
I've tried:
Checking dependencies,
Changing location of scripts,
Changing different key types,
Contacting Adyen.
At the moment it feels like the more time I spend on this, the further I get from solving the problem. So any help would be appreciated.