adyen.html.erb

<%
  adyen = Adyen::Client.new
  adyen.env = :test

  # for basic-auth based implementations
  adyen.ws_user = ENV['ADYEN_MERCHANT_LOGIN']
  adyen.ws_password = ENV['ADYEN_MERCHANT_PASSWORD']

  response = adyen.checkout.payment_methods({
    amount: {
      currency: "PHP",
      value: 199
    },
    merchantAccount: ENV['ADYEN_MERCHANT_ACCOUNT'],
    countryCode: "PH",
    channel: 'Web'
  })

  payment_methods_response = response.body
%>

<script src="https://cdn.jsdelivr.net/npm/fingerprintjs2@2.1.0/dist/fingerprint2.min.js"></script>
<script src="https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/3.1.0/adyen.js"></script>
<link rel="stylesheet" href="https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/3.1.0/adyen.css"/>

<div id="dropin"></div>

<script>
  $(document).ready(function() {
    const configuration = {
      locale: "en_US",
      environment: "test",
      originKey: "<%= ENV['ADYEN_ORIGIN_KEY'] %>",
      paymentMethodsResponse: <%= raw payment_methods_response %>
    };
    const checkout = new AdyenCheckout(configuration);

    const dropin = checkout
      .create('dropin', {
        paymentMethodsConfiguration: {
          card: { // Example optional configuration for Cards
            hasHolderName: true,
            holderNameRequired: true,
            enableStoreDetails: true,
            name: 'Credit or debit card'
          }
        }, onSubmit: function(state, dropin) {
          makePayment(state.data)
            // Your function calling your server to make the /payments request
            .then(function(action) {
              console.log(action);
              dropin.handleAction(action);
              // Drop-in handles the action object from the /payments response
            })
            .catch(function(error) {
              throw Error(error);
            });
        }, onAdditionalDetails: function(state, dropin) {
          makeDetailsCall(state.data)
            // Your function calling your server to make a /payments/details request
            .then(function(action) {
              console.log(action);
              dropin.handleAction(action);
              // Drop-in handles the action object from the /payments/details response
            })
            .catch(function(error) {
              throw Error(error);
            });
        }
      }).mount('#dropin');
  });
</script>