gateway.ixopay.com Open in urlscan Pro
104.16.205.229  Malicious Activity! Public Scan

Form analysis
1 forms found in the DOM

POST https://gateway.ixopay.com/payment/3f97b57697e3e3316d3e

<form id="payment-form" accept-charset="UTF-8" action="https://gateway.ixopay.com/payment/3f97b57697e3e3316d3e" method="POST" onsubmit="Ixopay.PaymentFormV2.submitPaymentForm(); return false;"><input type="hidden" name="__fp" id="__fp"
    value="1acaa3b43f428d490c5ad3bfd7cd887e"><input type="hidden" name="__tdbd" id="__tdbd"
    value="{&quot;java&quot;:false,&quot;language&quot;:&quot;en-US&quot;,&quot;colorDepth&quot;:24,&quot;screenHeight&quot;:1200,&quot;screenWidth&quot;:1600,&quot;tz&quot;:0,&quot;userAgent&quot;:&quot;Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.63 Safari/537.36&quot;}">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script data-main="payment-js" src="https://dhl.ixopay.com/js/integrated/payment.1.2.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    @font-face {
      font-family: 'Delivery';
      src: url(//cms-static-gateway.paymentgateway.cloud/r0/root/Nn4xSUPAED9Ycb29hBjmKg/vhost/gateway.ixopay.com/rev/Nn4xSUPAED9Ycb29hBjmko/fonts/delivery/Delivery_W_Rg.woff);
    }

    @font-face {
      font-family: 'Delivery';
      src: url(//cms-static-gateway.paymentgateway.cloud/r0/root/Nn4xSUPAED9Ycb29hBjmKg/vhost/gateway.ixopay.com/rev/Nn4xSUPAED9Ycb29hBjmkj/fonts/delivery/Delivery_W_Rg.woff2);
    }

    @font-face {
      font-family: 'DeliveryBold';
      src: url(//cms-static-gateway.paymentgateway.cloud/r0/root/Nn4xSUPAED9Ycb29hBjmKg/vhost/gateway.ixopay.com/rev/Nn4xSUPAED9Ycb29hBjmkc/fonts/delivery/Delivery_W_Bd.woff);
    }

    @font-face {
      font-family: 'DeliveryBold';
      src: url(//cms-static-gateway.paymentgateway.cloud/r0/root/Nn4xSUPAED9Ycb29hBjmKg/vhost/gateway.ixopay.com/rev/Nn4xSUPAED9Ycb29hBjmk1/fonts/delivery/Delivery_W_Bd.woff2);
    }

    :root {
      --primary-color: #fc0;
      --primary-color-rgb: 94, 4, 94;
      --secondary-color: #d40511;
      --tertiary-color: #4C044C;
      --error-color: #d00;
    }

    html {
      overflow-y: scroll;
    }

    body {
      font-size: 12px;
      font-family: Delivery;
    }

    #container {
      display: block;
      max-width: 600px;
      margin: 0 auto;
      background-color: white;
      padding: 10px;
      height: 100%;
      min-height: 100%;
      margin-top: 20px;
    }

    h1 {
      font-size: 1.2em;
      margin: 0;
      padding-top: 25px;
      color: white;
      font-weight: bold;
    }

    h2 {
      font-size: 1.4em;
      font-weight: normal;
      margin: 0px 0px 0px 15px;
      padding-top: 10px;
      padding-bottom: 20px;
    }

    h2.pt {
      padding-top: 20px;
      text-align: center;
    }

    h3 {
      font-size: 1.1em;
      font-weight: bold;
    }

    .btn {
      font-size: 15px;
      padding: 12px 40px;
    }

    button i {
      margin-right: 5px;
    }

    .header {
      background: linear-gradient(to right, #fc0 0%, #fc0 30%, #ffe57f 79%, #fff0b2 100%);
      background-color: #fc0;
      background-repeat: no-repeat;
      background-position-x: 214px;
      background-size: calc(100% - 214px) 100%;
      top: 0;
      right: 0;
      width: calc(100%);
      height: 60px;
    }

    .header img {
      margin: 16px 0 16px 25px;
      height: 28px;
    }

    .footer {
      height: 60px;
      background: linear-gradient(to right, #fc0 0%, #fc0 30%, #ffe57f 79%, #fff0b2 100%);
      background-color: #fc0;
      background-repeat: no-repeat;
      background-position-x: 214px;
      background-size: calc(100% - 214px) 100%;
      width: calc(100%);
    }

    .payment-form {
      padding-left: 0px;
    }

    .payment-form h2 {
      margin: 0px;
    }

    .th {
      font-weight: bold;
    }

    .payment-method {
      cursor: pointer;
      box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
      border-radius: 5px;
      padding-top: 20px;
      padding-bottom: 15px;
      background: white;
      margin-bottom: 10px;
    }

    .payment-method img {
      /* set size of images */
      /*max-width: 100%;*/
      width: 150px;
      height: 90px;
      border: transparent solid 2px;
    }

    .payment-method.method-selected img {
      border: var(--primary-color) solid 2px;
    }

    .payment-method:hover img {
      border: var(--secondary-color) solid 2px;
    }

    .payment-method .container-fluid {
      padding-bottom: 0px;
    }

    .payment-method-trigger {
      margin-left: 10px;
      font-size: 16px;
      display: flex;
      width: 200px;
    }

    .payment-method-trigger span {
      font-weight: 800;
      margin-left: 15px;
    }

    .stored-payment-container .payment-method-trigger {
      margin-left: 20px;
      clear: both;
    }

    .stored-payment-container .payment-method-data {
      margin-left: 20px;
      display: table;
      opacity: 0.6;
      cursor: pointer;
    }

    .payment-method-data {
      padding: 10px 20px;
      box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
      width: 400px;
      border-radius: 4px;
      background: white;
      margin-bottom: 5px;
    }

    .stored-payment-container .payment-method-trigger:hover .payment-method-data,
    .stored-payment-container .payment-method-data.selected {
      opacity: 1 !important;
    }

    .stored-payment-container .payment-method-data img,
    .stored-payment-container .payment-method-data input[type=radio],
    .stored-payment-container .payment-method-data div {
      display: table-cell;
      vertical-align: middle;
    }

    .stored-payment-container .payment-method-data img {
      width: 50px;
      height: auto;
    }

    .stored-payment-container .payment-method-data input[type=radio] {
      margin-top: 10px;
      margin-right: 8px;
      padding-right: 15px;
    }

    .stored-payment-container .payment-method-data div {
      padding: 3px 2px;
    }

    .stored-payment-container .payment-method-data.selected .p-data {
      color: black;
      padding: 2px;
    }

    .stored-payment-container .payment-method-data .p-data {
      padding: 4px;
    }

    .stored-payment-container .payment-method-data span {
      display: block;
      color: dimgrey;
      font-size: 15px;
      line-height: 15px;
      padding: 2px 6px;
    }

    .setNewPreferredInstrumentContainer {
      margin-left: 65px;
      margin-top: 10px;
      display: none;
    }

    label {
      font-size: 1em;
      font-weight: normal;
      margin-top: 4px;
      margin-bottom: 0px;
    }

    div.info {
      color: var(--error-color);
      display: none;
      margin-left: 17px;
    }

    hr {
      margin-top: 3px;
      margin-bottom: 3px;
      border-top-color: #dddddd;
    }

    .btn {
      //margin: 5px 10px 10px 0px;
      margin: 0;
      //background-color: #f1f1f1;
    }

    #togglePaymentMethods {
      border-color: #ccc;
    }

    #togglePaymentMethods:hover {
      // background-color: #f91320;
    }

    #proceed-btn {
      background-color: #1ba649;
      color: white;
    }

    #proceed-btn:hover {
      background-color: #45b66b;
    }

    #togglePaymentMethods {
      width: 264px;
      padding: 6px 12px;
      width: 400px;
      margin-left: 1px;
      border: 0;
      box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
    }

    /* bootstrap overwrite */
    .panel {
      background: #f5f5f5;
      border-radius: 5px;
      padding-bottom: 20px;
    }

    .panel-heading {
      font-size: 15px;
      font-weight: bold;
    }

    .panel-body {
      font-size: 1.2em;
      border-radius: 5px;
    }

    .panel-default>.panel-heading {
      /* INSERT OPTIONAL LOGO HERE */
      background: var(--primary-color) url("") no-repeat top right;
      background-size: 100px auto;
    }

    .form-control {
      height: 25px;
      padding: 5px 6px;
      border-radius: 2px;
      font-size: 12px;
      border-color: #dddddd;
    }

    .container-fluid {
      padding: 5px 50px 0 50px;
    }

    .input_field {
      height: 30px;
      font-size: 15px;
      font-family: Arial;
    }

    .form-control {
      padding: 2px 10px;
    }

    .card-input-container {
      padding: 5px 35px;
    }

    #card_input_wrapper {
      display: flex;
    }

    .paymentjs-card {
      padding-left: 10px;
    }

    .paymentjs-card .paymentjs-type {
      display: none;
      margin-top: 5px;
    }

    .paymentjs-card .paymentjs-cardIcon {
      margin-top: 15px;
      margin-left: 3px;
    }

    .paymentjs-card .paymentjs-cardIcon i {
      font-size: 18px;
    }

    .col-form-label {
      margin-top: 6px;
    }

    @media only screen and (max-width: 989px) {
      .col-form-label {
        padding-bottom: 3px;
        margin-top: 4px;
        font-size: 14px;
        font-family: DeliveryBold;
      }

      .form-control {
        padding: 0 1.1rem;
      }

      .input_field {
        height: 4.2rem;
        font-size: 15px;
      }

      .card-input-container {
        padding: 0 10px;
      }

      .paymentjs-card .paymentjs-type {
        margin-top: 10px;
      }
    }

    @media only screen and (max-width: 575.98px) {
      .container-fluid {
        padding: 0px;
        padding-right: 15px;
        padding-left: 15px;
      }

      .card-input-container {
        padding: 0;
      }

      .header {
        text-align: center;
      }
    }

    @media only screen and (max-width: 400px) {
      .btn {
        font-size: 15px;
        padding: 12px 20px;
      }
    }

    .container-fluid:first-child {
      padding-top: 5px;
      padding-bottom: 0px;
    }

    /* errors */
    .error-block {
      display: none;
      font-size: 0.9em;
      color: #a94442;
    }

    .has-error .error-block {
      display: block;
    }

    .has-error [id^='number_div_'] {
      border: #a94442 solid 1px;
    }

    .cancelAndSubmit {
      display: flex;
      justify-content: space-between;
      flex-direction: row;
      margin-top: 10px;
      width: 100%;
    }

    .btn-default {
      border-color: #ccc;
    }

    .transaction-information {
      background: white;
      border-bottom: 1px solid rgba(50, 50, 50, .1);
    }

    .toggle-bar {
      display: flex;
      justify-content: center;
      margin: 10px 0 20px 0;
    }

    .payment-selection-container {
      padding-bottom: 20px;
    }

    .stored-payment-container {
      padding-bottom: 0;
      margin-top: -20px;
    }

    .merchant {
      font-size: 13px;
      padding: 0 0 20px 0;
      text-align: center;
    }

    .merchant div {
      margin: 0;
      padding: 0;
    }

    .merchant .description {
      font-size: 17px;
      font-family: DeliveryBold;
    }

    .amount-container {
      position: relative;
      top: -25px;
      width: 100%;
      display: flex;
      justify-content: center;
    }

    .amount {
      background-color: white;
      border: 1px solid grey;
      font-size: 14px;
      text-align: center;
      padding: 4px 0;
      width: 260px;
      border-radius: 5px;
    }

    .amount .value {
      font-size: 16px;
      font-family: DeliveryBold;
    }

    .amount .value .currency {
      font-family: Delivery;
      font-size: 14px;
    }

    .visa {
      background: url(//cms-static-gateway.paymentgateway.cloud/r0/root/Nn4xSUPAED9Ycb29hBjmKg/vhost/gateway.ixopay.com/rev/Nn4xSUPAED9Ycb29hBjmmD/img/icons/visa.png);
      background-size: 40px 23px;
      background-repeat: no-repeat;
      width: 40px;
      height: 23px;
    }

    .mastercard {
      background: url(//cms-static-gateway.paymentgateway.cloud/r0/root/Nn4xSUPAED9Ycb29hBjmKg/vhost/gateway.ixopay.com/rev/Nn4xSUPAED9Ycb29hBjmmn/img/icons/mastercard.png);
      background-size: 40px 23px;
      background-repeat: no-repeat;
      width: 40px;
      height: 23px;
    }

    .amex {
      background: url(//cms-static-gateway.paymentgateway.cloud/r0/root/Nn4xSUPAED9Ycb29hBjmKg/vhost/gateway.ixopay.com/rev/Nn4xSUPAED9Ycb29hBjmm9/img/icons/amex.png);
      background-size: 40px 24px;
      background-repeat: no-repeat;
      width: 40px;
      height: 23px;
    }

    .payment-method-data {
      display: flex !important;
      flex-direction: row;
      font-size: 13px;
    }

    .payment-method-data .p-data {
      margin: 1px 0 0 20px;
      width: 300px;
      display: flex !important;
      flex-direction: column;
    }

    .icon-container {
      width: 60px;
    }
  </style>
  <!-- set which fields you want to appear for ALL payment methods (aside from mandatory fields which should be defined on each connector -->
  <div class="header">
    <img src="//cms-static-gateway.paymentgateway.cloud/r0/root/Nn4xSUPAED9Ycb29hBjmKg/vhost/gateway.ixopay.com/rev/Nn4xSUPAED9Ycb29hBjmmr/img/logo_rgb.png" alt="DHL">
  </div>
  <div id="container">
    <div class="panel panel-default">
      <!-- TRANSACTION INFORMATION -->
      <div class="panel-body transaction-information">
        <div class="container-fluid">
          <div class="merchant">
            <div>You are paying</div>
            <div class="description">Payment on DHL Global Payment Portal AWB 6176798666</div>
          </div>
        </div>
      </div>
      <div class="amount-container">
        <div class="amount">
          <div class="">AMOUNT</div>
          <div class="value"><span class="currency">CAD</span> 44.20</div>
        </div>
      </div>
      <!-- PAYMENT SELECTION -->
      <div class="container-fluid payment-selection-container">
        <!-- PAYMENT SELECTION -->
        <!-- loops through enabled payment methods set on the metaconnector -->
        <div class="payment-method col-md-12 " data-method="Creditcard">
          <div class="payment-method-trigger">
            <input type="radio" name="method-select">
            <span>Credit/Debit Card</span>
          </div>
          <!-- payment form -->
          <div class="panel-body payment-form" id="payment-form-Creditcard" style="display: none;" data-method="Creditcard" data-apimethod="Creditcard">
            <input type="hidden" name="paymentMethod" value="Creditcard">
            <div class="container-fluid card-input-container">
              <!-- fields which were set as mandatory on the connector, or are defined in variable "forceFields" will be displayed here -->
              <input type="hidden" name="publicKey" value="AC6Neknc5XRMZp3Oum9K">
              <input type="hidden" name="cardToken" id="cardToken" value="">
              <div class="form-group row">
                <label for="cardHolder" class="col-md-4 col-form-label">Name on Card</label>
                <div class="col-md-8">
                  <input type="text" name="cardHolder" id="cardHolder" value="" class="form-control input_field">
                </div>
                <span class="col-md-7 col-md-offset-5 error-block"></span>
              </div>
              <div class="form-group row">
                <label class="col-md-4 col-form-label">Card number</label>
                <div class="col-md-8">
                  <div id="card_input_wrapper">
                    <div id="number_div_Creditcard" class="input_field" style="width: 100%;"><iframe src="https://secure.ixopay.com/iframes/pan.html" name="vault-master-27n3td217" width="100%" height="100%" style="border: 0px;"></iframe></div>
                    <div class="paymentjs-card">
                      <div class="paymentjs-type" id="cardType"></div>
                      <div class="paymentjs-cardIcon" id="cardIcon"></div>
                    </div>
                  </div>
                </div>
                <span class="col-md-7 col-md-offset-5 error-block"></span>
              </div>
              <div class="form-group row">
                <label for="expiry" class="col-md-4 col-form-label">Expiry date</label>
                <div class="col-md-5">
                  <select name="expiry" id="expiry" class="form-control input_field">
                    <option value="10/2021">10 / 2021</option>
                    <option value="11/2021">11 / 2021</option>
                    <option value="12/2021">12 / 2021</option>
                    <option value="01/2022">01 / 2022</option>
                    <option value="02/2022">02 / 2022</option>
                    <option value="03/2022">03 / 2022</option>
                    <option value="04/2022">04 / 2022</option>
                    <option value="05/2022">05 / 2022</option>
                    <option value="06/2022">06 / 2022</option>
                    <option value="07/2022">07 / 2022</option>
                    <option value="08/2022">08 / 2022</option>
                    <option value="09/2022">09 / 2022</option>
                    <option value="10/2022">10 / 2022</option>
                    <option value="11/2022">11 / 2022</option>
                    <option value="12/2022">12 / 2022</option>
                    <option value="01/2023">01 / 2023</option>
                    <option value="02/2023">02 / 2023</option>
                    <option value="03/2023">03 / 2023</option>
                    <option value="04/2023">04 / 2023</option>
                    <option value="05/2023">05 / 2023</option>
                    <option value="06/2023">06 / 2023</option>
                    <option value="07/2023">07 / 2023</option>
                    <option value="08/2023">08 / 2023</option>
                    <option value="09/2023">09 / 2023</option>
                    <option value="10/2023">10 / 2023</option>
                    <option value="11/2023">11 / 2023</option>
                    <option value="12/2023">12 / 2023</option>
                    <option value="01/2024">01 / 2024</option>
                    <option value="02/2024">02 / 2024</option>
                    <option value="03/2024">03 / 2024</option>
                    <option value="04/2024">04 / 2024</option>
                    <option value="05/2024">05 / 2024</option>
                    <option value="06/2024">06 / 2024</option>
                    <option value="07/2024">07 / 2024</option>
                    <option value="08/2024">08 / 2024</option>
                    <option value="09/2024">09 / 2024</option>
                    <option value="10/2024">10 / 2024</option>
                    <option value="11/2024">11 / 2024</option>
                    <option value="12/2024">12 / 2024</option>
                    <option value="01/2025">01 / 2025</option>
                    <option value="02/2025">02 / 2025</option>
                    <option value="03/2025">03 / 2025</option>
                    <option value="04/2025">04 / 2025</option>
                    <option value="05/2025">05 / 2025</option>
                    <option value="06/2025">06 / 2025</option>
                    <option value="07/2025">07 / 2025</option>
                    <option value="08/2025">08 / 2025</option>
                    <option value="09/2025">09 / 2025</option>
                    <option value="10/2025">10 / 2025</option>
                    <option value="11/2025">11 / 2025</option>
                    <option value="12/2025">12 / 2025</option>
                    <option value="01/2026">01 / 2026</option>
                    <option value="02/2026">02 / 2026</option>
                    <option value="03/2026">03 / 2026</option>
                    <option value="04/2026">04 / 2026</option>
                    <option value="05/2026">05 / 2026</option>
                    <option value="06/2026">06 / 2026</option>
                    <option value="07/2026">07 / 2026</option>
                    <option value="08/2026">08 / 2026</option>
                    <option value="09/2026">09 / 2026</option>
                    <option value="10/2026">10 / 2026</option>
                    <option value="11/2026">11 / 2026</option>
                    <option value="12/2026">12 / 2026</option>
                    <option value="01/2027">01 / 2027</option>
                    <option value="02/2027">02 / 2027</option>
                    <option value="03/2027">03 / 2027</option>
                    <option value="04/2027">04 / 2027</option>
                    <option value="05/2027">05 / 2027</option>
                    <option value="06/2027">06 / 2027</option>
                    <option value="07/2027">07 / 2027</option>
                    <option value="08/2027">08 / 2027</option>
                    <option value="09/2027">09 / 2027</option>
                    <option value="10/2027">10 / 2027</option>
                    <option value="11/2027">11 / 2027</option>
                    <option value="12/2027">12 / 2027</option>
                    <option value="01/2028">01 / 2028</option>
                    <option value="02/2028">02 / 2028</option>
                    <option value="03/2028">03 / 2028</option>
                    <option value="04/2028">04 / 2028</option>
                    <option value="05/2028">05 / 2028</option>
                    <option value="06/2028">06 / 2028</option>
                    <option value="07/2028">07 / 2028</option>
                    <option value="08/2028">08 / 2028</option>
                    <option value="09/2028">09 / 2028</option>
                    <option value="10/2028">10 / 2028</option>
                    <option value="11/2028">11 / 2028</option>
                    <option value="12/2028">12 / 2028</option>
                    <option value="01/2029">01 / 2029</option>
                    <option value="02/2029">02 / 2029</option>
                    <option value="03/2029">03 / 2029</option>
                    <option value="04/2029">04 / 2029</option>
                    <option value="05/2029">05 / 2029</option>
                    <option value="06/2029">06 / 2029</option>
                    <option value="07/2029">07 / 2029</option>
                    <option value="08/2029">08 / 2029</option>
                    <option value="09/2029">09 / 2029</option>
                    <option value="10/2029">10 / 2029</option>
                    <option value="11/2029">11 / 2029</option>
                    <option value="12/2029">12 / 2029</option>
                    <option value="01/2030">01 / 2030</option>
                    <option value="02/2030">02 / 2030</option>
                    <option value="03/2030">03 / 2030</option>
                    <option value="04/2030">04 / 2030</option>
                    <option value="05/2030">05 / 2030</option>
                    <option value="06/2030">06 / 2030</option>
                    <option value="07/2030">07 / 2030</option>
                    <option value="08/2030">08 / 2030</option>
                    <option value="09/2030">09 / 2030</option>
                    <option value="10/2030">10 / 2030</option>
                    <option value="11/2030">11 / 2030</option>
                    <option value="12/2030">12 / 2030</option>
                    <option value="01/2031">01 / 2031</option>
                    <option value="02/2031">02 / 2031</option>
                    <option value="03/2031">03 / 2031</option>
                    <option value="04/2031">04 / 2031</option>
                    <option value="05/2031">05 / 2031</option>
                    <option value="06/2031">06 / 2031</option>
                    <option value="07/2031">07 / 2031</option>
                    <option value="08/2031">08 / 2031</option>
                    <option value="09/2031">09 / 2031</option>
                    <option value="10/2031">10 / 2031</option>
                    <option value="11/2031">11 / 2031</option>
                    <option value="12/2031">12 / 2031</option>
                    <option value="01/2032">01 / 2032</option>
                    <option value="02/2032">02 / 2032</option>
                    <option value="03/2032">03 / 2032</option>
                    <option value="04/2032">04 / 2032</option>
                    <option value="05/2032">05 / 2032</option>
                    <option value="06/2032">06 / 2032</option>
                    <option value="07/2032">07 / 2032</option>
                    <option value="08/2032">08 / 2032</option>
                    <option value="09/2032">09 / 2032</option>
                    <option value="10/2032">10 / 2032</option>
                    <option value="11/2032">11 / 2032</option>
                    <option value="12/2032">12 / 2032</option>
                    <option value="01/2033">01 / 2033</option>
                    <option value="02/2033">02 / 2033</option>
                    <option value="03/2033">03 / 2033</option>
                    <option value="04/2033">04 / 2033</option>
                    <option value="05/2033">05 / 2033</option>
                    <option value="06/2033">06 / 2033</option>
                    <option value="07/2033">07 / 2033</option>
                    <option value="08/2033">08 / 2033</option>
                    <option value="09/2033">09 / 2033</option>
                    <option value="10/2033">10 / 2033</option>
                  </select>
                </div>
              </div>
              <div class="form-group row">
                <label class="col-md-4 col-form-label">CVV/CVC</label>
                <div class="col-md-5">
                  <div id="cvv_div_Creditcard" class="input_field" style="width: 100%;"><iframe src="https://secure.ixopay.com/iframes/cvv.html" name="vault-slave-27n3td217" width="100%" height="100%" style="border: 0px;"></iframe></div>
                </div>
                <span class="col-md-7 col-md-offset-5 error-block"></span>
              </div>
            </div><!-- container fluid end -->
          </div><!-- payment body form end -->
        </div><!-- payment method end -->
        <div class="payment-method col-md-12 " data-method="Paypal">
          <div class="payment-method-trigger">
            <input type="radio" name="method-select">
            <span>Paypal</span>
          </div>
          <!-- payment form -->
          <div class="panel-body payment-form" id="payment-form-Paypal" style="display: none;" data-method="Paypal" data-apimethod="Paypal">
            <input type="hidden" name="paymentMethod" value="Paypal">
            <div class="container-fluid card-input-container">
              <!-- fields which were set as mandatory on the connector, or are defined in variable "forceFields" will be displayed here -->
              <div id="paypalMsg">Proceed with PayPal</div>
              <input type="hidden" name="cardToken" id="paypalToken">
            </div><!-- container fluid end -->
          </div><!-- payment body form end -->
        </div><!-- payment method end -->
        <!-- payment selection end -->
      </div>
      <div class="container-fluid">
        <div class="cancelAndSubmit">
          <button type="button" name="cancel_btn" id="cancel_btn" value="cancel" class="btn btn-default" onclick="Ixopay.PaymentFormV2.cancelPaymentForm('https://gateway.ixopay.com/payment/cancel/3f97b57697e3e3316d3e');"> Cancel </button>
          <button type="submit" name="pay" id="proceed-btn" value="submit" class="btn" style="display: block" %}="">
            <i class="fa fa-lock"></i> Finish and pay </button>
          <div id="paypalButtonDiv" style="display: none;">
            <div id="zoid-paypal-button-3ca92094ed" class="paypal-button paypal-button-context-iframe paypal-button-label-checkout paypal-button-size-small paypal-button-layout-horizontal" data-paypal-smart-button-version="4.0.331" style="">
              <style>
                #zoid-paypal-button-3ca92094ed {
                  font-size: 0;
                  width: 100%;
                  overflow: hidden;
                  min-width: 75px;
                }

                #zoid-paypal-button-3ca92094ed.paypal-button-size-responsive {
                  text-align: center;
                }

                #zoid-paypal-button-3ca92094ed>.zoid-outlet {
                  display: inline-block;
                  min-width: 75px;
                  max-width: 750px;
                  position: relative;
                }

                #zoid-paypal-button-3ca92094ed.paypal-button-layout-vertical>.zoid-outlet {
                  min-width: 75px;
                }

                #zoid-paypal-button-3ca92094ed>.zoid-outlet {
                  width: 150px;
                  height: 25px;
                }

                #zoid-paypal-button-3ca92094ed.paypal-button-size-responsive>.zoid-outlet {
                  width: 100%;
                }

                #zoid-paypal-button-3ca92094ed>.zoid-outlet>iframe {
                  min-width: 100%;
                  max-width: 100%;
                  width: 75px;
                  height: 100%;
                  position: absolute;
                  top: 0;
                  left: 0;
                }

                #zoid-paypal-button-3ca92094ed>.zoid-outlet>iframe.zoid-component-frame {
                  z-index: 100;
                }

                #zoid-paypal-button-3ca92094ed>.zoid-outlet>iframe.zoid-prerender-frame {
                  transition: opacity .2s linear;
                  z-index: 200;
                }

                #zoid-paypal-button-3ca92094ed>.zoid-outlet>iframe.zoid-visible {
                  opacity: 1;
                }

                #zoid-paypal-button-3ca92094ed>.zoid-outlet>iframe.zoid-invisible {
                  opacity: 0;
                  pointer-events: none;
                }
              </style>
              <div class="zoid-outlet" style=""><iframe class="zoid-component-frame zoid-visible" frameborder="0" allowtransparency="true"
                  name="xcomponent__ppbutton__4__pmrhk2leei5cenjxhe3wezjwgyzweirmej2gczzchirhaylzobqwyllcov2hi33oeiwcey3pnvyg63tfnz2faylsmvxhiir2pmrhezlgei5ce5dpoarh2lbcojsw4zdfojigc4tfnz2ceot3ejzgkzrchirhi33qej6syitqojxxa4zchj5se5dzobsseorcojqxoirmej3gc3dvmurdu6zcmvxhmir2ejyhe33eovrxi2lpnyrcyittor4wyzjchj5sey3pnrxxeir2ejzws3dwmvzcelbcnrqwezlmei5cey3imvrww33voqrh2lbcnrxwgylmmurduitfnzpvkuzcfqrhaylznvsw45bchj5sex27or4xazk7l4rduis7l5thk3tdoruw63s7l4rh2lbcn5xec5lunbxxe2l2murdu6zcl5pxi6lqmvpv6ir2ejpv6ztvnzrxi2lpnzpv6it5fqrg63sdmfxggzlmei5hwis7l52hs4dfl5pseorcl5pwm5lomn2gs33ol5pse7jmejxw4rlsojxxeir2pmrf6x3upfygkx27ei5cex27mz2w4y3unfxw4x27ej6syiten5wwc2loei5cez3borsxoylzfzuxq33qmf4s4y3pnurcyittmvzxg2lpnzeuiir2ej2wszc7mqytimdemmydgnzyl5wwi5jwnvvhsntnmr4selbcmj2xi5dpnzjwk43tnfxw4skeei5ce5ljmrptcyzygazwimjwha4f63leou3g22tzgzwwiyzcfqrhezlomrsxezleij2xi5dpnzzseorcobqxs4dbnqrcyittorxxeylhmveuiir2ej2wszc7gm3tsn3chbsdkmrtl5wwi5jwnvvhsntnmr4selbcnvsxiyjchj5x2lbcmvxgcytmmvhgc5djozsug2dfmnvw65luei5gmylmonssyitdnruwk3tuei5hw7jmejzw65lsmnsseorcnvqw45lbnqrcyitqojswmzlumnuey33hnfxceotgmfwhgzjmej2xazdborsug3djmvxhiq3pnztgsz3vojqxi2lpnyrdu5dsovssyitdnbswg23pov2fk4tjei5g45lmnqwceylvorueg33emurduircfqrgm5lomruw4zzchj5seylmnrxxozleei5fwxjmejsgs43bnrwg653fmqrduwzcozsw43lpejosyitsmvwwk3lcmvzgkzbchjnv2lbcojsw2zlnmjsxeir2pmrf6x3upfygkx27ei5cex27mz2w4y3unfxw4x27ej6x2lbcmnxw23ljoqrduztbnrzwklbcn5xfezlomrsxeir2pmrf6x3upfygkx27ei5cex27mz2w4y3unfxw4x27ej6syitpnzbwy2ldnmrdu6zcl5pxi6lqmvpv6ir2ejpv6ztvnzrxi2lpnzpv6it5fqrg63ssmvzws6tfei5hwis7l52hs4dfl5pseorcl5pwm5lomn2gs33ol5pse7jmejwg6z2mmv3gk3bchirhoylsnyrcyitbo5qws5cqn5yhk4ccojuwiz3fei5hwis7l52hs4dfl5pseorcl5pwm5lomn2gs33ol5pse7jmejtwk5cqmftwkvlsnqrdu6zcl5pxi6lqmvpv6ir2ejpv6ztvnzrxi2lpnzpv6it5fqrhizltoqrdu6zcmfrxi2lpnyrduitdnbswg23pov2ce7jmej2wszbchirdgy3bhezdaojumvscelbcozsxe43jn5xceorcgqrh27jmejrwq2lmmrcg63lbnfxceorcnb2hi4dthixs653xo4xhaylzobqwyltdn5wselbcnfsceorcgntdgyjygrswgmbveiwcezdpnvqws3rchirgq5duobztulzpm5qxizlxmf4s42lyn5ygc6jomnxw2it5__"
                  title="PayPal" scrolling="no" allowpaymentrequest="allowpaymentrequest"
                  src="https://www.paypal.com/smart/button?env=production&amp;style.color=silver&amp;style.label=checkout&amp;locale.x=en_US&amp;domain=gateway.ixopay.com&amp;sessionID=uid_d140dc0378_mdu6mjy6mdy&amp;buttonSessionID=uid_1c803d1688_mdu6mjy6mdc&amp;renderedButtons=paypal&amp;storageID=uid_3797b8d523_mdu6mjy6mdy&amp;funding.disallowed=venmo&amp;logLevel=warn&amp;sdkMeta=eyJ1cmwiOiJodHRwczovL3d3dy5wYXlwYWxvYmplY3RzLmNvbS9hcGkvY2hlY2tvdXQuanM/Xz0xNjM1MzEyMzY1OTQ5In0&amp;uid=3ca92094ed&amp;version=4&amp;xcomponent=1"
                  style="background-color: transparent;"></iframe></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- FINISH BUTTONS -->
    <script type="text/javascript">
      $(function() {
        $('#paypalButtonDiv').hide();
        /**
         * display form of corresponding payment method
         */
        $('.payment-selection-container .payment-method-trigger').on('click', function(evt) {
          let selected = $(evt.target).parents('.payment-method');
          let paymentMethod = selected.data('method');
          $('.payment-form').slideUp();
          if ($('#payment-form-' + paymentMethod + ':hidden').length > 0) {
            $('#payment-form-' + paymentMethod).slideDown();
          }
          //mark selected img + radio
          $('.method-selected').removeClass('method-selected');
          selected.addClass('method-selected');
          $('.method-selected').find('input[name="method-select"]').prop('checked', 'on');
          if (paymentMethod == 'Paypal') {
            $('#proceed-btn').hide();
            $('#paypalButtonDiv').show();
          } else {
            $('#proceed-btn').show();
            $('#paypalButtonDiv').hide();
          }
        });
        /**
         * mark selected (stored) payment instrument as active/selected
         */
        $('.stored-payment-container .payment-method-trigger').on('click', function(evt) {
          let selected = $(evt.target).parents('.payment-method-trigger');
          $('.payment-method-data.selected').removeClass('selected');
          $('.payment-method-data input[type=radio]').removeAttr('checked');
          selected.find('.payment-method-data').addClass('selected');
          selected.find('input[type=radio]').prop('checked', 'on');
          // show "set as preferred instrument"-checkbox IF selected is not the already preferred one
          if (selected.find('input[type=radio].preferredInstrument').length) {
            $('.setNewPreferredInstrumentContainer').slideUp();
          } else {
            $('.setNewPreferredInstrumentContainer').slideDown();
          }
        });
        var $cardType = $('#cardType');
        var $cardIcon = $('#cardIcon');
        var paymentJs = new PaymentJs("1.2");
        var paymentJsBraintree = new PaymentJs("1.2");
        // initialize creditcard fields
        let ccForm = $('.payment-form[data-apimethod="Creditcard"]');
        if (ccForm.length) {
          var publicKey = ccForm.find('input[name="publicKey"]').val();
          var numberDivId = 'number_div_' + ccForm.data('method');
          var cvvDivId = 'cvv_div_' + ccForm.data('method');
          // style cc number and cvv field
          paymentJs.init(publicKey, numberDivId, cvvDivId, function(payment) {
            payment.setNumberStyle({
              'border': '#dddddd solid 1px',
              'height': '100%',
              'padding-left': '10px',
              'font-size': '15px',
              'color': 'rgb(85, 85, 85)'
            });
            payment.setCvvStyle({
              'border': '#dddddd solid 1px',
              'height': '100%',
              'padding-left': '10px',
              'font-size': '15px',
              'color': 'rgb(85, 85, 85)'
            });
            payment.numberOn('input', function(data) {
              if (cardType !== data.cardType) {
                cardType = data.cardType;
                if (cardType === null) {
                  $cardType.removeClass("visa");
                  $cardType.removeClass("mastercard");
                  $cardType.hide();
                  $cardIcon.show();
                } else if (cardType === 'mastercard') {
                  $cardType.addClass("mastercard");
                  $cardType.removeClass("visa");
                  $cardType.show();
                  $cardIcon.hide();
                } else if (cardType === 'visa') {
                  $cardType.addClass("visa");
                  $cardType.removeClass("mastercard");
                  $cardType.show();
                  $cardIcon.hide();
                }
              }
            });
          });
        }
        /**
         * validate and tokenize creditcard
         *
         * @param callback
         */
        function tokenized(callback) {
          let expiry = ccForm.find('select[name="expiry"]').val();
          let expiryParts = expiry.split('/');
          let data = {
            "cardHolder": ccForm.find('input[name="cardHolder"]').val()
          };
          data.month = expiryParts[0];
          data.year = expiryParts[1];
          paymentJs.tokenize(data, function(token, cardData) {
            ccForm.find('input[name="cardToken"]').val(token);
            callback(true);
          }, function(errors) {
            let visibleForm = $('.payment-form:visible');
            $('.has-error').removeClass('has-error');
            $.each(errors, function(index, ele) {
              //map js error to actual form element
              if (ele.attribute === "card_holder") {
                visibleForm.find('#cardHolder').parents('.form-group').addClass('has-error');
                visibleForm.find('#cardHolder').parents('.form-group').find('.error-block').text(ele.message);
              } else if (ele.attribute === "number") {
                visibleForm.find('[id^="number_div_"]').parents('.form-group').addClass('has-error');
                visibleForm.find('[id^="number_div_"]').parents('.form-group').find('.error-block').text(ele.message);
              } else if (ele.attribute === "cvv") {
                visibleForm.find('[id^="cvv_div_"]').parents('.form-group').addClass('has-error');
                visibleForm.find('[id^="cvv_div_"]').parents('.form-group').find('.error-block').text(ele.message);
              }
            });
            callback(false);
          });
        }
        /**
         * callback
         */
        function tokenizeFinished(success) {
          if (success) {
            // remove stored cardform
            $('#storedCardForm').remove();
            // remove other payment forms
            $('.payment-form:hidden').remove();
            // remove stored payment instruments form
            $('.stored-payment-container').remove();
            $('#payment-form').get(0).submit();
          } else {
            return false;
          }
        }
        /**
         * submit
         */
        $('#proceed-btn').on('click', function(ev) {
          ev.preventDefault();
          $('.has-error').removeClass('has-error');
          // use stored payment instrument
          if ($('.stored-payment-container:visible').length) {
            // remove unrelevant data and submit
            let unrelevantData = $('.payment-method-data:not(.selected)');
            unrelevantData.find('.ptToken').remove();
            unrelevantData.find('input[name="paymentMethod"]').remove();
            $('.payment-selection-container').remove();
            $('#payment-form').get(0).submit();
          } else {
            // use new payment instrument
            //validate mandatory fields
            let validMandatory = true;
            $.each($('.payment-form:visible .mandatory'), function(index, ele) {
              if ($(ele).val() === "") {
                $(ele).parents('.form-group').addClass('has-error');
                $(ele).parents('.form-group').find('.error-block').text('This field is required');
                validMandatory = false;
              }
            });
            if (validMandatory) {
              //for creditcards
              if ($('.payment-form[data-apimethod="Creditcard"]:visible').length) {
                // tokenize
                tokenized(tokenizeFinished);
              } else {
                //submit for non-creditcards
                $('.payment-form:hidden').remove();
                $('.stored-payment-container').remove();
                $('#payment-form').get(0).submit();
              }
            }
          }
        });
        var buttonOptions = {
          style: {
            color: 'silver'
          },
          locale: 'en_US'
        };
        var paypalOptions = {
          amount: "44.20",
          currency: "CAD",
          button: buttonOptions
        };
        paymentJsBraintree.initBraintreePaypal("sp7jIz3A4hN1bcyCMFY9", 'paypalButtonDiv', false, // gatherDeviceData, set true for merchant initiated card-on-file transactions
          function(data) {
            // success
            $('#paypalToken').val(data);
            $('#payment-form').get(0).submit();
          },
          function(error) {
            // error
            $('#paypalMsg').text('Paypal payment has failed, please try a different payment method.');
          },
          function(data) {
            // cancel
            $('#paypalMsg').text('Payment has been cancelled. Please try again or use a different payment method.');
          }, paypalOptions);
      });
    </script>
    <script src="https://gateway.ixopay.com/js/payment/ixopay_v2.js"></script>
    <script type="text/javascript">
      Ixopay.PaymentFormV2.init("multimethod");
    </script>
  </div>
