API tools faq
paste
Guest User

Untitled

a guest
May 7th, 2019
48
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 24.62 KB | None | 0 0
raw download clone embed print report
  1.  
  2. @import models.user.InappTransaction
  3. @import models.user.LenderPaymentOptions
  4. @import models.Lender
  5.  
  6. @(inappTransaction: InappTransaction, lender: Lender, lenderMappings: Map[String,Array[Long]])
  7. <!DOCTYPE html>
  8. <html>
  9. <head>
  10. <title>
  11. SmartCoin Payment Page
  12. </title>
  13. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  14. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  15. <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  16. <style>
  17. body {
  18. background: #ebeff2;
  19. font-family: sans-serif;
  20. margin: 0px;
  21. }
  22. body .loader-wrapper {
  23. background-color: rgba(0, 0, 0, 0.7);
  24. position: fixed;
  25. z-index: 10;
  26. height: 100vh;
  27. top: 0px;
  28. left: 0px;
  29. width: 100vw;
  30. display: flex;
  31. justify-content: center;
  32. align-items: center;
  33. }
  34. body .is-hidden {
  35. display: none;
  36. }
  37. body .lds-ripple {
  38. display: inline-block;
  39. position: relative;
  40. width: 64px;
  41. height: 64px;
  42. }
  43. body .lds-ripple div {
  44. position: absolute;
  45. border: 4px solid #fff;
  46. opacity: 1;
  47. border-radius: 50%;
  48. animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
  49. }
  50. body .lds-ripple div:nth-child(2) {
  51. animation-delay: -0.5s;
  52. }
  53. @@keyframes lds-ripple {
  54. 0% {
  55. top: 28px;
  56. left: 28px;
  57. width: 0;
  58. height: 0;
  59. opacity: 1;
  60. }
  61. 100% {
  62. top: -1px;
  63. left: -1px;
  64. width: 58px;
  65. height: 58px;
  66. opacity: 0;
  67. }
  68. }
  69.  
  70. .payment-page .header-bar {
  71. background: #343c52;
  72. color: #fff;
  73. display: flex;
  74. text-align: center;
  75. justify-content: center;
  76. align-items: center;
  77. padding: 8px 0px;
  78. width: 100%;
  79. }
  80. .payment-page .header-bar .smart-logo {
  81. margin-right: 15px;
  82. }
  83. .payment-page .payment-options {
  84. margin-top: 16px;
  85. display: flex;
  86. text-align: center;
  87. justify-content: center;
  88. }
  89. .payment-page .payment-options .options-card {
  90. max-width: 400px;
  91. border-radius: 3px;
  92. background-color: #ffffff;
  93. box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);
  94. padding: 15px;
  95. padding-top: 0px;
  96. }
  97. .payment-page .payment-options .options-card .top-announce {
  98. background: #343c52;
  99. color: #fff;
  100. justify-content: center;
  101. margin-left: -15px;
  102. margin-right: -15px;
  103. padding: 32px;
  104. margin-bottom: 10px;
  105. }
  106. .payment-page .payment-options .options-card .amount-bar {
  107. display: flex;
  108. justify-content: space-between;
  109. padding-bottom: 16px;
  110. padding-top: 12px;
  111. margin-bottom: 16px;
  112. }
  113. .payment-page .payment-options .options-card .amount-bar .p-value {
  114. color: #343c52;
  115. width: 100%;
  116. font-size: 32px;
  117. }
  118. .payment-page .payment-options .options-card .p-header {
  119. font-size: 12px;
  120. color: #bcbcbc;
  121. margin-top: 16px;
  122. text-align: left;
  123. margin-bottom: 10px;
  124. }
  125. .payment-page .payment-options .options-card .payment-option {
  126. display: flex;
  127. padding-top: 10px;
  128. text-align: center;
  129. justify-content: center;
  130. flex-direction: row;
  131. }
  132. .payment-page .payment-options .options-card .payment-option .sec-img {
  133. display: flex;
  134. color: #fff;
  135. align-items: center;
  136. background: #33b5e6;
  137. border-radius: 50px;
  138. height: 40px;
  139. width: 40px;
  140. justify-content: center;
  141. margin-right: 8px;
  142. }
  143. .payment-page .payment-options .options-card .payment-option .sec-parent-bank {
  144. display: flex;
  145. border-bottom: solid 1px #e0e0e0;
  146. flex-direction: column;
  147. }
  148. .payment-page .payment-options .options-card .payment-option .sec-parent-bank #bank-options {
  149. text-align: left;
  150. max-height: 0px;
  151. overflow: hidden;
  152. transition: max-height 0.15s ease-out;
  153. }
  154. .payment-page .payment-options .options-card .payment-option .sec-parent-bank #bank-options.open {
  155. max-height: 200px;
  156. }
  157. .payment-page .payment-options .options-card .payment-option .sec-parent-bank #bank-options .section-box {
  158. border-bottom: solid 1px #e0e0e0;
  159. }
  160. .payment-page .payment-options .options-card .payment-option .sec-parent-bank #bank-options .section-box.account-type {
  161. border-bottom: none;
  162. }
  163. .payment-page .payment-options .options-card .payment-option .sec-parent-bank #bank-options .section-box.account-type {
  164. display: flex;
  165. }
  166. .payment-page .payment-options .options-card .payment-option .sec-parent-bank #bank-options .section-box.account-type .mode {
  167. margin-right: 60px;
  168. }
  169. .payment-page .payment-options .options-card .payment-option .sec-parent-bank #bank-options .section-box .title {
  170. color: #757575;
  171. text-transform: uppercase;
  172. font-size: 10px;
  173. margin-top: 8px;
  174. font-weight: 600;
  175. color: #0c264f;
  176. }
  177. .payment-page .payment-options .options-card .payment-option .sec-parent-bank #bank-options .section-box .options {
  178. color: #757575;
  179. margin-top: 12px;
  180. margin-bottom: 12px;
  181. font-size: 12px;
  182. }
  183. .payment-page .payment-options .options-card .payment-option .sec-name-select {
  184. border-bottom: solid 1px #e0e0e0;
  185. display: flex;
  186. flex-direction: row;
  187. align-items: center;
  188. padding-bottom: 10px;
  189. }
  190. .payment-page .payment-options .options-card .payment-option .sec-name-select.bank-toggle {
  191. cursor: pointer;
  192. border-bottom: none;
  193. }
  194. .payment-page .payment-options .options-card .payment-option .sec-name-select .sec-name {
  195. min-width: 230px;
  196. text-align: left;
  197. color: #757575;
  198. }
  199. .payment-page .payment-options .options-card .payment-option .sec-name-select .sec-name .title {
  200. font-weight: 600;
  201. color: #0c264f;
  202. }
  203. @@media (max-width: 768px) {
  204. .payment-page .payment-options .options-card .payment-option .sec-name-select .sec-name {
  205. min-width: 130px;
  206. }
  207. }
  208. .payment-page .payment-options .options-card .payment-option .sec-name-select .sec-name .charges {
  209. text-transform: uppercase;
  210. font-size: 10px;
  211. color: #bcbcbc;
  212. margin-top: 8px;
  213. }
  214. .payment-page .payment-options .options-card .payment-option .sec-name-select .sec-name .charges .amount {
  215. font-size: 12px;
  216. color: #0c264f;
  217. }
  218. .payment-page .payment-options .options-card .payment-option .sec-name-select .sec-select {
  219. min-width: 100px;
  220. justify-content: flex-end;
  221. color: #eea83b;
  222. display: flex;
  223. align-items: center;
  224. cursor: pointer;
  225. }
  226. .payment-page .payment-options .options-card .payment-option:last-child .sec-name-select {
  227. border-bottom: none;
  228. }
  229.  
  230. .box {
  231. display:none
  232. }
  233.  
  234. .payment-page .payment-options .options-card .payment-option .box .section-box {
  235. border-bottom: solid 1px #e0e0e0;
  236. }
  237. .payment-page .payment-options .options-card .payment-option .box .section-box.account-type {
  238. border-bottom: none;
  239. }
  240. .payment-page .payment-options .options-card .payment-option .box .section-box.account-type {
  241. display: flex;
  242. }
  243. .payment-page .payment-options .options-card .payment-option ..box .section-box.account-type .mode {
  244. margin-right: 60px;
  245. }
  246. .payment-page .payment-options .options-card .payment-option .box .section-box .title {
  247. color: #757575;
  248. text-transform: uppercase;
  249. font-size: 10px;
  250. margin-top: 8px;
  251. font-weight: 600;
  252. color: #0c264f;
  253. }
  254. .payment-page .payment-options .options-card .payment-option .box .section-box .options {
  255. color: #757575;
  256. margin-top: 12px;
  257. margin-bottom: 12px;
  258. font-size: 12px;
  259. }
  260. @@media (max-width: 768px) {
  261. .payment-page .payment-options .options-card {
  262. max-width: 95%;
  263. }
  264. }
  265.  
  266.  
  267. <!--.payment-page .custom-radio {-->
  268. <!--/* Hide the browser's default radio button */-->
  269. <!--}-->
  270. <!--.payment-page .custom-radio .container {-->
  271. <!--position: relative;-->
  272. <!--padding-left: 23px;-->
  273. <!--padding-top: 2px;-->
  274. <!--margin-right: 30px;-->
  275. <!--cursor: pointer;-->
  276. <!-- -webkit-user-select: none;-->
  277. <!-- -moz-user-select: none;-->
  278. <!-- -ms-user-select: none;-->
  279. <!--user-select: none;-->
  280. <!--}-->
  281. <!--.payment-page .custom-radio .container input {-->
  282. <!--position: absolute;-->
  283. <!--opacity: 0;-->
  284. <!--cursor: pointer;-->
  285. <!--}-->
  286. <!--.payment-page .custom-radio .checkmark {-->
  287. <!--position: absolute;-->
  288. <!--top: 0;-->
  289. <!--left: 0;-->
  290. <!--height: 16px;-->
  291. <!--width: 16px;-->
  292. <!--background-color: #eee;-->
  293. <!--border-radius: 50%;-->
  294. <!--}-->
  295. <!--.payment-page .custom-radio .container:hover input ~ .checkmark {-->
  296. <!--background-color: #ccc;-->
  297. <!--}-->
  298. <!--.payment-page .custom-radio .container input:checked ~ .checkmark {-->
  299. <!--background-color: white;-->
  300. <!--border: solid 1px black;-->
  301. <!--}-->
  302. <!--.payment-page .custom-radio .checkmark:after {-->
  303. <!--content: "";-->
  304. <!--position: absolute;-->
  305. <!--display: none;-->
  306. <!--}-->
  307. <!--.payment-page .custom-radio .container input:checked ~ .checkmark:after {-->
  308. <!--display: block;-->
  309. <!--}-->
  310. <!--.payment-page .custom-radio .container .checkmark:after {-->
  311. <!--top: 1px;-->
  312. <!--left: 1px;-->
  313. <!--width: 14px;-->
  314. <!--height: 14px;-->
  315. <!--border-radius: 50%;-->
  316. <!--background: #fa8f59;-->
  317. <!--}-->
  318.  
  319. </style>
  320. </head>
  321. <body>
  322. <div class="payment-page">
  323. <div class="header-bar">
  324. <img class="smart-logo" src="https://admin.smartcoin.co.in/assets/images/edbe4153e7db44a8a910ca2d34b69096-launcher.png"></img>
  325. <div>Smartcoin Loan Payment</div>
  326. </div>
  327. <div class="payment-options">
  328. <div class="options-card">
  329. <div class="top-announce">Dear @inappTransaction.getName().toUpperCase(), please select one of the following options to make the payment</div>
  330. <div class="amount-bar">
  331. <div class="p-value">&#8377; @inappTransaction.getAmount</div>
  332. </div>
  333. <div class="payment-option">
  334. <div class="sec-img"><i class="material-icons md-48">account_balance</i></div>
  335. <div class="sec-parent-bank">
  336. <div class="sec-name-select bank-toggle closed" onclick="toggleBankMode(event)">
  337. <div class="sec-name">
  338. <div>Bank Transfer</div>
  339. <div class="charges">Charges <span class="amount">&#8377; 0</span></div>
  340. </div>
  341. <div class="sec-select" data-type="BANK_TRANSFER">
  342. <span class="inner-text">Select</span>
  343. <i class="material-icons md-48">keyboard_arrow_down</i>
  344. </div>
  345. </div>
  346. <div class="" id="bank-options">
  347. <!-- <div class="payment-mode section-box">
  348. <div class="title">Payment Mode</div>
  349. <div class="options custom-radio">
  350. <label class="container">NEFT
  351. <input type="radio" checked="checked" name="payment-mode">
  352. <span class="checkmark"></span>
  353. </label>
  354. <label class="container">UPI
  355. <input type="radio" name="payment-mode">
  356. <span class="checkmark"></span>
  357. </label>
  358. <label class="container">IMPS
  359. <input type="radio" name="payment-mode">
  360. <span class="checkmark"></span>
  361. </label> -->
  362. <!-- <input type="radio" value="NEFT" name="payment-mode">NEFT
  363. <input type="radio" value="UPI" name="payment-mode">UPI
  364. <input type="radio" value="IMPS" name="payment-mode">IMPS -->
  365. <!-- </div>
  366. </div> -->
  367. <div class="account-number section-box">
  368. <div class="title">Bank Account Holder</div>
  369. <div class="options">
  370. <div>@lender.getName()</div>
  371. </div>
  372. </div>
  373. <div class="account-number section-box">
  374. <div class="title">Account Number</div>
  375. <div class="options">
  376. <div>@lender.getAcNo()</div>
  377. </div>
  378. </div>
  379. <div class="account-type section-box">
  380. <div class="mode">
  381. <div class="title">Payment Mode</div>
  382. <div class="options">
  383. <div>@lender.getIfsc()</div>
  384. </div>
  385. </div>
  386. <div>
  387. <div class="title">Account Type</div>
  388. <div class="options">
  389. <div>@lender.getAccType()</div>
  390. </div>
  391. </div>
  392. </div>
  393. </div>
  394. </div>
  395.  
  396. </div>
  397.  
  398. <div class="payment-option">
  399. <div class="sec-img"><i class="material-icons md-48">account_balance</i></div>
  400. <div class="sec-parent-bank">
  401. <div class="sec-name-select bank-toggle">
  402. <div class="sec-name">
  403. <div>Bank Transfer</div>
  404. <div class="charges">Charges <span class="amount">&#8377; 0</span></div>
  405. </div>
  406. <div type="text" class="slide-toggle">
  407. Select
  408. <i class="material-icons md-48">keyboard_arrow_right</i>
  409. </div>
  410. </div>
  411. </div>
  412. <div class="box">
  413. <div class="account-number section-box">
  414. <div class="title">Bank Account Holder</div>
  415. <div class="options">
  416. <div>@lender.getName()</div>
  417. </div>
  418. </div>
  419. <div class="account-number section-box">
  420. <div class="title">Account Number</div>
  421. <div class="options">
  422. <div>@lender.getAcNo()</div>
  423. </div>
  424. </div>
  425. <div class="account-type section-box">
  426. <div class="mode">
  427. <div class="title">Payment Mode</div>
  428. <div class="options">
  429. <div>@lender.getIfsc()</div>
  430. </div>
  431. </div>
  432. <div>
  433. <div class="title">Account Type</div>
  434. <div class="options">
  435. <div>@lender.getAccType()</div>
  436. </div>
  437. </div>
  438. </div>
  439. </div>
  440. </div>
  441. <!--<div class="payment-option">-->
  442. <!--<div class="sec-img"><i class="material-icons md-48">account_balance</i></div>-->
  443. <!--<div class="sec-name-select">-->
  444. <!--<div class="sec-name">-->
  445. <!--<div>Bank Transfer</div>-->
  446. <!--<div class="charges">Charges <span class="amount">&#8377; </span></div>-->
  447. <!--</div>-->
  448. <!--<div class="sec-select" data-type="BANK_TRANSFER" onclick="redirectToGateway(event)">-->
  449. <!--Select-->
  450. <!--<i class="material-icons md-48">keyboard_arrow_right</i>-->
  451. <!--</div>-->
  452. <!--</div>-->
  453. <!--</div>-->
  454. @if(lenderMappings != null) {
  455. @for((key, value) <- lenderMappings) {
  456. @if(key == "CREDITDEBIT") {
  457. @for(lenderId <- value) {
  458. @if(lenderId == inappTransaction.getLenderId()) {
  459. <div class="payment-option">
  460. <div class="sec-img"><i class="material-icons md-48">credit_card</i></div>
  461. <div class="sec-name-select">
  462. <div class="sec-name">
  463. <div>Debit/Credit Card</div>
  464. <div class="charges">Charges <span class="amount">&#8377; @inappTransaction.getDebitCreditCharges()</span></div>
  465. </div>
  466. <div class="sec-select" data-type="C" onclick="redirectToGateway(event)">
  467. Select
  468. <i class="material-icons md-48">keyboard_arrow_right</i>
  469. </div>
  470. </div>
  471. </div>
  472. }
  473. }
  474. }
  475. }
  476. }
  477.  
  478. @if(lenderMappings != null) {
  479. @for((key, value) <- lenderMappings) {
  480. @if(key == "NET_BANKING") {
  481. @for(lenderId <- value) {
  482. @if(lenderId == inappTransaction.getLenderId()) {
  483. <div class="payment-option">
  484. <div class="sec-img"><i class="material-icons md-48">account_balance</i></div>
  485. <div class="sec-name-select">
  486. <div class="sec-name">
  487. <div>Net Banking</div>
  488. <div class="charges">Charges <span class="amount">&#8377; @inappTransaction.getNetbankingCharges()</span></div>
  489. </div>
  490. <div class="sec-select" data-type="NB" onclick="redirectToGateway(event)">
  491. Select
  492. <i class="material-icons md-48">keyboard_arrow_right</i>
  493. </div>
  494. </div>
  495. </div>
  496. }
  497. }
  498. }
  499. }
  500. }
  501.  
  502. @if(lenderMappings != null) {
  503. @for((key, value) <- lenderMappings) {
  504. @if(key == "WALLET") {
  505. @for(lenderId <- value) {
  506. @if(lenderId == inappTransaction.getLenderId()) {
  507. <div class="payment-option">
  508. <div class="sec-img"><i class="material-icons md-48">account_balance_wallet</i></div>
  509. <div class="sec-name-select">
  510. <div class="sec-name">
  511. <div>Wallet</div>
  512. <div class="charges">Charges <span class="amount">&#8377; @inappTransaction.getWalletCharges</span></div>
  513. </div>
  514. <div class="sec-select" data-type="W" onclick="redirectToGateway(event)">
  515. Select
  516. <i class="material-icons md-48">keyboard_arrow_right</i>
  517. </div>
  518. </div>
  519. </div>
  520. }
  521. }
  522. }
  523. }
  524. }
  525.  
  526.  
  527. @if(lenderMappings != null) {
  528. @for((key, value) <- lenderMappings) {
  529. @if(key == "UPI") {
  530. @for(lenderId <- value) {
  531. @if(lenderId == inappTransaction.getLenderId()) {
  532. <div class="payment-option">
  533. <div class="sec-img"><i class="material-icons md-48">phonelink_ring</i></div>
  534. <div class="sec-name-select">
  535. <div class="sec-name">
  536. <div>UPI</div>
  537. <div class="charges">Charges <span class="amount">&#8377; @inappTransaction.getUpiCharges</span></div>
  538. </div>
  539. <div class="sec-select" data-type="U" onclick="redirectToGateway(event)">
  540. Select
  541. <i class="material-icons md-48">keyboard_arrow_right</i>
  542. </div>
  543. </div>
  544. </div>
  545. }
  546. }
  547. }
  548. }
  549. }
  550. </div>
  551. </div>
  552. </div>
  553. <div class="loader-wrapper is-hidden">
  554. <div class="lds-ripple"><div></div><div></div></div>
  555. </div>
  556. <script src="https://code.jquery.com/jquery-3.4.0.min.js"
  557. integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg="
  558. crossorigin="anonymous">
  559.  
  560. </script>
  561. <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
  562. <script>
  563. $(document).ready(function(){
  564. $(".slide-toggle").click(function(){
  565. $(".box").slideToggle();
  566. });
  567. });
  568. </script>
  569. <script>
  570.  
  571. function toggleBankMode(e) {
  572. var targetElem = e.currentTarget;
  573. var currentClass = targetElem.classList;
  574. var iconElem = document.querySelector('.bank-toggle .material-icons');
  575. // console.log(iconElem.innerHTML);
  576. var bankOptions = document.querySelector('#bank-options');
  577. var iconElemText = document.querySelector('.bank-toggle .inner-text');
  578. if(currentClass.contains('closed')) {
  579. currentClass.add('open');
  580. currentClass.remove('closed');
  581. iconElemText.innerText = '';
  582. iconElem.innerHTML = 'keyboard_arrow_up';
  583. bankOptions.classList.add('open');
  584. } else {
  585. currentClass.remove('open');
  586. currentClass.add('closed');
  587. iconElemText.innerText = 'Select';
  588. iconElem.innerHTML = 'keyboard_arrow_right';
  589. bankOptions.classList.remove('open');
  590. }
  591. }
  592.  
  593. function razorPay (receivedData) {
  594. var values = receivedData;
  595. var options = {
  596. "key": "rzp_live_dvUP9jh2Syuc6q",
  597. "amount": values["amount"], // INR 299.35
  598. "name": "SmartCoin Financials",
  599. "description": "Total payable",
  600. "image": values["imageUrl"],
  601. "currency": "INR",
  602. "handler": function (response){
  603. <!--alert(response.razorpay_payment_id);-->
  604. window.location.href = '/pay/successfull?reference=' + response.razorpay_payment_id;
  605. },
  606. "prefill": {
  607. "name": values["name"],
  608. "email": values["email"],
  609. "contact":values["contact"],
  610. "method":values["methodName"]
  611. },
  612. "notes": {
  613. "merchant_order_id": values["merchant_order_id"] || '',
  614. "user_payment_id": values["user_payment_id"] || '',
  615. "settelment_amount": values["settelment_amount"] || ''
  616. },
  617. "theme": {
  618. "color": "#343c52",
  619. "hide_topbar": "true"
  620.  
  621.  
  622.  
  623. }
  624. };
  625. var rzp1 = new Razorpay(options);
  626. rzp1.open();
  627. }
  628.  
  629. function redirectToGateway(e) {
  630. var loader = document.querySelector('.loader-wrapper');
  631. loader && loader.classList.remove('is-hidden');
  632. // console.log(e.target.dataset.type)
  633. var paymentType = e && e.target.dataset.type;
  634. var gatewayPath = '/pay/redirect?type=' + paymentType+'&amp;userId=' + @inappTransaction.getUserId() + '&amp;tag=' + "@inappTransaction.getNotes()";
  635. $.ajax({
  636. type: 'GET', url: gatewayPath,
  637. success: function(data){
  638. loader && loader.classList.add('is-hidden');
  639. if(data) {
  640. razorPay(data);
  641. }
  642. },
  643. error: function(data){
  644. loader && loader.classList.add('is-hidden');
  645. alert('Some error occurred while loading payment page');
  646. }
  647. });
  648. }
  649. </script>
  650. </body>
  651. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!