JSFiddle - React, Tailwind, and code Playground

by Evan Sharp

HTML

<script src="https://checkoutshopper-test.adyen.com/checkoutshopper/sdk/3.1.0/adyen.js"></script>

<link rel="stylesheet" href="https://checkoutshopper-test.adyen.com/checkoutshopper/sdk/3.1.0/adyen.css"/>

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

JavaScript

const configuration = {
  locale: "en_US",
  environment: "test",
  originKey: "pub.v2.8015645983113886.aHR0cHM6Ly9maWRkbGUuanNoZWxsLm5ldA.rRQMKkuoN9wSsGWZExeS1i0hKdQmHFFwzK68wAKlv-Q",
  paymentMethodsResponse: {"groups":[{"name":"Credit Card","types":["visa","mc","amex","discover","maestro","diners"]}],"paymentMethods":[{"brands":["visa","mc","amex","discover","maestro","diners"],"details":[{"key":"encryptedCardNumber","type":"cardToken"},{"key":"encryptedSecurityCode","type":"cardToken"},{"key":"encryptedExpiryMonth","type":"cardToken"},{"key":"encryptedExpiryYear","type":"cardToken"},{"key":"holderName","optional":true,"type":"text"}],"name":"Credit Card","type":"scheme"},{"details":[{"details":[{"key":"ownerName","type":"text"},{"key":"bankLocationId","type":"text"},{"key":"bankAccountNumber","type":"text"}],"key":"bankAccount","type":"bankAccount"},{"details":[{"key":"street","type":"text"},{"key":"houseNumberOrName","type":"text"},{"key":"city","type":"text"},{"key":"postalCode","type":"text"},{"key":"stateOrProvince","type":"text"},{"key":"country","type":"text"}],"key":"billingAddress","type":"address"}],"name":"ACH Direct Debit","supportsRecurring":true,"type":"ach"}]}
};
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: console.log.bind(console),
  onAdditionalDetails: console.log.bind(console)
})
.mount('#dropin');