</form>

Text Content

You are paying
Payment on DHL Global Payment Portal AWB 6176798666
AMOUNT
CAD 44.20
Credit/Debit Card
Name on Card

Card number

Expiry date
10 / 2021 11 / 2021 12 / 2021 01 / 2022 02 / 2022 03 / 2022 04 / 2022 05 / 2022
06 / 2022 07 / 2022 08 / 2022 09 / 2022 10 / 2022 11 / 2022 12 / 2022 01 / 2023
02 / 2023 03 / 2023 04 / 2023 05 / 2023 06 / 2023 07 / 2023 08 / 2023 09 / 2023
10 / 2023 11 / 2023 12 / 2023 01 / 2024 02 / 2024 03 / 2024 04 / 2024 05 / 2024
06 / 2024 07 / 2024 08 / 2024 09 / 2024 10 / 2024 11 / 2024 12 / 2024 01 / 2025
02 / 2025 03 / 2025 04 / 2025 05 / 2025 06 / 2025 07 / 2025 08 / 2025 09 / 2025
10 / 2025 11 / 2025 12 / 2025 01 / 2026 02 / 2026 03 / 2026 04 / 2026 05 / 2026
06 / 2026 07 / 2026 08 / 2026 09 / 2026 10 / 2026 11 / 2026 12 / 2026 01 / 2027
02 / 2027 03 / 2027 04 / 2027 05 / 2027 06 / 2027 07 / 2027 08 / 2027 09 / 2027
10 / 2027 11 / 2027 12 / 2027 01 / 2028 02 / 2028 03 / 2028 04 / 2028 05 / 2028
06 / 2028 07 / 2028 08 / 2028 09 / 2028 10 / 2028 11 / 2028 12 / 2028 01 / 2029
02 / 2029 03 / 2029 04 / 2029 05 / 2029 06 / 2029 07 / 2029 08 / 2029 09 / 2029
10 / 2029 11 / 2029 12 / 2029 01 / 2030 02 / 2030 03 / 2030 04 / 2030 05 / 2030
06 / 2030 07 / 2030 08 / 2030 09 / 2030 10 / 2030 11 / 2030 12 / 2030 01 / 2031
02 / 2031 03 / 2031 04 / 2031 05 / 2031 06 / 2031 07 / 2031 08 / 2031 09 / 2031
10 / 2031 11 / 2031 12 / 2031 01 / 2032 02 / 2032 03 / 2032 04 / 2032 05 / 2032
06 / 2032 07 / 2032 08 / 2032 09 / 2032 10 / 2032 11 / 2032 12 / 2032 01 / 2033
02 / 2033 03 / 2033 04 / 2033 05 / 2033 06 / 2033 07 / 2033 08 / 2033 09 / 2033
10 / 2033
CVV/CVC

Paypal
Proceed with PayPal
Cancel Finish and pay