New Component: Credit Card - Githubissues

primefaces-extensions / primefaces-extensions.github.com

Organization repo, only for homepage, wiki and issue tracker

https://primefaces-extensions.github.io/

68 stars 22 forks source link

New Component: Credit Card #711

Closed marcelocaser closed 4 years ago

marcelocaser commented 5 years ago

I suggest writing a credit card component as in the example below: https://github.com/amarofashion/react-credit-cards

melloware commented 5 years ago

That is a very nice component. Too bad that one in particular is specifically for React. We need to find a raw JavaScript or Jquery based one.

marcelocaser commented 5 years ago

I found some in: https://www.learningjquery.com/2016/03/10-jquery-credit-card-form-plugins In particular these: https://github.com/jessepollak/card http://kenkeiter.com/skeuocard/ https://github.com/wangjohn/creditly

melloware commented 5 years ago

I like the look of https://github.com/jessepollak/card but it concerns me he is not really accepting PR's anymore and has open PR's. But that one of the 3 looks like the most recently maintained.

melloware commented 4 years ago

Working on this...

<h:form id="frmMain">
    <p:panelGrid id="pnlCreditCard" columns="4">
        <f:facet name="header">
            <pe:creditCard id="creditCard" />
        </f:facet>
        <p:inputText id="txtNumber" placeholder="Card number" pt:name="number" />
        <p:inputText id="txtName" placeholder="Full name" pt:name="name" />
        <p:inputText id="txtExpiry" placeholder="MM/YY" pt:name="expiry" />
        <p:inputText id="txtCvc" placeholder="CVC" pt:name="cvc" />
    </p:panelGrid>
</h:form>

marcelocaser commented 4 years ago

Wow! a great job @melloware! I can't wait to be able to test it!

melloware commented 4 years ago

@jepsar @aripddev please review the commit of this new component https://github.com/primefaces-extensions/core/commit/e2dc639feefb9ea3d82f4826465d82e663516661

Attached is a runnable test project to test the component: pfe-card.zip

The only disappointing thing is the library's heavy use of eval() prevents it from being used with primefaces.CSP.

melloware commented 4 years ago

Solved the CSP problem! Had to change webpack to build the JS without eval() statements. Now the component works with CSP.

marcelocaser commented 4 years ago

any date for the final version?

melloware commented 4 years ago

Probably 8.0.1 in the next 1-2 weeks. @aripddev is finishing up his FuzzySearch component

melloware commented 4 years ago

OK card is done and showcase example added.

melloware commented 4 years ago

8.0.1 is now in Maven Central if you want to give this component a shot @marcelocaser

melloware commented 4 years ago

Sorry make that 8.0.2. Found a bug

marcelocaser commented 4 years ago

thanks a lot @melloware

melloware commented 4 years ago

@marcelocaser make sure to read this thread: https://github.com/primefaces-extensions/primefaces-extensions.github.com/issues/790

marcelocaser commented 4 years ago

yes!! thanks!! great job!

mortadha-dev commented 2 years ago

Hello Guys , iam using Credit Card and i want to override the placeholderNumber how can i do that

melloware commented 2 years ago

Hello Guys , iam using Credit Card and i want to override the placeholderNumber how can i do that

There is a property placeholderNumber "Placeholder for the card number. Default '•••• •••• •••• ••••'". Is it not working?

mortadha-dev commented 2 years ago

Yeah , yeah sorry melloware for disturbing it is working, i just was making changes in another page and wait for the result Lol

melloware commented 2 years ago

No worries glad you got it working.

melloware commented 2 years ago

@mortadha-dev did you figure out your issue?

mortadha-dev commented 2 years ago

Yes resolved thank you

mortadha-dev commented 2 years ago

Hello Melloware i want to have list of credit cards in a carousel view but the color dissapear , can you please help me creditCard

`

    </h:form>`

jepsar commented 2 years ago

@mortadha-dev please create a new issue and attach a reproducer using https://github.com/primefaces/primefaces-test

melloware commented 2 years ago

Agreed with @jepsar and also our new Issues area is here: https://github.com/primefaces-extensions/primefaces-extensions/issues

mortadha-dev commented 2 years ago

Okay i will create a new issue