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="securedfields">
    <label>
        <span>Card number:</span>
        <div class="field" data-cse="encryptedCardNumber"></div>
    </label>
    <label>
        <span>Expiry date:</span>
        <div class="field" data-cse="encryptedExpiryDate"></div>
    </label>
    <label>
        <span>CVV/CVC:</span>
        <div class="field" data-cse="encryptedSecurityCode"></div>
    </label>
</div>

CSS

.field {
      height: 2.2rem;
    border: 1px solid lightgrey;
    background: white;
    color: black;
    width: 300px;
    padding: 5px;
    border-radius: 6px;
    box-sizing: border-box;
}

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('securedfields', {
    // Optional
    type: 'card',
    groupTypes: ['mc', 'visa', 'amex', 'bcmc', 'maestro'],
    styles: {
        error: {
            color: 'red'
        },
        validated: {
            color: 'green',
        },
        placeholder: {
            color: '#d8d8d8'
        }
    },
    placeholders: {
        encryptedCardNumber: '9999 9999 9999 9999',
        encryptedExpiryDate: 'mm/yy',
        encryptedSecurityCode: '1234'
    },
    ariaLabels: {
        lang: 'en-GB',
        encryptedCardNumber: {
            label: 'Credit or debit card number field'
        }
    },
    // Events
    onChange: console.log.bind(console, 'onChange'),
    onValid : console.log.bind(console,...