Embedded Components Library Changelog
Learn about changes to component.js
- Added the ability to use special characters (‘á’, ‘Á’, ‘é’, ‘É’, ‘í’, ‘Í’, ‘ó’, ‘Ó’, ‘ú’, ‘Ú’, ‘ü’, ‘Ü’, ‘ñ’, ‘Ñ’) in the embedded components. The HTML element
<meta charset="UTF-8">must be included in the<head>element. Code examples in the docs have been updated to reflect this change. - Fixed a bug where the embedded components would not show a card network as “not allowed” even though the card network was set to
falsein the configuration.
We made enhancements to the embedded components to improve the tokenization process for some cards. Before, tokenization sometimes failed for cards if they weren’t being tokenized as part of a transaction. We’ve added two new keys to the tokenization request body: fallbackAuth and fallbackAuthAmount to run an authorization on cards while tokenizing them. See the configuration reference section of the embedded components docs for more details.
Evergreen library URL
In this release, we’ve transitioned to an evergreen library URL for production environments: https://embedded-component.payabli.com/component.js.
To give our partners time to migrate to the new evergreen library, Payabli will continue to support version 1.9.0 of the library (https://embedded.payabli.com/1.9.0/component.js) until March 31, 2025. However, we are no longer maintaining or adding enhancements to this version.
Read our reasons for going evergreen
Read our reasons for going evergreen
In the evolving landscape of web development, microfrontends have emerged as a powerful approach to building complex, scalable, and maintainable front-end applications. One of the key advantages of microfrontend architecture is its flexibility, particularly when it comes to versioning.
In traditional monolithic front-end architectures, versioning can be challenging, often leading to tightly-coupled systems that are difficult to update and maintain. This new architecture in which there is no hard versioning for the integrator allows our teams to unlock a range of benefits that enhance both development agility and overall system robustness. The new architecture offers these benefits:
Increased flexibility and autonomy
Microfrontends allow individual teams to develop, deploy, and update their components independently. Without hard versioning constraints, teams aren’t forced to synchronize their releases with others. This autonomy leads to faster development cycles, as each team can push updates without worrying about breaking changes in other parts of the application. The result is a more agile development process, where new features and bug fixes can be rolled out quickly and efficiently.
Seamless integration and deployment
When hard versioning is enforced, integrating different microfrontends often requires careful coordination, version management, and tedious backward compatibility checks. By removing hard versioning for the integrator, microfrontends can be deployed in a continuous delivery pipeline, making sure that the latest versions of each component are always available. This seamless integration reduces the complexity of deployments, allowing for a smoother and more reliable release process.
Enhanced user experience
With no hard versioning, microfrontends can be updated incrementally, leading to more frequent and smaller updates. This approach minimizes downtime and reduces the risk of introducing major issues during updates. For users, this translates into a consistently improving experience, as they receive enhancements and new features without the disruptions that often accompany larger, versioned releases.
Simplified maintenance and bug fixes
When issues arise in a versioned environment, rolling back changes or deploying hotfixes can become a cumbersome process, especially if dependencies between versions are complex. In a microfrontend architecture without hard versioning, bug fixes can be deployed directly to the affected component without needing to worry about maintaining strict version alignment across the entire system. This simplifies maintenance and also speeds up the resolution of issues, improving overall system stability.
Reduced technical debt
One of the long-term benefits of avoiding hard versioning is the reduction of technical debt. In a traditional setup, maintaining multiple versions can lead to a cluttered and hard-to-manage codebase. Microfrontends, by nature, promote modularity and encapsulation, and when combined with a no-hard-versioning approach, they help keep the codebase clean and maintainable. Developers can focus on improving individual components without the overhead of managing complex versioning schemes.
Other enhancements
- Added enhancements for the ExpressCheckout UI.
- Added better custom CSS handling for some components.
Enhancements
- Added enhanced sandbox support for testing embedded components. Now, when using an embedded component in the sandbox environment, you must add
data-testas a configuration variable to the script tag. For example:
<script src="https://embedded-component-sandbox.payabli.com/component.js" data-test></script>. This configuration variable shouldn’t be used with the production library. - Added support for alphanumeric account holder and cardholder names in embedded components.
- Added support for different ZIP code formats.
Bug fixes
- Fixed an issue that caused the ACH and card forms to disappear when a user clicks on certain areas of the form. The forms now display as expected.
- Fixed an issue with card expiration date validation.