A simple payment form will look like:
Any credit card payment form should comply with PCI-DSS requirements. A classical integration displays the payment form on the bank page using a redirection. In this case, PCI-DSS requirements are done by your bank.
If you want to integrate a payment form on your web-page and get it easier with PCI-DSS, you can use IFrames loaded from a PCI-DSS certified server.
Lyra provides a Javacript library that helps you to integrate a payment form using standard HTML components on your website. The library will transform automatically each sensitive field (pan, security code, ...) into an IFrame loaded from Lyra servers.
To make your life easier, we have created a glue library that helps you to include it into your build: the embedded-form-glue library.
The embedded-form-glue glue library helps you to deal with:
- helps you to manage configuration even if the library is not yet loaded
- preload payment form elements and display them quickly on slow network
- various helpers to add, display or remove the payment form
Add the following package to your library:
npm install --save @lyracom/embedded-form-glue # OR yarn global add @lyracom/embedded-form-glue
First you need to load the theme files in your HEAD section:
note: Replace [CHANGE_ME] with your credentials and end-points.
For more information about theming, take a look to Lyra theming documentation
Import the component:
import KRGlue from "@lyracom/embedded-form-glue";
note: Replace [CHANGE_ME] with your credentials and end-points. warning: You should always use promises chaining with KR method calls
your first transaction
The payment form is up and ready, you can try to make a transaction using a test card with the debug toolbar (at the bottom of the page).
If you try to pay, you will have the following error: CLIENT_998: Demo form, see the documentation. It's because the formToken you have defined using KR.setFormConfig is set to DEMO-TOKEN-TO-BE-REPLACED.
you have to create a formToken before displaying the payment form using Charge/CreatePayment web-service. For more information, please take a look to:
- KR.addForm([CSS class or id]) : Add a form into a div (insert HTML elements): return a promise with a formId
- KR.showForm(formId): display an hidden form
- KR.hideForm(formId): hide a visible form
- KR.removeForms(): Remove all existing forms and events
- KR.attachForm([CLASS OR ID]): Scan a DOM and attach the library to an existing DOM, return a formId
|vue.js||vue example using vue-cli|
|react.js||react example using create-react-app|
|next.js||react + nextjs example|
|angular||angular example using Angular CLI|
Cutomize your form
KR.addForm() adds a default form. If you want to customize your payment form with:
- different field order
- add an additional field
- update the HTML structure to your need
You can add your own HTML and attach it with KR.attachForm(). see framework examples for more details.
To compile the library just run the next command to install the needed vendors for compilation:
# With npm npm install # With yarn yarn install
Install the webpack library following the official documentation Webpack Library
And then run the compilation command with webpack:
npm run build
To run the e2e tests (testcafe), first initialize the static server and execute the tests after that.
npm run e2e-server npm run test