New Component: CreditCard

Community Driven Extensions Project
Post Reply
Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

01 May 2020, 13:16

Credit Card will take any credit card form and make it the best part of the checkout process (without you changing anything). Everything is created with pure CSS, HTML, and Javascript - no images required.

Based on Card.js.

See: Showcase Example
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

di3gokanon89
Posts: 6
Joined: 14 Dec 2018, 05:14

03 Aug 2020, 03:13

Respect to this new component, I saw the example in the primefaces extension showcase.

But how can I develop the functionality to make sandbox or real paid from the backend with JSF, and not from the example as Github mention? Because there is only with Angular, React, JQuery (Frontend),etc...

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

03 Aug 2020, 13:47

I don't know what you are asking? Can you clarify your question?
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

di3gokanon89
Posts: 6
Joined: 14 Dec 2018, 05:14

03 Aug 2020, 15:52

Sure! I have the next code wiht JSF and Primefaces Extension in my app:

Code: Select all

		<p:panelGrid id="pnlCreditCard" columns="4" colum[img][img][/img][/img]nClasses="ui-g-12 ui-md-4,ui-g-12 ui-md-4,ui-g-12 ui-md-4,ui-g-12 ui-md-4" layout="grid" styleClass="ui-panelgrid-blank">
		        <f:facet name="header">
		            <pe:creditCard id="creditCard" labelMonthYear="MM/YY" placeholderExpiry="**/**" placeholderName="Kanon de Géminis"/>
		        </f:facet>
		        <p:inputText id="number" placeholder="Número de Tarjeta" value="#{compraController.number}" pt:name="number"/>
		        <p:inputText id="name" placeholder="Nombre Completo" value="#{compraController.name}" pt:name="name"/>
		        <p:inputText id="expiry" placeholder="MM/YY" value="#{compraController.expiry}" pt:name="expiry"/>
		        <p:inputText id="cvc" placeholder="CVC" value="#{compraController.cvc}" pt:name="cvc"/>
		    </p:panelGrid>
My code is work in front-end:

Image

But my question is...How can I validate or do a fake or real paid with that? I don't know if JSF can do that from the backend or with javascript?

Best regards!

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

03 Aug 2020, 15:55

Once you form submit the values of those 4 fields into the Java side of the app then you need to validate it or use a service like Paypal, or Stripe, etc . This component just gives your users a way to enter the data for submission but validation and processing belongs on the Java Server Side and that is up to you!
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

di3gokanon89
Posts: 6
Joined: 14 Dec 2018, 05:14

03 Aug 2020, 16:26

Oh I see! Ok, so i need to integrate PayPal in my app with a maven dependency or whatever by my side. Thank you @Melloware

Best Regards!

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

03 Aug 2020, 16:27

You got it. this component was just a nice visual way for collecting the data from your customers.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

Post Reply

Return to “Extensions”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests