note: The library it not yet published. It will be publicly available the third week of may. If you want to test it before, please post an issue.
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# ORyarn global add @lyracom/embedded-form-glue
First you need to load the theme files in your HEAD section:
<!-- theme and plugins should be loaded in the HEAD section --><link rel="stylesheet"href=""><scriptsrc=""></script>
For more information about theming, take a look to Lyra theming documentation
Import the component:
import KRGlue from "@lyracom/embedded-form-glue";
const publicKey = '69876357:testpublickey_DEMOPUBLICKEY95me92597fd28tGD4r5';KRGlue /* Load the remote library *//* create a payment form */; /* show the payment form */
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|
|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
Testing with Selenium