Payment Form Component - Copy this Html, Bootstrap Component to your project
Base on below HTML, restyling my page creditCardForm and bankAccountForm is storing the bank iframe , cannot change that :@using Core.Entities.Enums @{ this.Layout = null; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <title>Payment</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> <style> body { font family: 'Helvetica Neue', Helvetica, Arial, sans serif; background color: #ffffff; color: #333; padding: 20px; } .payment container { display: flex; justify content: space between; max width: 100%; margin: 0 auto; background color: #fff; border: 1px solid #ddd; border radius: 5px; box shadow: 0 2px 4px rgba(0, 0, 0, 0.1); padding: 20px; } .payment header { margin bottom: 20px; } .payment header img { width: 150px; } .form check { display: flex; align items: center; } .form check label { margin left: 5px; } .payment details { margin top: 20px; } .right section .table { border collapse: collapse; width: 100%; } .right section .item title, .right section .item price { padding: 8px 0; font size: 14px; font weight: 400; color: #333; border bottom: none; } .right section .table td, .right section .table th { border top: none !important; } .right section .total separator { border bottom: 1px solid #ddd; } .right section .total amount { font weight: bold; font size: 16px; border top: 2px solid #333; padding top: 8px; color: #000; } .btn pay { background color: #ffb900; color: #fff; padding: 12px; text align: center; border: none; border radius: 5px; font size: 18px; font weight: bold; margin top: 20px; width: 100%; } .btn pay:hover { background color: #ff9800; } .info links { text align: center; margin top: 20px; } .info links a { color: #007bff; text decoration: none; } .info links a:hover { text decoration: underline; } .trusted frame container { margin top: 20px; width: 100%; overflow x: hidden; } .field { margin bottom: 20px; } .field label { font size: 15px; display: block; margin bottom: 5px; } .field input[type="text"] { height: 30px; padding: 0px 12px; font size: 14px; border: 1px solid; border radius: 8px; box sizing: border box; } .field input[data quickstream api="bsb"] { width: 300px; } .field input[data quickstream api="accountNumber"] { width: 55%; } .field input[data quickstream api="accountName"] { width: 55%; } button[type="submit"] { background color: #ffb900; color: #fff; padding: 12px; width: 100%; text align: center; border: none; border radius: 5px; font size: 18px; font weight: bold; margin top: 20px; cursor: pointer; } button[type="submit"]:hover { background color: #ff9800; } .awl logo { position: absolute; top: 0; right: 0; width: 150px; height: auto; margin top: 20px; } @@media (max width: 768px) { .payment container { flex direction: column; } } </style> </head> <body> <div class="payment header"> <h2>Payment</h2> </div> <div class="payment container"> <div class="left section col md 6"> <div class="payment options"> <div class="form check form check inline"> <input class="form check input" type="radio" name="paymentOption" id="creditCard" value="creditCard" checked> <label class="form check label" for="creditCard">Credit Card</label> </div> <div class="form check form check inline"> <input class="form check input" type="radio" name="paymentOption" id="bankAccount" value="bankAccount"> <label class="form check label" for="bankAccount">Bank Account</label> </div> </div> <div id="creditCardForm" class="trusted frame container"> <form id="creditCardForm"> <div data quickstream api="creditCardContainer"></div> </form> </div> <div id="bankAccountForm" class="trusted frame container" style="display: none;"> <form method="POST" action="/MakePayment" id="bankACcountFrame"> <div class="field"> <label>Account Name:</label> <input type="text" data quickstream api="accountName" /> </div> <div class="field"> <label>Account Number:</label> <input type="text" data quickstream api="accountNumber" /> <div class="error" data field name="accountNumber"></div> </div> <div class="field"> <label>BSB:</label> <input type="text" data quickstream api="bsb" /> <div class="error" data field name="bsb"></div> </div> </form> </div> </div> <div class="right section col md 6"> <div class="payment details"> <h4>Your Purchase</h4> <img src="/images/AWL_Horzi_Colour.jpg" alt="AWL Logo" class="awl logo"> <table class="table"> <tbody> <tr> <td class="item title">Purchase Type</td> <td class="item price"> @if (ViewBag.RaffleType == eRaffleTypes.OneOff) { @:One Off } else if (ViewBag.RaffleType == eRaffleTypes.VIP) { @:VIP } else { @:One Off VIP } </td> </tr> <tr> <td class="item title">@ViewBag.Ticket entries</td> <td class="item price">$@ViewBag.Pledge</td> </tr> <tr> <td class="item title">Donation</td> <td class="item price">$@ViewBag.Donation</td> </tr> <tr class="total separator"> <td colspan="2"></td> </tr> <tr class="total amount"> <td>Total</td> <td> $@(ViewBag.Pledge + @ViewBag.Donation) </td> </tr> </tbody> </table> <button class="btn pay" id="commonPayNow">Pay Now</button> </div> </div> </div> <script src="https://code.jquery.com/jquery 3.3.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> @* <script type="text/javascript" src="https://api.quickstream.support.qvalent.com/rest/v1/quickstream api 1.0.min.js"></script> *@ <script type="text/javascript" src="https://api.quickstream.westpac.com.au/rest/v1/quickstream api 1.0.min.js"></script> <script src="/js/webpay/webpay.js"></script> <script> var creditCardPaymentUrl = '@Url.Action("CreditCardPayment", "WebPay")'; var bankAccountPaymentUrl = '@Url.Action("BankAccountPayment", "WebPay")'; </script> </body>
