braintree.index.1.js

import React, { Component } from 'react'

class Index extends Component {
  render() {
    return (
      <div className="container">
        <h1>Braintree Next.js App</h1>

        <style jsx>{`
          .loading-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh
          }
          .container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh
          }
          .drop-in-container {
            width: 100%;
            height: 100%;
          }
          .hosted-field {
            height: 50px;
            box-sizing: border-box;
            width: 100%;
            padding: 12px;
            display: inline-block;
            box-shadow: none;
            font-weight: 600;
            font-size: 14px;
            border-radius: 6px;
            border: 1px solid #dddddd;
            line-height: 20px;
            background: #fcfcfc;
            margin-bottom: 12px;
            background: linear-gradient(to right, white 50%, #fcfcfc 50%);
            background-size: 200% 100%;
            background-position: right bottom;
            transition: all 300ms ease-in-out;
          }
          .hosted-fields--label {
            font-family: courier, monospace;
            text-transform: uppercase;
            font-size: 14px;
            display: block;
            margin-bottom: 6px;
          }
          .braintree-hosted-fields-focused {
            border: 1px solid #64d18a;
            border-radius: 1px;
            background-position: left bottom;
          }
          .braintree-hosted-fields-invalid {
            border: 1px solid #ed574a;
          }
          #cardForm {
            max-width: 50.75em;
            margin: 0 auto;
            padding: 1.875em;
          }
          .submit {
            width: 50.75em;
            height: 40px;
            background-color: #64d18a;
            color: #ffffff;
            cursor: pointer;
            font-weight: 500;

            outline: none;
            border-color: #64d18a;
            transition: all 200ms ease;
            -webkit-transition: all 200ms ease;
            -moz-transition: all 200ms ease;
            -ms-transition: all 200ms ease;
            -o-transition: all 200ms ease;
          }
        `}</style>
      </div>
    );
  }
}

export default Index