Anna Ho 1 год назад
Родитель
Сommit
356835a9b0
10 измененных файлов: 532 добавлений и 129 удалений
  1. +4
    -3
      src/assets/images/icons/fps.svg
  2. +113
    -0
      src/assets/images/icons/jcb.svg
  3. +64
    -0
      src/assets/images/icons/mastercard.svg
  4. +115
    -0
      src/assets/images/icons/ppshk.svg
  5. +22
    -0
      src/assets/images/icons/unionpay.svg
  6. +73
    -0
      src/assets/images/icons/visacard.svg
  7. +37
    -40
      src/pages/Payment/Card/index.js
  8. +96
    -84
      src/pages/Payment/MultiPaymentWindow.js
  9. +2
    -2
      src/pages/Payment/index.js
  10. +6
    -0
      src/themes/palette.js

+ 4
- 3
src/assets/images/icons/fps.svg Просмотреть файл

@@ -1,7 +1,8 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 127.7 113.4" style="enable-background:new 0 0 127.7 113.4;" xml:space="preserve">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px"
viewBox="0 0 127.7 113.4" style="enable-background:new 0 0 127.7 113.4;" xml:space="preserve">
<style type="text/css">
.st0{fill:url(#SVGID_1_);}
.st1{fill:url(#SVGID_2_);}
@@ -715,4 +716,4 @@
<text transform="matrix(1 0 0 1 1167.1273 454.8369)" style="fill:#E30613; font-family:'UniversLTStd-Bold'; font-size:8px;">4X</text>
</g>
</g>
</svg>
</svg>

+ 113
- 0
src/assets/images/icons/jcb.svg Просмотреть файл

@@ -0,0 +1,113 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 251.15 158.68" enable-background="new 0 0 251.15 158.68" xml:space="preserve">
<g id="Card_Shape_1_">
<defs>
<path id="Card_Clip" d="M242.646,158.68H8.504c-4.677,0-8.504-3.827-8.504-8.504V8.504C0,3.827,3.827,0,8.504,0h234.142
c4.677,0,8.504,3.827,8.504,8.504v141.672C251.15,154.853,247.323,158.68,242.646,158.68z"/>
</defs>
<clipPath id="Card_Clip_1_">
<use xlink:href="#Card_Clip" overflow="visible"/>
</clipPath>
<g id="JCB_Background" clip-path="url(#Card_Clip_1_)">
<rect y="0" fill="#034693" width="251.15" height="158.68"/>
<g>
<g>
<g>
<defs>
<rect id="SVGID_1_" x="-144.102" y="0" width="538.09" height="158.68"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="-814.8211" y1="-197.7153" x2="-814.8211" y2="-1506.6348" gradientTransform="matrix(0.1926 0 0 0.1926 314.3002 267.7495)">
<stop offset="0" style="stop-color:#006DB7"/>
<stop offset="0.3" style="stop-color:#0071BA"/>
<stop offset="0.4064" style="stop-color:#1A85C6"/>
<stop offset="0.5822" style="stop-color:#40A0D7"/>
<stop offset="0.7454" style="stop-color:#5BB4E4"/>
<stop offset="0.8897" style="stop-color:#6BC1EB"/>
<stop offset="1" style="stop-color:#71C5EE"/>
</linearGradient>
<path clip-path="url(#SVGID_2_)" fill="url(#SVGID_3_)" d="M283.038-22.668v251.344H31.694
C31.694,89.863,137.326-22.668,283.038-22.668z"/>
</g>
</g>
<g>
<g>
<defs>
<rect id="SVGID_4_" x="-144.102" y="0" width="538.084" height="158.68"/>
</defs>
<clipPath id="SVGID_5_">
<use xlink:href="#SVGID_4_" overflow="visible"/>
</clipPath>
<radialGradient id="SVGID_6_" cx="-156.6651" cy="-812.3524" r="1305.4846" gradientTransform="matrix(0.1926 0 0 0.1926 320.4955 383.2222)" gradientUnits="userSpaceOnUse">
<stop offset="0.9" style="stop-color:#034693"/>
<stop offset="1" style="stop-color:#0071BB"/>
</radialGradient>
<path clip-path="url(#SVGID_5_)" fill="url(#SVGID_6_)" d="M38.294,226.135c0-138.812,112.535-251.344,251.341-251.344v251.344
H38.294z"/>
</g>
</g>
</g>
</g>
</g>
<g id="Mark">
<path fill="#FFFFFF" d="M202.5,114.669c0,13.216-10.715,23.932-23.932,23.932H48.65V44.011c0-13.217,10.715-23.932,23.934-23.932
H202.5V114.669z"/>
<g>
<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="149.2327" y1="85.8879" x2="186.811" y2="85.8879" gradientTransform="matrix(1.125 0 0 1.125 -16.1005 -10.6965)">
<stop offset="0" style="stop-color:#007F49"/>
<stop offset="0.2883" style="stop-color:#209248"/>
<stop offset="0.7632" style="stop-color:#50AF47"/>
<stop offset="1" style="stop-color:#62BA46"/>
</linearGradient>
<path fill="url(#SVGID_7_)" d="M160.142,90.435h9.895c0.311,0,0.899-0.049,1.18-0.111c1.9-0.411,3.481-2.098,3.481-4.394
c0-2.298-1.582-3.989-3.481-4.399c-0.28-0.061-0.869-0.111-1.18-0.111h-9.895V90.435z"/>
<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="149.2321" y1="80.0322" x2="186.8114" y2="80.0322" gradientTransform="matrix(1.125 0 0 1.125 -16.1005 -10.6965)">
<stop offset="0" style="stop-color:#007F49"/>
<stop offset="0.2883" style="stop-color:#209248"/>
<stop offset="0.7632" style="stop-color:#50AF47"/>
<stop offset="1" style="stop-color:#62BA46"/>
</linearGradient>
<path fill="url(#SVGID_8_)" d="M168.88,28.056c-9.441,0-17.095,7.654-17.095,17.093v17.755h24.189
c0.561,0,1.247,0.039,1.674,0.061c5.474,0.275,9.511,3.087,9.511,7.967c0,3.837-2.759,7.114-7.781,7.852v0.193
c5.548,0.385,9.795,3.437,9.795,8.248c0,5.203-4.662,8.549-10.876,8.549h-26.512v34.848h25.073
c9.441,0,17.094-7.654,17.094-17.094V28.056H168.88z"/>
<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="149.2324" y1="73.6583" x2="186.8086" y2="73.6583" gradientTransform="matrix(1.125 0 0 1.125 -16.1005 -10.6965)">
<stop offset="0" style="stop-color:#007F49"/>
<stop offset="0.2883" style="stop-color:#209248"/>
<stop offset="0.7632" style="stop-color:#50AF47"/>
<stop offset="1" style="stop-color:#62BA46"/>
</linearGradient>
<path fill="url(#SVGID_9_)" d="M173.526,72.17c0-2.258-1.582-3.772-3.442-4.087c-0.174-0.03-0.647-0.075-0.973-0.075h-8.969v8.323
h8.969c0.326,0,0.8-0.047,0.973-0.076C171.945,75.939,173.526,74.427,173.526,72.17z"/>
</g>
<linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="65.1053" y1="80.0322" x2="103.2647" y2="80.0322" gradientTransform="matrix(1.125 0 0 1.125 -16.1005 -10.6965)">
<stop offset="0" style="stop-color:#333377"/>
<stop offset="0.0714" style="stop-color:#2F397D"/>
<stop offset="0.6913" style="stop-color:#0D66AD"/>
<stop offset="1" style="stop-color:#0077BF"/>
</linearGradient>
<path fill="url(#SVGID_10_)" d="M74.292,28.056c-9.442,0-17.095,7.654-17.095,17.093v42.216c4.794,2.323,9.747,3.836,14.788,3.836
c5.91,0,9.157-3.607,9.157-8.463V62.906h14.702v19.833c0,7.757-4.762,13.979-21.102,13.979c-9.834,0-17.546-2.121-17.546-2.121
v36.026H82.27c9.441,0,17.095-7.654,17.095-17.094V28.056H74.292z"/>
<linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="106.9685" y1="80.0322" x2="144.0293" y2="80.0322" gradientTransform="matrix(1.125 0 0 1.125 -16.1005 -10.6965)">
<stop offset="0" style="stop-color:#743237"/>
<stop offset="0.4006" style="stop-color:#AA263E"/>
<stop offset="0.8011" style="stop-color:#DA1C44"/>
<stop offset="1" style="stop-color:#EC1846"/>
</linearGradient>
<path fill="url(#SVGID_11_)" d="M121.586,28.056c-9.441,0-17.094,7.654-17.094,17.093v22.38c4.331-3.715,11.821-6.037,23.99-5.489
c6.514,0.29,13.422,2.037,13.422,2.037v7.238c-3.457-1.752-7.603-3.375-12.945-3.78c-9.235-0.698-14.793,3.816-14.793,11.805
c0,7.987,5.558,12.5,14.793,11.799c5.342-0.401,9.543-2.067,12.945-3.775v7.234c0,0-6.908,1.746-13.422,2.042
c-12.169,0.547-19.659-1.774-23.99-5.489v39.471h25.072c9.44,0,17.094-7.654,17.094-17.094V28.056H121.586z"/>
</g>
</svg>

+ 64
- 0
src/assets/images/icons/mastercard.svg Просмотреть файл

@@ -0,0 +1,64 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 251.15 158.68" enable-background="new 0 0 251.15 158.68" xml:space="preserve">
<path class="CardShape" id="Card_Shape" fill="#010101" d="M242.646,158.68H8.504c-4.677,0-8.504-3.827-8.504-8.504V8.504C0,3.827,3.827,0,8.504,0
h234.142c4.677,0,8.504,3.827,8.504,8.504v141.672C251.15,154.853,247.323,158.68,242.646,158.68z"/>
<g id="Mark">
<path id="XMLID_567_" fill="#FFFFFF" d="M70.489,145.45v-8.972c0-3.368-2.027-5.604-5.485-5.634
c-1.818-0.03-3.696,0.536-5.008,2.534c-0.984-1.58-2.534-2.534-4.71-2.534c-1.52,0-3.13,0.417-4.292,2.087v-1.729h-2.862v14.248
h2.892v-8.168c0-2.474,1.49-3.786,3.607-3.786c2.057,0,3.219,1.341,3.219,3.756v8.197h2.892v-8.168c0-2.474,1.55-3.786,3.607-3.786
c2.116,0,3.249,1.341,3.249,3.756v8.197H70.489z M116.93,131.201h-5.187v-4.322h-2.891v4.322h-3.011v2.593h3.011v6.737
c0,3.309,1.163,5.276,4.829,5.276c1.341,0,2.892-0.417,3.875-1.103l-0.895-2.534c-0.924,0.537-1.937,0.805-2.742,0.805
c-1.55,0-2.176-0.954-2.176-2.385v-6.796h5.187V131.201z M143.37,130.844c-1.788,0-3.07,0.835-3.875,2.087v-1.729h-2.832v14.248
h2.862v-8.018c0-2.355,1.133-3.875,3.16-3.875c0.626,0,1.282,0.089,1.938,0.358l0.954-2.683
C144.89,130.963,143.996,130.844,143.37,130.844L143.37,130.844z M103.397,132.334c-1.49-0.984-3.547-1.49-5.813-1.49
c-3.607,0-5.813,1.699-5.813,4.531c0,2.325,1.61,3.726,4.799,4.173l1.461,0.209c1.699,0.238,2.623,0.835,2.623,1.639
c0,1.103-1.252,1.818-3.368,1.818c-2.235,0-3.696-0.686-4.739-1.49l-1.461,2.236c2.116,1.55,4.65,1.848,6.17,1.848
c4.113,0,6.379-1.908,6.379-4.62c0-2.504-1.729-3.786-4.859-4.233l-1.461-0.209c-1.341-0.179-2.534-0.596-2.534-1.55
c0-1.043,1.133-1.759,2.832-1.759c1.818,0,3.577,0.686,4.441,1.222L103.397,132.334z M146.619,138.326
c0,4.322,2.891,7.482,7.482,7.482c2.146,0,3.577-0.477,5.127-1.699l-1.49-2.236c-1.163,0.835-2.385,1.282-3.726,1.282
c-2.474-0.03-4.412-1.967-4.412-4.829c0-2.862,1.938-4.799,4.412-4.829c1.342,0,2.564,0.447,3.726,1.282l1.49-2.236
c-1.55-1.222-2.981-1.699-5.127-1.699C149.511,130.844,146.619,134.003,146.619,138.326L146.619,138.326z M126.588,130.844
c-4.173,0-7.035,3.011-7.035,7.452c0,4.531,2.981,7.512,7.244,7.512c2.146,0,4.113-0.537,5.842-1.997l-1.52-2.116
c-1.192,0.954-2.712,1.49-4.143,1.49c-1.997,0-4.024-1.133-4.382-3.696h10.642c0.03-0.387,0.06-0.775,0.06-1.192
C133.265,133.854,130.582,130.844,126.588,130.844L126.588,130.844z M126.528,133.497c2.116,0,3.547,1.371,3.756,3.607h-7.691
C122.862,135.017,124.233,133.497,126.528,133.497L126.528,133.497z M87.956,138.326v-7.124h-2.862v1.729
c-0.984-1.282-2.593-2.087-4.62-2.087c-3.994,0-7.035,3.13-7.035,7.482s3.041,7.482,7.035,7.482c2.027,0,3.636-0.805,4.62-2.086
v1.729h2.862V138.326z M76.42,138.326c0-2.683,1.699-4.829,4.441-4.829c2.623,0,4.352,2.057,4.352,4.829
c0,2.772-1.729,4.829-4.352,4.829C78.12,143.154,76.42,141.008,76.42,138.326L76.42,138.326z M186.414,130.844
c-1.788,0-3.07,0.835-3.875,2.087v-1.729h-2.832v14.248h2.862v-8.018c0-2.355,1.133-3.875,3.16-3.875
c0.626,0,1.282,0.089,1.938,0.358l0.954-2.683C187.934,130.963,187.039,130.844,186.414,130.844L186.414,130.844z M209.373,143.383
c0.199,0,0.385,0.037,0.56,0.111c0.174,0.074,0.327,0.175,0.458,0.303c0.13,0.128,0.233,0.278,0.308,0.451
c0.075,0.172,0.113,0.355,0.113,0.549c0,0.194-0.038,0.377-0.113,0.548c-0.075,0.171-0.178,0.321-0.308,0.449
c-0.131,0.128-0.283,0.23-0.458,0.305c-0.175,0.075-0.361,0.113-0.56,0.113c-0.203,0-0.393-0.038-0.57-0.113
c-0.177-0.075-0.33-0.177-0.459-0.305c-0.13-0.128-0.232-0.278-0.307-0.449c-0.075-0.171-0.112-0.354-0.112-0.548
c0-0.194,0.037-0.377,0.112-0.549c0.075-0.172,0.177-0.322,0.307-0.451c0.129-0.129,0.282-0.23,0.459-0.303
C208.98,143.42,209.17,143.383,209.373,143.383z M209.373,145.9c0.153,0,0.295-0.029,0.427-0.087
c0.132-0.058,0.247-0.137,0.346-0.236c0.1-0.099,0.177-0.216,0.234-0.35s0.085-0.277,0.085-0.43s-0.028-0.296-0.085-0.43
c-0.057-0.134-0.134-0.251-0.234-0.35c-0.099-0.1-0.215-0.177-0.346-0.234c-0.132-0.057-0.274-0.085-0.427-0.085
c-0.155,0-0.3,0.028-0.435,0.085c-0.135,0.057-0.253,0.134-0.352,0.234c-0.099,0.099-0.178,0.216-0.234,0.35
c-0.057,0.134-0.085,0.277-0.085,0.43s0.028,0.296,0.085,0.43c0.056,0.134,0.135,0.251,0.234,0.35
c0.099,0.099,0.217,0.178,0.352,0.236C209.073,145.871,209.218,145.9,209.373,145.9z M209.456,144.136
c0.169,0,0.299,0.037,0.39,0.113c0.091,0.075,0.137,0.177,0.137,0.307c0,0.109-0.036,0.198-0.109,0.269
c-0.073,0.07-0.176,0.114-0.31,0.13l0.43,0.496h-0.336l-0.399-0.492h-0.128v0.492h-0.281v-1.314H209.456z M209.13,144.382v0.35
h0.322c0.074,0,0.133-0.014,0.177-0.043c0.044-0.029,0.066-0.073,0.066-0.133c0-0.058-0.022-0.101-0.066-0.13
c-0.044-0.029-0.103-0.043-0.177-0.043H209.13z M175.444,138.326v-7.124h-2.862v1.729c-0.984-1.282-2.593-2.087-4.62-2.087
c-3.994,0-7.035,3.13-7.035,7.482s3.04,7.482,7.035,7.482c2.027,0,3.637-0.805,4.62-2.086v1.729h2.862V138.326z M163.908,138.326
c0-2.683,1.699-4.829,4.441-4.829c2.623,0,4.352,2.057,4.352,4.829c0,2.772-1.729,4.829-4.352,4.829
C165.607,143.154,163.908,141.008,163.908,138.326L163.908,138.326z M204.209,138.326v-12.847h-2.862v7.452
c-0.984-1.282-2.593-2.087-4.621-2.087c-3.994,0-7.035,3.13-7.035,7.482s3.041,7.482,7.035,7.482c2.027,0,3.637-0.805,4.621-2.086
v1.729h2.862V138.326z M192.673,138.326c0-2.683,1.699-4.829,4.442-4.829c2.623,0,4.352,2.057,4.352,4.829
c0,2.772-1.729,4.829-4.352,4.829C194.372,143.154,192.673,141.008,192.673,138.326z"/>
<g id="XMLID_328_">
<rect x="100.068" y="22.773" fill="#F16122" width="51.589" height="84.266"/>
<path id="XMLID_330_" fill="#E91D25" d="M105.394,64.906c0-17.095,8.004-32.32,20.469-42.133
c-9.116-7.176-20.618-11.458-33.119-11.458c-29.595,0-53.587,23.994-53.587,53.591s23.992,53.591,53.587,53.591
c12.501,0,24.003-4.281,33.119-11.458C113.398,97.227,105.394,82.002,105.394,64.906z"/>
<path fill="#F79E1D" d="M207.456,98.114V96.39h0.696v-0.352h-1.772v0.352h0.696v1.725H207.456z M210.895,98.114v-2.08h-0.543
l-0.625,1.43l-0.625-1.43h-0.543v2.08h0.384v-1.569l0.586,1.353h0.397l0.586-1.356v1.572H210.895z"/>
<path fill="#F79E1D" d="M212.568,64.906c0,29.597-23.992,53.591-53.587,53.591c-12.501,0-24.003-4.281-33.119-11.458
c12.465-9.813,20.468-25.038,20.468-42.133c0-17.095-8.004-32.32-20.468-42.133c9.116-7.176,20.617-11.458,33.119-11.458
C188.577,11.315,212.568,35.309,212.568,64.906z"/>
</g>
</g>
</svg>

+ 115
- 0
src/assets/images/icons/ppshk.svg
Разница между файлами не показана из-за своего большого размера
Просмотреть файл


+ 22
- 0
src/assets/images/icons/unionpay.svg Просмотреть файл

@@ -0,0 +1,22 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="296.25px" height="190px" viewBox="0 0 296.25 190" enable-background="new 0 0 296.25 190" xml:space="preserve">
<g>
<path fill="#01798a" fill-rule="nonzero" id="path22" d="m281.252502,0.47749l-72.764999,-0.018753c-0.008743,0 -0.018753,0 -0.018753,0c-0.056244,0 -0.111252,0.01001 -0.166245,0.01001c-9.996246,0.306244 -22.446259,8.323746 -24.71376,18.209992l-34.41124,152.262133c-2.267502,9.978561 3.901245,18.09819 13.824997,18.247604l76.442505,0c9.772491,-0.483398 19.268738,-8.408691 21.497498,-18.182602l34.412506,-152.263384c2.303741,-10.080003 -4.013763,-18.265 -14.102509,-18.265"/>
<path fill="#024381" fill-rule="nonzero" id="path20" d="m149.177505,170.940872l34.411255,-152.262133c2.267502,-9.886247 14.717499,-17.903749 24.713745,-18.209992l-28.931244,-0.018753l-52.125008,-0.01001c-10.024124,0.205002 -22.636368,8.278763 -24.903,18.238755l-34.421379,152.262133c-2.275871,9.978561 3.901878,18.09819 13.819374,18.247604l81.261253,0c-9.923752,-0.149414 -16.092499,-8.269043 -13.824997,-18.247604"/>
<path fill="#dd0228" fill-rule="nonzero" id="path16" d="m67.921875,170.940872l34.421371,-152.262117c2.266624,-9.960008 14.878876,-18.033753 24.903,-18.238755l-66.775497,-0.017502c-10.080124,0 -23.004002,8.16626 -25.307625,18.256257l-34.421425,152.262117c-0.209472,0.929245 -0.325684,1.839874 -0.395019,2.731003l0,2.824753c0.673827,7.27388 6.229007,12.570755 14.21432,12.691849l67.180249,0c-9.917496,-0.149414 -16.095245,-8.269043 -13.819374,-18.247604"/>
<path fill="#ffffff" fill-rule="nonzero" id="path24" d="m128.653748,111.388123l1.263748,0c1.161255,0 1.942505,-0.389626 2.308746,-1.161125l3.283752,-4.914497l8.793747,0l-1.83374,3.232376l10.543747,0l-1.337494,4.952621l-12.546265,0c-1.444992,2.173874 -3.22374,3.195877 -5.362488,3.074753l-6.535004,0l1.421249,-5.184128m-1.443748,7.098251l23.099998,0l-1.472504,5.379875l-9.289993,0l-1.417496,5.192879l9.039993,0l-1.472504,5.379364l-9.039993,0l-2.100006,7.673386c-0.520004,1.282623 0.163757,1.859375 2.040009,1.7285l7.367493,0l-1.365005,4.998993l-14.144989,0c-2.681259,0 -3.601006,-1.533752 -2.760002,-4.608368l2.68499,-9.792511l-5.778496,0l1.46788,-5.379364l5.779366,0l1.41626,-5.192879l-5.52375,0l1.46875,-5.379875zm36.870003,-13.210503l-0.363754,3.149376c0,0 4.357498,-3.2715 8.315002,-3.2715l14.623749,0l-5.592499,20.244247c-0.46376,2.314377 -2.452499,3.465256 -5.965012,3.465256l-16.574997,0l-3.882492,14.215363c-0.223755,0.761749 0.092499,1.152374 0.928741,1.152374l3.261246,0l-1.198746,4.412506l-8.291245,0c-3.182495,0 -4.506256,-0.957001 -3.981247,-2.879379l10.971237,-40.488243l7.75,0l0.000015,0zm12.383743,5.722626l-13.052505,0l-1.561249,5.462502c0,0 2.173752,-1.569374 5.806259,-1.625504c3.622498,-0.056747 7.757492,0 7.757492,0l1.050003,-3.836998zm-4.728745,12.671875c0.964996,0.130875 1.50499,-0.250999 1.569992,-1.152252l0.798752,-2.879494l-13.072495,0l-1.096252,4.031746l11.800003,0zm-8.817505,6.540627l7.535004,0l-0.139999,3.26062l2.006241,0c1.013748,0 1.516251,-0.324615 1.516251,-0.96524l0.59375,-2.109375l6.262497,0l-0.836243,3.074615c-0.707504,2.564499 -2.582504,3.902374 -5.630005,4.033249l-4.013748,0l-0.018753,5.573746c-0.073746,0.892624 0.733749,1.347626 2.396255,1.347626l3.772507,0l-1.217514,4.413132l-9.048737,0c-2.536255,0.120621 -3.779999,-1.087875 -3.753754,-3.651382l0.576248,-14.97699"/>
<path fill="#ffffff" fill-rule="nonzero" id="path28" d="m71.610374,78.304749c-1.022003,5.007751 -3.391121,8.854004 -7.066002,11.585373c-3.641499,2.685127 -8.338375,4.031754 -14.088749,4.031754c-5.411625,0 -9.378998,-1.375 -11.910751,-4.134254c-1.755875,-1.960495 -2.629372,-4.450249 -2.629372,-7.460495c0,-1.244629 0.148998,-2.582504 0.446373,-4.022377l6.126877,-29.543507l9.253498,0l-6.043499,29.209003c-0.186001,0.808502 -0.26025,1.561005 -0.2505,2.23925c-0.00975,1.496124 0.361748,2.72213 1.11425,3.678627c1.096249,1.421875 2.8755,2.127502 5.351498,2.127502c2.847252,0 5.193375,-0.696251 7.014252,-2.099625c1.821251,-1.393501 3.01025,-3.372002 3.544373,-5.945755l6.062504,-29.209003l9.206619,0l-6.131371,29.543507"/>
<path fill="#ffffff" fill-rule="nonzero" id="path34" d="m110.472122,66.682121l7.247124,0l-5.67675,26.366753l-7.232872,0l5.662498,-26.366753m2.28125,-9.605877l7.311623,0l-1.365746,6.400005l-7.311127,0l1.36525,-6.400005"/>
<path fill="#ffffff" fill-rule="nonzero" id="path36" d="m124.134247,91.042c-1.8955,-1.811501 -2.852501,-4.254875 -2.861748,-7.357872c0,-0.529877 0.032249,-1.133377 0.102501,-1.793503c0.06987,-0.668999 0.158249,-1.319374 0.283249,-1.922874c0.859375,-4.282753 2.689873,-7.683128 5.509247,-10.191879c2.815002,-2.517624 6.211258,-3.78125 10.1875,-3.78125c3.256256,0 5.838745,0.910629 7.729996,2.731506c1.889999,1.830498 2.837509,4.301247 2.837509,7.442375c0,0.537994 -0.04126,1.160622 -0.111252,1.829498c-0.083755,0.678246 -0.184998,1.328621 -0.302505,1.969749c-0.839996,4.217751 -2.664993,7.581123 -5.485001,10.043503c-2.819992,2.480499 -6.206253,3.715248 -10.154999,3.715248c-3.269989,0 -5.84375,-0.891502 -7.734497,-2.684502m13.810745,-5.221252c1.277512,-1.384247 2.192505,-3.484375 2.75,-6.280251c0.083755,-0.436501 0.157501,-0.891998 0.203751,-1.347122c0.046249,-0.446251 0.065002,-0.86425 0.065002,-1.245125c0,-1.625999 -0.413742,-2.88913 -1.244995,-3.78125c-0.826248,-0.901375 -2.001251,-1.346748 -3.520004,-1.346748c-2.007492,0 -3.642502,0.705124 -4.923752,2.117744c-1.292496,1.412628 -2.207489,3.549255 -2.783752,6.392128c-0.078751,0.436501 -0.143738,0.873497 -0.203751,1.300751c-0.046249,0.436501 -0.059998,0.845253 -0.051239,1.216751c0,1.616753 0.413742,2.861877 1.244995,3.744125c0.826248,0.882874 1.996246,1.319374 3.535004,1.319374c2.016251,0 3.651245,-0.696754 4.928741,-2.090378"/>
<path fill="#e02f41" fill-rule="nonzero" id="path14" d="m208.46875,0.458753l-29.097504,-0.008743l28.931259,0.018738c0.054993,0 0.110001,-0.009994 0.166245,-0.009994"/>
<path fill="#2e4f7d" fill-rule="nonzero" id="path18" d="m179.371246,0.449994l-51.724998,-0.027496c-0.129997,0 -0.264999,0.008743 -0.400002,0.017502l52.125,0.009995"/>
<path fill="#ffffff" fill-rule="nonzero" id="path26" d="m194.942505,111.611374l1.747498,-6.150002l8.835007,0l-0.381256,2.256874c0,0 4.514999,-2.256874 7.766251,-2.256874c3.252502,0 10.925003,0 10.925003,0l-1.736252,6.150002l-1.71875,0l-8.241257,29.005371l1.71875,0l-1.634995,5.760254l-1.71875,0l-0.714996,2.498993l-8.556259,0l0.71376,-2.498993l-16.880005,0l1.645004,-5.760254l1.691254,0l8.248749,-29.005371l-1.708755,0m9.532501,0l-2.248749,7.849998c0,0 3.847504,-1.476501 7.163742,-1.894501c0.732513,-2.741249 1.690002,-5.955498 1.690002,-5.955498l-6.604996,0zm-3.289993,11.529747l-2.256256,8.22213c0,0 4.263748,-2.099625 7.190002,-2.276382c0.845001,-3.177742 1.691254,-5.945747 1.691254,-5.945747l-6.625,0zm1.653748,17.475624l1.691238,-5.964371l-6.594986,0l-1.700012,5.964371l6.60376,0zm21.368744,-35.536125l8.306244,0l0.352509,3.06488c-0.055008,0.780251 0.408752,1.15287 1.393753,1.15287l1.467499,0l-1.485001,5.192879l-6.104996,0c-2.331253,0.120621 -3.530014,-0.7705 -3.641251,-2.694374l-0.288757,-6.716255zm-2.433746,11.13913l26.904999,0l-1.578751,5.574623l-8.566254,0l-1.46875,5.183121l8.55751,0l-1.58876,5.565506l-9.53125,0l-2.15625,3.261749l4.665009,0l1.077499,6.530746c0.128738,0.650375 0.705002,0.966248 1.690002,0.966248l1.448746,0l-1.522507,5.378372l-5.128738,0c-2.657501,0.130875 -4.03125,-0.761124 -4.143753,-2.68399l-1.236252,-5.964386l-4.244995,6.345261c-1.003754,1.792877 -2.546265,2.629379 -4.626251,2.498993l-7.832504,0l1.523743,-5.379868l2.443756,0c1.003754,0 1.838745,-0.445877 2.591248,-1.346756l6.643753,-9.606369l-8.566254,0l1.587509,-5.565506l9.291245,0l1.477493,-5.183121l-9.299988,0l1.588745,-5.574623"/>
<path fill="#ffffff" fill-rule="nonzero" id="path30" d="m80.134247,66.672874l6.535622,0l-0.747498,3.808998l0.938004,-1.086876c2.118622,-2.266624 4.691872,-3.391121 7.729996,-3.391121c2.75,0 4.733376,0.799377 5.9785,2.40625c1.225998,1.607498 1.560501,3.828125 0.980499,6.680252l-3.600624,17.967751l-6.716873,0l3.251495,-16.286125c0.335007,-1.681625 0.242256,-2.936005 -0.274368,-3.744629c-0.510254,-0.808121 -1.486382,-1.207123 -2.893631,-1.207123c-1.727997,0 -3.182121,0.538124 -4.366623,1.607002c-1.189499,1.077621 -1.974121,2.573746 -2.359871,4.477997l-2.996132,15.152878l-6.730873,0l5.272377,-26.385254"/>
<path fill="#ffffff" fill-rule="nonzero" id="path32" d="m155.085007,66.672874l6.541245,0l-0.742493,3.808998l0.927505,-1.086876c2.119995,-2.266624 4.702499,-3.391121 7.731247,-3.391121c2.75,0 4.737503,0.799377 5.972488,2.40625c1.21875,1.607498 1.571259,3.828125 0.976257,6.680252l-3.586258,17.967751l-6.726242,0l3.252502,-16.286125c0.33374,-1.681625 0.241241,-2.936005 -0.270004,-3.744629c-0.529999,-0.808121 -1.487503,-1.207123 -2.888748,-1.207123c-1.728745,0 -3.177505,0.538124 -4.376251,1.607002c-1.190002,1.077621 -1.978745,2.573746 -2.350006,4.477997l-3.009995,15.152878l-6.722504,0l5.271255,-26.385254"/>
<path fill="#ffffff" fill-rule="nonzero" id="path38" d="m187.417496,50.321239l18.990005,0c3.651245,0 6.474991,0.827499 8.416245,2.452499c1.932495,1.645004 2.899994,4.005005 2.899994,7.080006l0,0.092499c0,0.585003 -0.038742,1.244995 -0.09375,1.960007c-0.09375,0.706242 -0.214996,1.421242 -0.371246,2.164993c-0.836243,4.069374 -2.778748,7.339874 -5.778748,9.820374c-3.011246,2.47113 -6.577499,3.716255 -10.683746,3.716255l-10.183762,0l-3.148743,15.450249l-8.817505,0l8.771255,-42.736881m4.746246,19.854504l8.446259,0c2.201248,0 3.947495,-0.511749 5.221237,-1.523872c1.263763,-1.022003 2.100006,-2.582504 2.563751,-4.700623c0.073761,-0.391251 0.12001,-0.743752 0.176254,-1.068756c0.028748,-0.306248 0.065002,-0.613747 0.065002,-0.910004c0,-1.514999 -0.537506,-2.61124 -1.616257,-3.29874c-1.077499,-0.69751 -2.767487,-1.03125 -5.110001,-1.03125l-7.172501,0l-2.573746,12.533245"/>
<path fill="#ffffff" fill-rule="nonzero" id="path40" d="m257.188751,98.159126c-2.787506,5.926872 -5.443756,9.382378 -7.003754,10.989754c-1.5625,1.589371 -4.654999,5.287125 -12.106247,5.007874l0.641251,-4.524002c6.270004,-1.932503 9.661255,-10.638626 11.59375,-14.493622l-2.303757,-28.392006l4.850006,-0.064995l4.068741,0l0.4375,17.81012l7.626251,-17.81012l7.721252,0l-15.524994,31.476997"/>
<path fill="#ffffff" fill-rule="nonzero" id="path42" d="m235.598755,68.828125l-3.067505,2.109375c-3.205002,-2.508247 -6.131256,-4.059998 -11.778748,-1.440376c-7.693756,3.567375 -14.122498,30.928627 7.059998,21.916504l1.207504,1.430626l8.33374,0.213875l5.472504,-24.861877l-7.227493,0.631874m-4.738754,13.592247c-1.338745,3.948753 -4.328751,6.559128 -6.669998,5.816002c-2.341248,-0.724625 -3.177505,-4.534248 -1.821259,-8.491753c1.337509,-3.957993 4.347504,-6.55912 6.669998,-5.815872c2.341263,0.724625 3.186264,4.533623 1.821259,8.491623"/>
</g>
</svg>

+ 73
- 0
src/assets/images/icons/visacard.svg Просмотреть файл

@@ -0,0 +1,73 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlnsDc="http://purl.org/dc/elements/1.1/"
xmlnsCc="http://creativecommons.org/ns#"
xmlnsRdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlnsSvg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
id="svg10306"
viewBox="0 0 500.00001 162.81594"
height="162.81593"
width="500">
<defs
id="defs10308">
<clipPath
id="clipPath10271"
clipPathUnits="userSpaceOnUse">
<path
id="path10273"
d="m 413.742,90.435 c -0.057,-4.494 4.005,-7.002 7.065,-8.493 3.144,-1.53 4.2,-2.511 4.188,-3.879 -0.024,-2.094 -2.508,-3.018 -4.833,-3.054 -4.056,-0.063 -6.414,1.095 -8.289,1.971 l -1.461,-6.837 c 1.881,-0.867 5.364,-1.623 8.976,-1.656 8.478,0 14.025,4.185 14.055,10.674 0.033,8.235 -11.391,8.691 -11.313,12.372 0.027,1.116 1.092,2.307 3.426,2.61 1.155,0.153 4.344,0.27 7.959,-1.395 l 1.419,6.615 c -1.944,0.708 -4.443,1.386 -7.554,1.386 -7.98,0 -13.593,-4.242 -13.638,-10.314 m 34.827,9.744 c -1.548,0 -2.853,-0.903 -3.435,-2.289 l -12.111,-28.917 8.472,0 1.686,4.659 10.353,0 0.978,-4.659 7.467,0 -6.516,31.206 -6.894,0 m 1.185,-8.43 2.445,-11.718 -6.696,0 4.251,11.718 m -46.284,8.43 -6.678,-31.206 8.073,0 6.675,31.206 -8.07,0 m -11.943,0 -8.403,-21.24 -3.399,18.06 c -0.399,2.016 -1.974,3.18 -3.723,3.18 l -13.737,0 -0.192,-0.906 c 2.82,-0.612 6.024,-1.599 7.965,-2.655 1.188,-0.645 1.527,-1.209 1.917,-2.742 l 6.438,-24.903 8.532,0 13.08,31.206 -8.478,0" />
</clipPath>
<linearGradient
id="linearGradient10277"
spreadMethod="pad"
gradientTransform="matrix(84.1995,31.0088,31.0088,-84.1995,19.512,-27.4192)"
gradientUnits="userSpaceOnUse"
y2="0"
x2="1"
y1="0"
x1="0">
<stop
id="stop10279"
offset="0"
style="stop-opacity:1;stop-color:#222357" />
<stop
id="stop10281"
offset="1"
style="stop-opacity:1;stop-color:#254aa5" />
</linearGradient>
</defs>
<metadata
id="metadata10311">
<rdfRDF>
<ccWork
rdfAbout="">
<dcFormat>image/svg+xml</dcFormat>
<dcType
rdfResource="http://purl.org/dc/dcmitype/StillImage" />
<dcTitle></dcTitle>
</ccWork>
</rdfRDF>
</metadata>
<g
transform="translate(-333.70157,-536.42431)"
id="layer1">
<g
id="g10267"
transform="matrix(4.9846856,0,0,-4.9846856,-1470.1185,1039.6264)">
<g
clip-path="url(#clipPath10271)"
id="g10269">
<g
transform="translate(351.611,96.896)"
id="g10275">
<path
id="path10283"
style="fill:url(#linearGradient10277);fill-opacity:1;fill-rule:nonzero;stroke:none"
d="M 0,0 98.437,36.252 120.831,-24.557 22.395,-60.809" />
</g>
</g>
</g>
</g>
</svg>

+ 37
- 40
src/pages/Payment/Card/index.js Просмотреть файл

@@ -28,21 +28,20 @@ const BackgroundHead = {
}


const Index = ({ isPopUp, url }) => {
const Index = () => {

const navigate = useNavigate()
const location = useLocation();

const [paymentData, setPaymentData] = React.useState({});
const [onReady, setOnReady] = React.useState(false);
const [paymentid, setPaymentid] = React.useState("");
const [fpsmerchanttimeoutdatetime, setFpsmerchanttimeoutdatetime] = React.useState("");
const [redirecturl, setRedirectUrl] = React.useState("");
// const [paymentstatuscode, setPaymentstatuscode] = React.useState("");
// const [fpsqrcodeurl, setFpsqrcodeurl] = React.useState("");
// const pasgPath = 'https://fps.payapps.hkicl.com.hk'; //PRD
// const pasgPath = 'https://sim.fps.payapps.hkicl.com.hk'; //Testing
// const loadPaymentUrl = "/api/payment/web/";
const loadPaymentUrl = "/api/payment/web/";
const cancelPaymentUrl = "/api/payment/cancelpayment";
// const paymentStatusApi = "/api/payment/status/";
// const payloadUrl = "/api/payment/wallet/fps/enquiryfpspayload/";
@@ -53,7 +52,6 @@ const Index = ({ isPopUp, url }) => {
const [time, setTime] = React.useState(0);

React.useEffect(() => {
setFpsqrcodeimgbase64("")
if (location.state != undefined) {
setPaymentData(location.state)
}
@@ -74,43 +72,42 @@ const Index = ({ isPopUp, url }) => {
const timeoutdatetime = "2023-10-26T09:04:30Z[UTC]"
const convertedDateString = timeoutdatetime.replace("[UTC]", "");
setFpsmerchanttimeoutdatetime(convertedDateString)
setPaymentid("C202310268000681")

// HttpUtils.post({
// url: paymentPath+loadPaymentUrl+paymentData.type,
// params:{
// "transactionid": paymentData.transactionid,
// "apprefid:": paymentData.transactionid,
// "webtoken": paymentData.webtoken,
// "paymentmethod":paymentData.paymentMethod,
// "order": {
// "totalamount":paymentData.amount,
// "currency":"HKD",
// "orderdetail":
// [
// {
// "itemid": "1",
// "qty":"1",
// "unitprice":paymentData.amount,
// "amount":paymentData.amount
// },
// ]
// },
// // "locale":"<locale>",
// // "eserviceid":"<eserviceid>",
// "returnurl": window.location.hostname+"/payment/success"
// },
// onSuccess: function(responseData){
// /*
// {
// "transactionid": "<transactionid>",
// "redirecturl": "<redirecturl>"
// }
// */
// setRedirectUrl(responseData.redirecturl);
//
// }
// });
HttpUtils.post({
url: paymentPath+loadPaymentUrl+paymentData.type,
params:{
"transactionid": paymentData.transactionid,
"apprefid:": paymentData.transactionid,
"webtoken": paymentData.webtoken,
"paymentmethod":paymentData.paymentMethod,
"order": {
"totalamount":paymentData.amount,
"currency":"HKD",
"orderdetail":
[
{
"itemid": "1",
"qty":"1",
"unitprice":paymentData.amount,
"amount":paymentData.amount
},
]
},
// "locale":"<locale>",
// "eserviceid":"<eserviceid>",
"returnurl": window.location.hostname+"/payment/success"
},
onSuccess: function(responseData){
/*
{
"transactionid": "<transactionid>",
"redirecturl": "<redirecturl>"
}
*/
setRedirectUrl(responseData.redirecturl);
}
});
}

const getPaymentStatus = () => {


+ 96
- 84
src/pages/Payment/MultiPaymentWindow.js Просмотреть файл

@@ -19,6 +19,13 @@ import {
import { useFormik, FormikProvider } from 'formik';
import * as yup from 'yup';

import FpsIcon from "assets/images/icons/fps.svg";
import VisaIcon from "assets/images/icons/visacard.svg";
import MasterIcon from "assets/images/icons/mastercard.svg";
import JcbIcon from "assets/images/icons/jcb.svg";
import UnionPayIcon from "assets/images/icons/unionpay.svg";
import PpsIcon from "assets/images/icons/ppshk.svg";


const MultiPaymentWindow = (props) => {

@@ -30,114 +37,119 @@ const MultiPaymentWindow = (props) => {
console.log(paymentMethod)
}, [paymentMethod]);

const selectedPaymentMethodHandle = (method) => () =>{
const selectedPaymentMethodHandle = (method) => () => {
setPaymentMethod(method)
props.setSelectedPaymentMethod(method);
};

const confirmPaymentHandle = () => () =>{
const confirmPaymentHandle = () => () => {
props.setConfirmPayment(true);
};


useEffect(() => {
if(props.selectedPaymentMethod === ""){
if (props.selectedPaymentMethod === "") {
setPaymentMethod("")
}
setPaymentMethod
if(props.availableMethods.length > 0){
setContent(
<Grid container spacing={2} direction="column" justifyContent="space-between" alignItems="flex-start">
<Grid item xs={12} md={12}>
<Grid container >
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
交易參考編號:
</FormLabel>
</Grid>
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
{props.transactionData.transicationId}
</FormLabel>
</Grid>

//if(props.availableMethods.length > 0){
setContent(
<Grid container spacing={2} direction="column" justifyContent="space-between" alignItems="flex-start">
<Grid item xs={12} md={12}>
<Grid container >
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
交易參考編號:
</FormLabel>
</Grid>
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
{props.transactionData.transicationId}
</FormLabel>
</Grid>
</Grid>
<Grid item xs={12} md={12}>
<Grid container >
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
付款金額:
</FormLabel>
</Grid>
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
{"HK$ "+props.totalAmount}
</FormLabel>
</Grid>
</Grid>
<Grid item xs={12} md={12}>
<Grid container >
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
付款金額:
</FormLabel>
</Grid>
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
{"HK$ " + props.totalAmount}
</FormLabel>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} md={12}>
<Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="center">
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
付款方式:
</FormLabel>
</Grid>
<Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("FPS")} disabled={props.fpsStatus.active === "N"}>
<img src={FpsIcon} width="80" height="80" alt="FPS"></img>
</Button>
</Grid>
<Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("Visa")} disabled={props.creditCardStatus.active === "N"}>
<img src={VisaIcon} width="80" height="80" alt="Visa"></img>
</Button>
</Grid>
<Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("Mastercard")} disabled={props.creditCardStatus.active === "N"}>
<img src={MasterIcon} width="80" height="80" alt="Mastercard"></img>
</Button>
</Grid>
<Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("UnionPay")} disabled={props.unionPayStatus.active === "N"}>
<img src={UnionPayIcon} width="80" height="80" alt="UnionPay"></img>
</Button>
</Grid>
<Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("JCB")} disabled={props.unionPayStatus.active === "N"}>
<img src={JcbIcon} width="80" height="80" alt="JCB"></img>
</Button>
</Grid>
<Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("PPS")} disabled={props.ppsStatus.active === "N"}>
<img src={PpsIcon} width="80" height="30" alt="PPS"></img>
</Button>
</Grid>
</Grid>
</Grid>
{paymentMethod != "" ?
<Grid item xs={12} md={12}>
<Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="center">
<Grid container direction="row" justifyContent="flex-start" alignItems="center">
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
付款方式:
已選擇付款方式:
</FormLabel>
</Grid>
<Grid item>
<Button variant="contained" color="success" onClick={selectedPaymentMethodHandle("FPS")} disabled={props.fpsStatus.active === "N"}>
FPS
</Button>
</Grid>
<Grid item>
<Button variant="contained" color="success" onClick={selectedPaymentMethodHandle("Visa")} disabled={props.creditCardStatus.active === "N"}>
Visa
</Button>
</Grid>
<Grid item>
<Button variant="contained" color="success" onClick={selectedPaymentMethodHandle("Mastercard")} disabled={props.creditCardStatus.active === "N"}>
Mastercard
</Button>
</Grid>
<Grid item>
<Button variant="contained" color="success" onClick={selectedPaymentMethodHandle("UnionPay")} disabled={props.unionPayStatus.active === "N"}>
UnionPay
</Button>
</Grid>
<Grid item>
<Button variant="contained" color="success" onClick={selectedPaymentMethodHandle("PPS")} disabled={props.ppsStatus.active === "N"}>
PPS
</Button>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
{paymentMethod}
</FormLabel>
</Grid>
</Grid>
</Grid>
{paymentMethod !=""?
<Grid item xs={12} md={12}>
<Grid container direction="row" justifyContent="flex-start" alignItems="center">
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
已選擇付款方式:
</FormLabel>
</Grid>
<Grid item>
<FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
{paymentMethod}
</FormLabel>
</Grid>
</Grid>
</Grid>
: null}
</Grid>
)
}else{
setContent(
<Grid container direction="row" justifyContent="center" alignItems="center">
<FormLabel sx={{ fontSize: "20px", color: "#000000", textAlign: "center" }}>
付款功能現在不可用。
</FormLabel>
</Grid>
)
}
}, [props.open,paymentMethod]);
</Grid>
)
// }else{
// setContent(
// <Grid container direction="row" justifyContent="center" alignItems="center">
// <FormLabel sx={{ fontSize: "20px", color: "#000000", textAlign: "center" }}>
// 付款功能現在不可用。
// </FormLabel>
// </Grid>
// )
// }
}, [props.open, paymentMethod]);

const formik = useFormik({
initialValues: ({
@@ -159,7 +171,7 @@ const MultiPaymentWindow = (props) => {
<Grid item>
<Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
<Typography variant="h4">
{windowTitle}
{windowTitle}
</Typography>
</Stack>
</Grid>


+ 2
- 2
src/pages/Payment/index.js Просмотреть файл

@@ -26,12 +26,12 @@ const BackgroundHead = {
}

const Index = () => {
// const getAvailablePaymentUrl = "/payment/api/payment/availability";
const getAvailablePaymentUrl = "/payment/api/payment/availability";
const getTransactionIdUrl = "/payment/api/payment/transaction";
const navigate = useNavigate()

// const local = {en:"en-us", zh:"zh-hk", cn:"zh-cn"};
// const preferpaymentmethods = ['visa','mastercard','pps','creditcard','fps'];
const preferpaymentmethods = ['visa','mastercard','pps','creditcard','fps'];
const [totalAmount,setTotalAmount] = useState(0);
const id =1;


+ 6
- 0
src/themes/palette.js Просмотреть файл

@@ -53,6 +53,12 @@ const Palette = (mode) => {
paper: paletteColor.grey[0],
default: paletteColor.grey.A50
},
white: {
main: '#fff',
light: '#fff',
dark: '#eee',
contrastText: '#222',
},
ochre: {
main: '#E3D026',
light: '#E9DB5D',


Загрузка…
Отмена
Сохранить