@rebilly/framepay
Advanced tools
A lightweight wrapper to load Rebilly's FramePay library and provide types.
FramePay must be loaded from our CDN, by adding a script tag to your webpage, for example:
<html>
<head>
<link href="https://framepay.rebilly.com/framepay.css" rel="stylesheet" />
<script src="https://framepay.rebilly.com/framepay.js"></script>
</head>
<body></body>
</html>
But this can be difficult to implement in a modern web application in a non-blocking way, and cannot provide types for typescript applications.
This library provides:
npm install @rebilly/framepay
# or
yarn add @rebilly/framepay
The package exports a loadFramepay function that loads the FramePay CDN script and CSS.
It returns a promise that resolves with the FramePay instance.
import { loadFramepay } from '@rebilly/framepay';
try {
const framepay = await loadFramepay();
// Use FramePay as normal.
// For complete examples, see: https://www.rebilly.com/docs/dev-docs/basic-setup
framepay.initialize({
publishableKey: 'your-publishable-key',
// Additional configuration parameters
});
framepay.on('error', function (error) {
console.error('FramePay error:', error);
});
framepay.on('ready', function () {
// Your page should have a DOM element with the id "card-element"
framepay.card.mount('#card-element');
});
} catch (error) {
console.error('Failed to load Framepay: ', error);
}
This package includes TypeScript declarations for FramePay.
For example:
import type { FramePay, CardElement } from '@rebilly/framepay';
const mountCard = (framepay: FramePay, elementId: string): CardElement => {
return framepay.card.mount(elementId);
};
You can optionally specify custom URLs for the FramePay script and stylesheet:
const framepay = await loadFramepay({
scriptLink: 'https://custom-domain.com/framepay.js',
styleLink: 'https://custom-domain.com/framepay.css',
});
When FramePay is loaded, it automatically adds itself to the global window object. This means you can also access FramePay directly through these global variables:
const framepay = await loadFramepay();
// After loading, you can access FramePay as a global variable:
window.Framepay.initialize({
// ...
});
FAQs
A wrapper to load Rebilly's FramePay library and provide TypeScript types
The npm package @rebilly/framepay receives a total of 648 weekly downloads. As such, @rebilly/framepay popularity was classified as not popular.
We found that @rebilly/framepay demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket Firewall Enterprise is now available with flexible deployment, configurable policies, and expanded language support.
Security News
Open source dashboard CNAPulse tracks CVE Numbering Authorities’ publishing activity, highlighting trends and transparency across the CVE ecosystem.
Product
Detect malware, unsafe data flows, and license issues in GitHub Actions with Socket’s new workflow scanning support.