CodePen Embed - Payment card checkout

Live

Live

Live

This Pen is owned by Simone Bernabè on CodePen.

See more by @simoberny on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

{"__browser":{"country":"US","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer; ambient-light-sensor; camera; display-capture; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr; web-share","iframe_sandbox":"allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads allow-presentation"},"__graphql":{"data":{"data":null,"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}]},"url":"https://codepen.io/graphql","api":"cprails"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":true,\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":14,\"font_type\":\"system\",\"format_on_save\":false,\"html_pre_processor\":\"none\",\"indent_with\":\"spaces\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"tab_size\":2,\"theme\":\"twilight\",\"id\":\"XgEgGg\",\"auto_save\":true},\"hashid\":\"XgEgGg\",\"itemType\":\"pen\",\"resources\":[{\"url\":\"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js\",\"order\":0,\"resource_type\":\"js\",\"par_content\":\"\"},{\"url\":\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js\",\"order\":1,\"resource_type\":\"js\",\"par_content\":\"\"},{\"url\":\"https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js\",\"order\":2,\"resource_type\":\"js\",\"par_content\":\"\"}],\"tags\":[\"card\",\"buy\",\"credit-card\",\"paying\",\"money\"],\"id\":16114870,\"user_id\":210536,\"html\":\"<div class=\\\"tips\\\">\\nPayment card number: (4) VISA, (51 -> 55) MasterCard, (36-38-39) DinersClub, (34-37) American Express, (65) Discover, (5019) dankort\\n</div>\\n\\n<div class=\\\"container\\\">\\n  <div class=\\\"col1\\\">\\n    <div class=\\\"card\\\">\\n      <div class=\\\"front\\\">\\n        <div class=\\\"type\\\">\\n          <img class=\\\"bankid\\\"/>\\n        </div>\\n        <span class=\\\"chip\\\"></span>\\n        <span class=\\\"card_number\\\">&#x25CF;&#x25CF;&#x25CF;&#x25CF; &#x25CF;&#x25CF;&#x25CF;&#x25CF; &#x25CF;&#x25CF;&#x25CF;&#x25CF; &#x25CF;&#x25CF;&#x25CF;&#x25CF; </span>\\n        <div class=\\\"date\\\"><span class=\\\"date_value\\\">MM / YYYY</span></div>\\n        <span class=\\\"fullname\\\">FULL NAME</span>\\n      </div>\\n      <div class=\\\"back\\\">\\n        <div class=\\\"magnetic\\\"></div>\\n        <div class=\\\"bar\\\"></div>\\n        <span class=\\\"seccode\\\">&#x25CF;&#x25CF;&#x25CF;</span>\\n        <span class=\\\"chip\\\"></span><span class=\\\"disclaimer\\\">This card is property of Random Bank of Random corporation. <br> If found please return to Random Bank of Random corporation - 21968 Paris, Verdi Street, 34 </span>\\n      </div>\\n    </div>\\n  </div>\\n  <div class=\\\"col2\\\">\\n    <label>Card Number</label>\\n    <input class=\\\"number\\\" type=\\\"text\\\" ng-model=\\\"ncard\\\" maxlength=\\\"19\\\" onkeypress='return event.charCode >= 48 && event.charCode <= 57'/>\\n    <label>Cardholder name</label>\\n    <input class=\\\"inputname\\\" type=\\\"text\\\" placeholder=\\\"\\\"/>\\n    <label>Expiry date</label>\\n    <input class=\\\"expire\\\" type=\\\"text\\\" placeholder=\\\"MM / YYYY\\\"/>\\n    <label>Security Number</label>\\n    <input class=\\\"ccv\\\" type=\\\"text\\\" placeholder=\\\"CVC\\\" maxlength=\\\"3\\\" onkeypress='return event.charCode >= 48 && event.charCode <= 57'/>\\n    <button class=\\\"buy\\\"><i class=\\\"material-icons\\\">lock</i> Pay --.-- €</button>\\n  </div>\\n</div>\",\"css\":\"// 4: VISA, 51 -> 55: MasterCard, 36-38-39: DinersClub, 34-37: American Express, 65: Discover, 5019: dankort\\n\\n@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');\\n\\n*{\\n  margin: 0;\\n  box-sizing: border-box;\\n}\\n\\nhtml{\\n  --card-color: #cacaca;\\n  --text-color: #e1e1e1;\\n}\\n\\nbody{\\n  font-family: 'Roboto', sans-serif;\\n}\\n\\n.tips{\\n  position: fixed;\\n  bottom: 0;\\n  width: 100%;\\n  height: 30px;\\n  background: #f1f1f1;\\n  line-height: 30px;\\n  font-size: 14px;\\n  padding: 2px 15px;\\n}\\n\\n.container{\\n  position: absolute;\\n  display: flex;\\n  flex-direction: row;\\n  align-items: center;\\n  margin: auto;\\n  top: 0;\\n  bottom: 0;\\n  left: 0;\\n  right: 0;\\n  width: 680px;\\n  \\n  .col1{\\n    perspective: 1000;\\n    transform-style: preserve-3d;\\n    .card{\\n      position: relative;\\n      width: 420px;\\n      height: 250px;\\n      margin-bottom: 85px;\\n      margin-right: 10px;\\n      border-radius: 17px;\\n      box-shadow: 0 5px 20px -5px rgba(0,0,0,0.1);\\n      transition: all 1s;\\n      transform-style: preserve-3d;\\n      .front{\\n        position: absolute;\\n        background: var(--card-color);\\n        border-radius: 17px;\\n        padding: 50px;\\n        width: 100%;\\n        height: 100%;\\n        transform: translateZ(1px);\\n        -webkit-transform: translateZ(1px);\\n        transition: background 0.3s;\\n        z-index: 50;\\n        background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-linear-gradient(-245deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 90%);\\n        -webkit-backface-visibility: hidden;\\n        -moz-backface-visibility: hidden;\\n        -ms-backface-visibility: hidden;\\n        backface-visibility: hidden;\\n        .type{\\n          position: absolute;\\n          width: 75px;\\n          height: 45px;\\n          top: 20px;\\n          right: 20px;\\n          img{\\n            width: 100%;\\n            float: right;\\n          }\\n        }\\n        .card_number{\\n          position: absolute;\\n          font-size: 26px;\\n          font-weight: 500;\\n          letter-spacing: -1px;\\n          top: 110px;\\n          color: var(--text-color);\\n          word-spacing: 3px;\\n          transition: color 0.5s;\\n        }\\n        .date{\\n          position: absolute;\\n          bottom: 40px;\\n          right: 55px;\\n          width: 90px;\\n          height: 35px;\\n          color: var(--text-color);\\n          transition: color 0.5s;\\n          .date_value{\\n            font-size: 12px;\\n            position: absolute;\\n            margin-left: 22px;\\n            margin-top: 12px;\\n            color: var(--text-color);\\n            font-weight: 500;\\n            transition: color 0.5s;\\n          }\\n          &:after{\\n            content: 'MONTH / YEAR';\\n            position: absolute;\\n            display: block;\\n            font-size: 7px;\\n            margin-left: 20px;\\n          }\\n          &:before{\\n            content: 'valid \\\\a thru';\\n            position: absolute;\\n            display: block;\\n            font-size: 8px;\\n            white-space: pre;\\n            margin-top: 8px;\\n          }\\n        }\\n        .fullname{\\n          position: absolute;\\n          font-size: 20px;\\n          bottom: 40px;\\n          color: var(--text-color);\\n          transition: color 0.5s;\\n        }\\n      }    \\n      .back{\\n        position: absolute;\\n        width: 100%;\\n        border-radius: 17px;\\n        height: 100%;\\n        background: var(--card-color);\\n        transform: rotateY(180deg);\\n        .magnetic{\\n          position: absolute;\\n          width: 100%;\\n          height: 50px;\\n          background: rgba(0,0,0,0.7);\\n          margin-top: 25px;\\n        }\\n        \\n        .bar{\\n          position: absolute;\\n          width: 80%;\\n          height: 37px;\\n          background: rgba(255,255,255,0.7);\\n          left: 10px;\\n          margin-top: 100px;\\n        }\\n        \\n        .seccode{\\n          font-size: 13px;\\n          color: var(--text-color);\\n          font-weight: 500;\\n          position: absolute;\\n          top: 100px;\\n          right: 40px;\\n        }\\n        \\n        .chip{\\n          bottom: 45px;\\n          left: 10px;\\n        }\\n        \\n        .disclaimer{\\n          position: absolute;\\n          width: 65%;\\n          left: 80px;\\n          color: #f1f1f1;\\n          font-size: 8px;\\n          bottom: 55px;\\n        }\\n      }\\n    }\\n  }\\n  \\n  .col2{\\n    input{\\n      display: block;\\n      width: 260px;\\n      height: 30px;\\n      padding-left: 10px;\\n      padding-top: 3px;\\n      padding-bottom: 3px;\\n      margin: 7px;\\n      font-size: 17px;\\n      border-radius: 20px;\\n      background: rgba(0,0,0,0.05);\\n      border: none;\\n      transition: background 0.5s;\\n      &:focus{\\n        outline-width: 0;\\n        background: rgba(31,134,252, 0.15);\\n        transition: background 0.5s;\\n      }\\n    }\\n    \\n    label{\\n      padding-left: 8px;\\n      font-size: 15px;\\n      color: #444;\\n    }\\n    \\n    .ccv{\\n      width: 40%;\\n    }\\n    \\n    .buy{\\n      width: 260px;\\n      height: 50px;\\n      position: relative;\\n      display: block;\\n      margin: 20px auto;\\n      border-radius: 10px;\\n      border: none;\\n      background: #42C2DF;\\n      color: white;\\n      font-size: 20px;\\n      transition: background 0.4s;\\n      cursor: pointer;\\n      i{\\n        font-size: 20px;\\n      }\\n      &:hover{\\n        background: #3594A9;\\n        transition: background 0.4s;\\n      }\\n    }\\n  }\\n  \\n}\\n\\n.chip{\\n  position: absolute;\\n  width: 55px;\\n  height: 40px;\\n  background: #bbb;\\n  border-radius: 7px;\\n  &:after{\\n    content: '';\\n    display: block;\\n    width: 35px;\\n    height: 25px;\\n    border-radius: 4px;\\n    position: absolute;\\n    top: 0;\\n    bottom: 0;\\n    margin: auto;\\n    background: #ddd;\\n  }\\n}\",\"js\":\"// 4: VISA, 51 -> 55: MasterCard, 36-38-39: DinersClub, 34-37: American Express, 65: Discover, 5019: dankort\\n\\n\\n$(function(){\\n  \\n  var cards = [{\\n    nome: \\\"mastercard\\\",\\n    colore: \\\"#0061A8\\\",\\n    src: \\\"https://upload.wikimedia.org/wikipedia/commons/0/04/Mastercard-logo.png\\\"\\n  }, {\\n    nome: \\\"visa\\\",\\n    colore: \\\"#E2CB38\\\",\\n    src: \\\"https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Visa_Inc._logo.svg/2000px-Visa_Inc._logo.svg.png\\\"\\n  }, {\\n    nome: \\\"dinersclub\\\",\\n    colore: \\\"#888\\\",\\n    src: \\\"http://www.worldsultimatetravels.com/wp-content/uploads/2016/07/Diners-Club-Logo-1920x512.png\\\"\\n  }, {\\n    nome: \\\"americanExpress\\\",\\n    colore: \\\"#108168\\\",\\n    src: \\\"https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/American_Express_logo.svg/600px-American_Express_logo.svg.png\\\"\\n  }, {\\n    nome: \\\"discover\\\",\\n    colore: \\\"#86B8CF\\\",\\n    src: \\\"https://lendedu.com/wp-content/uploads/2016/03/discover-it-for-students-credit-card.jpg\\\"\\n  }, {\\n    nome: \\\"dankort\\\",\\n    colore: \\\"#0061A8\\\",\\n    src: \\\"https://upload.wikimedia.org/wikipedia/commons/5/51/Dankort_logo.png\\\"\\n  }];\\n  \\n  var month = 0;\\n  var html = document.getElementsByTagName('html')[0];\\n  var number = \\\"\\\";\\n  \\n  var selected_card = -1;\\n  \\n  $(document).click(function(e){\\n    if(!$(e.target).is(\\\".ccv\\\") || !$(e.target).closest(\\\".ccv\\\").length){\\n      $(\\\".card\\\").css(\\\"transform\\\", \\\"rotatey(0deg)\\\");\\n      $(\\\".seccode\\\").css(\\\"color\\\", \\\"var(--text-color)\\\");\\n    }\\n    if(!$(e.target).is(\\\".expire\\\") || !$(e.target).closest(\\\".expire\\\").length){\\n      $(\\\".date_value\\\").css(\\\"color\\\", \\\"var(--text-color)\\\");\\n    }\\n    if(!$(e.target).is(\\\".number\\\") || !$(e.target).closest(\\\".number\\\").length){\\n      $(\\\".card_number\\\").css(\\\"color\\\", \\\"var(--text-color)\\\");\\n    }\\n    if(!$(e.target).is(\\\".inputname\\\") || !$(e.target).closest(\\\".inputname\\\").length){\\n      $(\\\".fullname\\\").css(\\\"color\\\", \\\"var(--text-color)\\\");\\n    }\\n  });\\n  \\n  \\n  //Card number input\\n  $(\\\".number\\\").keyup(function(event){\\n    $(\\\".card_number\\\").text($(this).val());\\n    number = $(this).val();\\n    \\n    if(parseInt(number.substring(0, 2)) > 50 && parseInt(number.substring(0, 2)) < 56){\\n      selected_card = 0;\\n    }else if(parseInt(number.substring(0, 1)) == 4){\\n      selected_card = 1;  \\n    }else if(parseInt(number.substring(0, 2)) == 36 || parseInt(number.substring(0, 2)) == 38 || parseInt(number.substring(0, 2)) == 39){\\n      selected_card = 2;     \\n    }else if(parseInt(number.substring(0, 2)) == 34 || parseInt(number.substring(0, 2)) == 37){\\n      selected_card = 3; \\n    }else if(parseInt(number.substring(0, 2)) == 65){\\n      selected_card = 4; \\n    }else if(parseInt(number.substring(0, 4)) == 5019){\\n      selected_card = 5; \\n    }else{\\n      selected_card = -1; \\n    }\\n    \\n    if(selected_card != -1){\\n      html.setAttribute(\\\"style\\\", \\\"--card-color: \\\" + cards[selected_card].colore);  \\n      $(\\\".bankid\\\").attr(\\\"src\\\", cards[selected_card].src).show();\\n    }else{\\n      html.setAttribute(\\\"style\\\", \\\"--card-color: #cecece\\\");\\n      $(\\\".bankid\\\").attr(\\\"src\\\", \\\"\\\").hide();\\n    }\\n    \\n    if($(\\\".card_number\\\").text().length === 0){\\n      $(\\\".card_number\\\").html(\\\"&#x25CF;&#x25CF;&#x25CF;&#x25CF; &#x25CF;&#x25CF;&#x25CF;&#x25CF; &#x25CF;&#x25CF;&#x25CF;&#x25CF; &#x25CF;&#x25CF;&#x25CF;&#x25CF;\\\");\\n    }\\n\\n  }).focus(function(){\\n    $(\\\".card_number\\\").css(\\\"color\\\", \\\"white\\\");\\n  }).on(\\\"keydown input\\\", function(){\\n    \\n    $(\\\".card_number\\\").text($(this).val());\\n    \\n    if(event.key >= 0 && event.key <= 9){\\n      if($(this).val().length === 4 || $(this).val().length === 9 || $(this).val().length === 14){\\n        $(this).val($(this).val() +  \\\" \\\");\\n      }\\n    }\\n  })\\n  \\n  //Name Input\\n  $(\\\".inputname\\\").keyup(function(){  \\n    $(\\\".fullname\\\").text($(this).val());  \\n    if($(\\\".inputname\\\").val().length === 0){\\n        $(\\\".fullname\\\").text(\\\"FULL NAME\\\");\\n    }\\n    return event.charCode;\\n  }).focus(function(){\\n    $(\\\".fullname\\\").css(\\\"color\\\", \\\"white\\\");\\n  });\\n  \\n  //Security code Input\\n  $(\\\".ccv\\\").focus(function(){\\n    $(\\\".card\\\").css(\\\"transform\\\", \\\"rotatey(180deg)\\\");\\n    $(\\\".seccode\\\").css(\\\"color\\\", \\\"white\\\");\\n  }).keyup(function(){\\n    $(\\\".seccode\\\").text($(this).val());\\n    if($(this).val().length === 0){\\n      $(\\\".seccode\\\").html(\\\"&#x25CF;&#x25CF;&#x25CF;\\\");\\n    }\\n  }).focusout(function() {\\n      $(\\\".card\\\").css(\\\"transform\\\", \\\"rotatey(0deg)\\\");\\n      $(\\\".seccode\\\").css(\\\"color\\\", \\\"var(--text-color)\\\");\\n  });\\n    \\n  \\n  //Date expire input\\n  $(\\\".expire\\\").keypress(function(event){\\n    if(event.charCode >= 48 && event.charCode <= 57){\\n      if($(this).val().length === 1){\\n          $(this).val($(this).val() + event.key + \\\" / \\\");\\n      }else if($(this).val().length === 0){\\n        if(event.key == 1 || event.key == 0){\\n          month = event.key;\\n          return event.charCode;\\n        }else{\\n          $(this).val(0 + event.key + \\\" / \\\");\\n        }\\n      }else if($(this).val().length > 2 && $(this).val().length < 9){\\n        return event.charCode;\\n      }\\n    }\\n    return false;\\n  }).keyup(function(event){\\n    $(\\\".date_value\\\").html($(this).val());\\n    if(event.keyCode == 8 && $(\\\".expire\\\").val().length == 4){\\n      $(this).val(month);\\n    }\\n    \\n    if($(this).val().length === 0){\\n      $(\\\".date_value\\\").text(\\\"MM / YYYY\\\");\\n    }\\n  }).keydown(function(){\\n    $(\\\".date_value\\\").html($(this).val());\\n  }).focus(function(){\\n    $(\\\".date_value\\\").css(\\\"color\\\", \\\"white\\\");\\n  });\\n});\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"scss\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2017-07-01T21:14:24.000Z\",\"updated_at\":\"2017-11-06T07:53:24.000Z\",\"title\":\"Payment card checkout\",\"description\":\"I see this method of paying on https://www.instant-gaming.com\\n\\nSupported card:\\n\\n4: VISA, 51 -> 55: MasterCard, 36-38-39: DinersClub, 34-37: American Express, 65: Discover, 5019: dankort\",\"slug_hash\":\"XgEgGg\",\"head\":\"<link href=\\\"https://fonts.googleapis.com/icon?family=Material+Icons\\\"\\n      rel=\\\"stylesheet\\\">\",\"private\":false,\"has_animation\":false,\"team_id\":0,\"css_prefix\":\"autoprefixer\",\"template\":false,\"parent_id\":0,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":null,\"cpid\":\"015d0001-2f80-7d35-a362-f4c814781f23\",\"is_new_editor_pen\":false,\"pen_hash\":null}","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6d8bf8b4b479137260842506acbb12717dace0823c023e08b96360e60b0840d9.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js","__pen_normalize_css_url":"https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css","__pen_prefix_free_url":"https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js","__pen_reset_css_url":"https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css","__path_to_infinite_loop_detection":"https://cpwebassets.codepen.io/assets/packs/js/infiniteLoopDetection-98018b12d50424943c3d.js"}