如何在我的网站上成功安装 Adyen Web Drop In？

如何解决如何在我的网站上成功安装 Adyen Web Drop In？

我是编程新手，我目前正在实习以提高水平。话虽如此，最近几天我花了超过 15 个小时试图让 Adyen 使用测试帐户在我的网页上工作（用于测试目的）。

我首先在授权错误方面苦苦挣扎，已经重新填充了数百次 API 密钥、客户端密钥、源密钥、HMAC 密钥和帐户名称。一遍又一遍地重读指南没有结果，没有任何效果。然后突然间，没有改变任何东西，它在终端中使用 curl 来测试第一次测试付款。

我遵循了指南：https://docs.adyen.com/online-payments/drop-in-web?tab=redirect_payment_method_1（脚本方法），但在第 3 步（https://gyazo.com/ed4b386035c681e433b0c3616ed90f97）开始出现错误。在花了几个小时没有走近一步之后，我开始为每一步创建评论，只是复制/粘贴所有内容。填写所有键等。看看它是否会被代码中的后续步骤解决。

我已用“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,"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 -->

我试过了：

• 检查依赖项，
• 更改脚本的位置，
• 更改不同的密钥类型，
• 联系 Adyen。

目前感觉我花在这上面的时间越多，解决问题的程度就越大。因此，任何帮助将不胜感激。