{"id":19690906,"url":"https://github.com/lyra/embedded-form-glue","last_synced_at":"2025-04-29T08:36:00.090Z","repository":{"id":34240851,"uuid":"169214972","full_name":"lyra/embedded-form-glue","owner":"lyra","description":"Embedded Form Glue JavaScript library","archived":false,"fork":false,"pushed_at":"2024-03-27T07:55:08.000Z","size":14057,"stargazers_count":16,"open_issues_count":20,"forks_count":19,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-03-27T08:54:06.647Z","etag":null,"topics":["angular","ionic","javascript","javascript-client","nodejs","react","typescript","vuejs"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lyra.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2019-02-05T09:16:14.000Z","updated_at":"2024-04-15T09:32:45.207Z","dependencies_parsed_at":"2024-03-27T08:48:23.849Z","dependency_job_id":"2f5d3476-af7b-4f09-b0fb-e37060324840","html_url":"https://github.com/lyra/embedded-form-glue","commit_stats":{"total_commits":166,"total_committers":11,"mean_commits":"15.090909090909092","dds":0.6807228915662651,"last_synced_commit":"28a6c8368ab4f0115d151ceb03b7c56b3ef85794"},"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lyra%2Fembedded-form-glue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lyra%2Fembedded-form-glue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lyra%2Fembedded-form-glue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lyra%2Fembedded-form-glue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lyra","download_url":"https://codeload.github.com/lyra/embedded-form-glue/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251465414,"owners_count":21593878,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","ionic","javascript","javascript-client","nodejs","react","typescript","vuejs"],"created_at":"2024-11-11T19:07:16.237Z","updated_at":"2025-04-29T08:35:58.612Z","avatar_url":"https://github.com/lyra.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- BACK TO TOP LINK --\u003e\n\n\u003ca id=\"readme-top\"\u003e\u003c/a\u003e\n\n\u003c!-- PROJECT SHIELDS --\u003e\n\u003cdiv align=\"center\"\u003e\n\n[![Build][build-shield]][build-url]\n[![NPM][npm-shield]][npm-url]\n[![Contributors][contributors-shield]][contributors-url]\n[![Quality][quality-shield]][quality-url]\n[![Downloads][downloads-shield]][downloads-url]\n[![MIT License][license-shield]][license-url]\n\n\u003c/div\u003e\n\n\u003c!-- PROJECT LOGO --\u003e\n\u003cbr /\u003e\n\u003cdiv align=\"center\" style=\"margin-bottom:30px;\"\u003e\n  \u003ca href=\"https://github.com/lyra/embedded-form-glue\"\u003e\n    \u003cimg style=\"margin-bottom:15px;box-shadow:rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;\" src=\"assets/lyra.svg\" alt=\"Logo\"\u003e\n  \u003c/a\u003e\n\n  \u003ch3 align=\"center\"\u003eEmbedded Form Glue - JavaScript Library\u003c/h3\u003e\n\n  \u003cp align=\"center\"\u003e\n    Integrate Lyra payment form into any web application.\n    \u003cbr /\u003e\n    \u003ca href=\"https://docs.lyra.com/en/rest/V4.0/javascript/\"\u003e\u003cstrong\u003eExplore the docs »\u003c/strong\u003e\u003c/a\u003e\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"https://github.com/lyra/embedded-form-glue#getting-started\"\u003eQuick Start\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/lyra/embedded-form-glue/issues\"\u003eReport Bug\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/lyra/embedded-form-glue/issues\"\u003eRequest Feature\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n![SmartForm](./assets/smartform.png)\n\n## About the project\n\nAny payment form must comply with PCI-DSS requirements. A classical integration will be displayed\non the banks page using a redirection. In that case, PCI-DSS requirements are done by your bank.\n\nBy using this package Lyra allows to integrate a payment form using standard HTML elements on your\nwebsite. This library will load the [Javacript library][doc-home] from Lyra servers transforming\nautomatically each sensitive field (pan, security code, ...) into an IFrame, allowing to comply with\nall regulations.\n\nThe **embedded-form-glue** library provides a set of utilities to easily integrate the Payment\nform into any we application made with Javascript frameworks like React, Vue, Angular, Svelte,\nIonic, etc.\n\n## Getting Started\n\n### Prerequisites\n\nInstall the current [node.js LTS version](https://nodejs.org/en/).\n\n### Installation\n\nTo start using the package, just install it executing the following command:\n\n```bash\nnpm install --save @lyracom/embedded-form-glue\n```\n\n## Usage\n\n### Theme\n\nFirst, define the theme files to load in the head section of your HTML page:\n\n```html\n\u003chead\u003e\n  (...)\n  \u003clink\n    rel=\"stylesheet\"\n    href=\"~~CHANGE_ME_ENDPOINT~~/static/js/krypton-client/V4.0/ext/neon-reset.min.css\"\n  /\u003e\n  \u003cscript src=\"~~CHANGE_ME_ENDPOINT~~/static/js/krypton-client/V4.0/ext/neon.js\"\u003e\u003c/script\u003e\n  (...)\n\u003c/head\u003e\n```\n\n\u003e **Note**\n\u003e\n\u003e Replace **`~~CHANGE_ME_ENDPOINT~~`** with your configuration endpoint.\n\nFor more information about theming, please see [Lyra theming documentation][doc-themes]\n\n### DOM location\n\nAfter that, define the location where the payment form will be generated in your HTML page:\n\n```html\n\u003cdiv id=\"myPaymentForm\"\u003e\n  \u003cdiv class=\"kr-smart-form\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n\u003e **Note**\n\u003e\n\u003e Specifify the element **kr-smart-form** inside the target location to load the Smart Form (any\n\u003e kind of payment method).\n\n### Javascript\n\nImport the library in your javascript file or component with:\n\n```javascript\nimport KRGlue from '@lyracom/embedded-form-glue'\n```\n\nAnd finally, you can generate the payment form with the following code:\n\n```javascript\n/* Integration public key */\nconst publicKey = '~~CHANGE_ME_PUBLIC_KEY~~'\n/* Endpoint. Base domain with its protocol (e.g. https://domain.name, do not include any path after the domain) */\nconst endPoint = '~~CHANGE_ME_ENDPOINT~~'\n\n/* Load the remote library and get the KR object */\nconst { KR } = await KRGlue.loadLibrary(endPoint, publicKey)\n/* Setting configuration */\nawait KR.setFormConfig({ 'kr-language': 'en-US' })\n/* Render the payment form into a given DOM selector */\nawait KR.renderElements('#myPaymentForm')\n```\n\n\u003e **Note**\n\u003e\n\u003e Replace **`~~CHANGE_ME_PUBLIC_KEY~~`** with your configuration public key.\n\u003e\n\u003e Replace **`~~CHANGE_ME_ENDPOINT~~`** with your configuration endpoint.\n\n\u003e **Warning**\n\u003e\n\u003e KR methods use Promises. You should always use the **await** keyword or **then method** when\n\u003e calling them. Please see [Javascript Promises][js-promises] and [Async Functions][js-async-await]\n\u003e for more information.\n\n## First transaction\n\nOnce the payment form is set up, you will see the skeleton animation. This is because the form is\nusing the default demo token. To make a real transaction, you need to get a real **formToken**.\n\nTo get a proper test **formToken**, make a request to the Charge/CreatePayment web service. To not\nexpose your credentials, it is mandatory to do that from a server. Please see the\n[NodeJS server example](examples/server/README.md), or visit the following links for more\ninformation:\n\n- [Embedded form quick start][doc-quick-start]\n- [embedded form integration guide][doc-integration-guide]\n- [Payment REST API reference][doc-api-reference]\n\nOnce you have a **formToken**, you can set it in the payment form with the following code:\n\n```javascript\n// Use the loadLibrary to set the form token\nconst { KR } = await KRGlue.loadLibrary(\n  endPoint,\n  publicKey,\n  '~~CHANGE_ME_FORM_TOKEN~~'\n)\n\n// Or set the form token once the library is loaded\nconst { KR } = await KRGlue.loadLibrary(endPoint, publicKey)\nawait KR.setFormConfig({ formToken: '~~CHANGE_ME_FORM_TOKEN~~' })\n```\n\n\u003e **Note**\n\u003e\n\u003e Replace **`~~CHANGE_ME_FORM_TOKEN~~`** with your form token.\n\nAfter setting the real **formToken**, the payment form will be displayed with the available payment\nmethods.\n\n## Methods\n\n### loadLibrary\n\nUse `loadLibrary` method to load the Lyra Javascript library. The method returns a `Promise` with\nthe `KR` object.\n\n```javascript\nconst { KR } = await KRGlue.loadLibrary(endPoint, publicKey)\n```\n\n## KR object\n\nThe **KR** object is the main object of the library. It is used to manipulate the payment form.\n\nThe available methods and callbacks are described in the following sections.\n\n- [KR methods](./docs/kr_methods.md)\n- [KR callbacks](./docs/kr_callbacks.md)\n\n\u003e **Note**\n\u003e\n\u003e See Lyra [Javascript library reference][doc-reference] for the complete reference guide.\n\n## JavaScript frameworks integration\n\nFind integration examples for some of the main javascript frameworks in the following links:\n\n| **Framework** | **Description**                                         |\n| ------------- | ------------------------------------------------------- |\n| vue.js        | [Vue options API example](examples/vue/options)         |\n| react.js      | [React example](examples/react)                         |\n| angular       | [Angular example](examples/angular)                     |\n| svelte        | [Svelte example](examples/svelte)                       |\n| next.js       | [Next.js example](examples/next)                        |\n| ionic         | [Ionic example](examples/ionic)                         |\n| vue.js        | [Vue composition API example](examples/vue/composition) |\n| ember.js      | [Ember.js example](examples/ember)                      |\n\n## Customization\n\nThe payment form can be customized in many ways. Some of them in the following examples:\n\n- [Use a custom field order](./docs/customization.md#use-a-custom-field-order)\n- [Add additional fields](./docs/customization.md#add-additional-fields)\n- [Use a different HTML structure](./docs/customization.md#use-a-different-html-structure)\n\nAny of these customizations can be done using the same method **KR.renderElements()**.\n\n\u003e **Note**\n\u003e\n\u003e Please see the [Field Customization][doc-customization] section of the documentation for more\n\u003e information.\n\n\u003c!-- CONTRIBUTING --\u003e\n\n## Contributing\n\nContributions are welcome and pull requests will be reviewed and taken into account.\n\n### Installation\n\nTo compile the library please run the following commands:\n\n```bash\nnpm install\nnpm run build\n```\n\n### Testing\n\nTo run the e2e tests, first build the examples with:\n\n```bash\nnpm run examples:build\nnpm run examples:prepare\n```\n\nOn a separated instance, initialize the servers with:\n\n```bash\nnpm run examples:serve\n```\n\nExecute the tests with the command:\n\n```bash\nnpm run test:e2e\n```\n\n\u003c!-- LICENSE --\u003e\n\n## License\n\nDistributed under the MIT License. See the [LICENSE file](./LICENCE.txt) for more information.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- MARKDOWN LINKS \u0026 IMAGES --\u003e\n\n[build-shield]: https://img.shields.io/circleci/build/github/lyra/embedded-form-glue?style=for-the-badge\u0026logo=github\n[build-url]: https://circleci.com/gh/lyra/embedded-form-glue\n[npm-shield]: https://img.shields.io/npm/v/@lyracom/embedded-form-glue?style=for-the-badge\u0026logo=npm\n[npm-url]: https://www.npmjs.com/package/@lyracom/embedded-form-glue\n[contributors-shield]: https://img.shields.io/github/contributors/lyra/embedded-form-glue.svg?style=for-the-badge\u0026logo=github\n[contributors-url]: https://github.com/othneildrew/lyra/embedded-form-glue/graphs/contributors\n[quality-shield]: https://img.shields.io/npms-io/quality-score/@lyracom/embedded-form-glue?style=for-the-badge\u0026logo=npm\n[quality-url]: https://npms.io/search?q=%40lyracom%2Fembedded-form-glue\n[downloads-shield]: https://img.shields.io/npm/dm/@lyracom/embedded-form-glue?style=for-the-badge\u0026logo=npm\n[downloads-url]: https://www.npmjs.com/package/@lyracom/embedded-form-glue\n[license-shield]: https://img.shields.io/github/license/lyra/embedded-form-glue.svg?style=for-the-badge\u0026logo=github\n[license-url]: https://github.com/lyra/embedded-form-glue/blob/master/LICENSE.txt\n\n\u003c!-- DOC LINKS --\u003e\n\n[doc-home]: https://docs.lyra.com/en/rest/V4.0/javascript/\n[doc-quick-start]: https://docs.lyra.com/en/rest/V4.0/javascript/quick_start_js.html\n[doc-reference]: https://docs.lyra.com/en/rest/V4.0/javascript/features/reference.html\n[doc-themes]: https://docs.lyra.com/en/rest/V4.0/javascript/features/themes.html\n[doc-integration-guide]: https://docs.lyra.com/en/rest/V4.0/javascript/guide/start.html\n[doc-api-reference]: https://docs.lyra.com/en/rest/V4.0/api/reference.html\n[doc-customization]: https://docs.lyra.com/en/rest/V4.0/javascript/features/custom_fields.html\n[js-promises]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises\n[js-async-await]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flyra%2Fembedded-form-glue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flyra%2Fembedded-form-glue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flyra%2Fembedded-form-glue/lists"}