Developer docs
/
FramePay
/
Get started
/
Install FramePay
Last updated
These docs are intended for a developer audience.Dismiss

Install FramePay

This topic describes how to install FramePay in your project using a package manager, or a CDN script.

The latest version of FramePay is served live from the Rebilly CDN. You can choose to include this script directly in your project or use a package manager load it.

Installation Methods

Using a package manager

For modern web applications, installing the @rebilly/framepay npm package offers more flexibility and features, including TypeScript support.

Steps

  1. Install the FramePay npm package:

    npm install @rebilly/framepay

  2. Load and initialize FramePay in your JavaScript or TypeScript project:

    import { loadFramepay } from '@rebilly/framepay';

try {
  const framepay = await loadFramepay();
  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);
}

For more information, see the @rebilly/framepay npm package.

Using a CDN script

This method is suitable for static websites or projects that do not use a package manager.

Steps

  1. Include the required styles and scripts in your HTML file:

    <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>

  2. Initialize FramePay in your JavaScript code:

    // When the script loads, FramePay is available as a global variable
document.addEventListener('DOMContentLoaded', function () {
  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');
  });
});

When using the CDN script, ensure your application code runs after the FramePay script has loaded. You can achieve this by either:

  • Placing your code at the end of the <body> tag
  • Using the defer attribute on the script tag
  • Wrapping your code in a DOMContentLoaded or load event listener
Previous page
Next page