open-index/open-npm huggingface dataset:
npm package: @rebilly/framepay
Description: A wrapper to load Rebilly's FramePay library and provide TypeScript types
Latest version: 5.93.1

# @rebilly/framepay

A lightweight wrapper to load Rebilly's [FramePay](https://www.rebilly.com/docs/dev-docs/framepay)
library and provide types.

## Why use @rebilly/framepay?

FramePay must be loaded from our CDN, by adding a script tag to your webpage, for example:

```html
<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:

- 🔄 Async script loading to ensure page rendering isn't blocked
- ⚡️ A Promise API to know when script loading is complete
- 🛠 TypeScript support out of the box

## Installation

```bash
npm install @rebilly/framepay
# or
yarn add @rebilly/framepay
```

## Usage

The package exports a `loadFramepay` function that loads the FramePay CDN script and CSS.
It returns a promise that resolves with the FramePay instance.

### Basic Usage

```typescript
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);
}
```

### TypeScript Support

This package includes TypeScript declarations for FramePay.

For example:

```typescript
import type { FramePay, CardElement } from '@rebilly/framepay';

const mountCard = (framepay: FramePay, elementId: string): CardElement => {
  return framepay.card.mount(elementId);
};
```

### Custom Script/Style URLs

You can optionally specify custom URLs for the FramePay script and stylesheet:

```typescript
const framepay = await loadFramepay({
  scriptLink: 'https://custom-domain.com/framepay.js',
  styleLink: 'https://custom-domain.com/framepay.css',
});
```

### Global Window Object

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:

```typescript
const framepay = await loadFramepay();

// After loading, you can access FramePay as a global variable:
window.Framepay.initialize({
  // ...
});
```
npm package: @rebilly/instruments
Description: <div align="center">   <img src="https://user-images.githubusercontent.com/1580169/129248437-0d0d5082-1fa5-48a5-b9ae-0b4c9ba1c526.png" alt="drawing" width="176"/>   <h1>Rebilly Instruments</h1>   <p>The last payment integration that you will ever need.</p
Author: Rebilly
Latest version: 16.95.1

<div align="center">
  <img src="https://user-images.githubusercontent.com/1580169/129248437-0d0d5082-1fa5-48a5-b9ae-0b4c9ba1c526.png" alt="drawing" width="176"/>
  <h1>Rebilly Instruments</h1>
  <p>The last payment integration that you will ever need.</p>
  <br>
</div>

<div align="center">
  <br>
  <img src="https://user-images.githubusercontent.com/13054039/134418583-e051a891-5559-4170-9364-b5f89a96082e.png" alt="rebilly instruments" width="600"/>
  <br>
  <br>
</div>

# Getting Started

## ⏳ Installation

Install Rebilly Instruments with this **Quickstart** command to add Rebilly instruments to your existing project:

- Use **yarn** to install (recommended). [Install yarn with these docs](https://yarnpkg.com/lang/en/docs/install/).

```bash
yarn add @rebilly/instruments
```

**or**

- Use npm/npx to install Rebilly Instruments.

```bash
pnpm install @rebilly/instruments
```

Enjoy 🎉

# 🛠️ Usage

```html
<div class="rebilly-instruments-summary"></div>
<div class="rebilly-instruments"></div>

<script type="text/javascript">
  import RebillyInstruments from '@rebilly/instruments';

  RebillyInstruments.mount({
    publishableKey: 'pk_sandbox_123',
    organizationId: 'org-123',
    websiteId: 'my-website-id',
    items: [
      {
        planId: 'my-plan-id',
        quantity: 1
      },
    ]
    // ...see documentation below for more options
  });
</script>
```

See documentation at [Rebilly developer docs](https://www.rebilly.com/docs/dev-docs/get-started-integrate-payments)
npm package: @rebilly/recomponents
Description: Official Rebilly front-end components library
Author: Rebilly SRL
Latest version: 1.40.0

<p align="center">
    <img alt="Recomponents" src="https://media.giphy.com/media/Up1Otz0EISNQcDGmlc/giphy.gif">
</p>

## Installation

Recomponents is compatible with both yarn and npm:

```bash
npm install @rebilly/recomponents --save
yarn add @rebilly/recomponents
```

## Usage

Recomponents can be imported directly via CDN (check [JSFiddle](https://jsfiddle.net/kjz0h3pb/)):

```html
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://unpkg.com/vue"></script>
        <script src="https://unpkg.com/@rebilly/recomponents/dist/recomponents.js"></script>
        <link rel="stylesheet" href="https://unpkg.com/@rebilly/recomponents/dist/recomponents.css">
    </head>
    <body>
        <recomponents-r-button>Click me</recomponents-r-button>
    </body>
</html>
```

Or bundled with webpack:

```html
<template>
    <main>
        <r-button>Click me</r-button>
    </main>
</template>

<script>
    import Vue from 'vue'
    import '@rebilly/recomponents/dist/recomponents.css'
    import Recomponents from '@rebilly/recomponents'

    Vue.use(Recomponents)

    export default {}
</script>
```

During installation you can specify some options that could ovverride default behaviour of some components.

<details>
  <summary>List of available options</summary>

  * `ErrorHandler` - [Handler](src/common/helpers/default-error-handler.js) to convert any server / client error into user-friendly message that can be displayed via RToast
  * `allowToastCloseButton` - Add ability to close all RToast messages by default
</details>

## Documentation

We prefer [Storybook](https://storybook.js.org/) to plain-old documentation. [Check it out](https://recomponents.rebilly.com/) to see all of our components on display, with a comprehensive description and the ability to tweak properties and slots.

## Building storybook
Building (will generate bundled version in ../../docs folder):

```bash
npm run build-storybook
yarn build-storybook
```

⚠️ If you encounter errors when building, it might be the node version(like v16) is too high, we recommend using [nvm](https://github.com/nvm-sh/nvm) to downgrade the node version to v14.

### Serving built storybook (from docs folder)

If you want to serve the built version you can install [http-server](https://www.npmjs.com/package/http-server):

```bash
    yarn global add http-server
    npm install http-server -g
```

and run: 
```bash
    yarn serve-built-storybook
    npm run serve-built-storybook
```
## Licence

Recomponents are open source and released under the MIT Licence.

Copyright © 2019 Rebilly
npm package: @rebilly/revel
Description: <p align="center">   <a href="https://revel.rebilly.dev/">     <img alt="Revel" width="300" src="https://user-images.githubusercontent.com/1580169/211651583-03750a4c-71d9-4b2f-9af8-16d48b790e06.png">   </a> </p>
Author: Rebilly
Latest version: 12.25.1

<p align="center">
  <a href="https://revel.rebilly.dev/">
    <img alt="Revel" width="300" src="https://user-images.githubusercontent.com/1580169/211651583-03750a4c-71d9-4b2f-9af8-16d48b790e06.png">
  </a>
</p>

# Revel

### Design and develop clean, elegant, and performant Rebilly experiences.

---

<p>
  <a href="https://revel.rebilly.dev/">
  View Documentation
  </a>
</p>

<p>
  <a href="https://www.npmjs.com/package/@rebilly/revel">
    <img alt="npm latest version" src="https://img.shields.io/npm/v/@rebilly/revel/latest.svg">
  </a>
  <a href="https://github.com/semantic-release/semantic-release">
    <img alt="semantic-release: conventional commits" src="https://img.shields.io/badge/semantic--release-conventional%20commits-e10079?logo=semantic-release">
  </a>
  <a href="https://github.com/Rebilly/revel/actions/workflows/release.yml">
    <img alt="Release status" src="https://github.com/Rebilly/revel/actions/workflows/release.yml/badge.svg">
  </a>
</p>

## About this repo

Revel is the design system used by designers and developers at Rebilly to build clean, elegant, and performant experiences for its merchants.

## Commands

### Install dependecies and start development

```
pnpm install && pnpm nx run revel:docs:dev
```

### Commands

| Command           | Description                                                         |
| ----------------- | ------------------------------------------------------------------- |
| `dev`             | Run the dev server for the component documentation. See `docs:dev`. |
| `docs:dev`        | Run the dev server for the component documentation.                 |
| `docs:build`      | Build component documentation as a static HTML site.                |
| `build`           | Build the library.                                                  |
| `build:watch`     | Build the library and rebuild on file changes.                      |
| `playground:dev`  | Run the playground dev server (see [Playground](#playground)).      |
| `lint:no-fix`     | Run eslint.                                                         |
| `lint`            | Run eslint and automatically fix issues.                            |
| `test:unit`       | Run the unit tests.                                                 |
| `test:unit:watch` | Run the unit tests on changed files, in watch mode.                 |

### Playground

Sometimes it is easier to test a complex configuration directly in a vue application, rather than through our vuepress documentation.

For this, we provide a playground server which can be run with:

```
pnpm nx run revel:playground:dev
```

Note: You must copy the playground component file
`/src/playground/Playground-copyme.vue` to `Playground.vue`.
npm package: @rebilly/risk-data-collector
Description: Microlibrary that collects browser data for risk assessment
Author: Rebilly
Latest version: 10.15.1

# risk-data-collector

[![npm version](https://badge.fury.io/js/@rebilly%2Frisk-data-collector.svg)](https://badge.fury.io/js/@rebilly%2Frisk-data-collector)

Collect browser data for risk assessment purposes.

## Description

`risk-data-collector` is a client side microlibrary which collects user data required for the risk assessment component of 3DS v2.

## Data collected

- colorDepth
- javaEnabled
- language
- screenHeight
- screenWidth
- timeZoneOffset
- deviceFingerprintHash
- kountFraudSessionId (optional)

## Usage

`risk-data-collector` is distributed in two ways:

### Via a CDN link

The library becomes available under the `RiskDataCollector` global namespace and can be used like so:

```html
<html>
  <head>
    <script src="https://cdn.rebilly.com/risk-data-collector/@latest/data-collector.js"></script>
  </head>

  <body>
    <script type="text/javascript">
      (async () => {
        const browserData = await RiskDataCollector.collectData();
        console.log(`browserData is: ${JSON.stringify(browserData)}`);
      })();
    </script>
  </body>
  <html></html>
</html>
```

> Note: You can replace `@latest` with `@<version>` (Example `@1.0.0`). To pin to a specific version.

### As an npm package

```bash
yarn add @rebilly/risk-data-collector

npm install @rebilly/risk-data-collector
```

Which can be imported and used like so:

```js
import { collectData } from '@rebilly/risk-data-collector';

(async () => {
  const browserData = await collectData();
  console.log(`browserData is: ${JSON.stringify(browserData)}`);
})();
```

## Kount

`risk-data-collector` works with [Kount](https://kount.com/) to collect `kountFraudSessionId`.

If you already have an account with Kount, you can use it with `risk-data-collector` by providing:

- `env` - `sandbox` or `production`, determines which Kount environment to use (defaults to `sandbox`)
- `kountAccountId` - your Kount account ID
- (optional) `kountSessionId` - 32 character session ID, omit to have Kount generate a session ID for you

Example:

```js
import { collectData } from '@rebilly/risk-data-collector';

(async () => {
  const env = 'production';
  const kountAccountId = '123456';
  const browserData = await collectData({ env, kountAccountId });
  console.log(`browserData is: ${JSON.stringify(browserData)}`);
})();
```
npm package: @rebilly/spinup-cli
Description: Rebilly Spinup CLI for generating websites based on Rebilly's templates
Latest version: 1.0.0

# @rebilly/spinup-cli

Rebilly's customer CLI wrapper of Gridsome to handle the automatic generation of websites. Based on a particular set of templates and components provided directly by Rebilly.


## Commands

The CLI can be accessed globally after being installed as `rebilly-spinup`.

### Create

To create a new project run `create`:
```bash
rebilly-spinup create my-portal billing-portal
```
The second argument specifies the target directory, while third argument specifies the website template. At this time only the `billing-portal` exists in its early stage.

### Developing and Building

After the project is created you can run additional commands from the target folder.

Run a local hot-reload server with `develop`:
```bash
rebilly-spinup develop
```

Build for distribution with `build`:
```bash
rebilly-spinup build
```

Run Gridsome's GraphQL explorer with `explore`:
```bash
rebilly-spinup explore
```
npm package: @rebilly/swagger-combine
Description: Opinionated tool to shallow-merge two or more swagger 2.0 specs into one
Author: Roman Hotsiy
Latest version: 1.2.0

# @rebilly/swagger-combine

Opinionated tool to shallow-merge two or more swagger 2.0 specs into one.

## Install

Using npm:

     npm install @rebilly/swagger-combine

or yarn:

    yarn add @rebilly/swagger-combine

## Usage

```js
const { combineSpecs } = require('@rebilly/swagger-combine');

const merged = combineSpecs([
  'https://rebilly.github.io/RebillyAPI/swagger.json',
  'https://rebilly.github.io/RebillyUserAPI/swagger.json',
  'https://rebilly.github.io/RebillyReportsAPI/swagger.json',
]);
```

## Usage as a CLI tool

Install globally:

    npm install -g @rebilly/swagger-combine

or

    yarn global add @rebilly/swagger-combine

or use [npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b)

```
swagger-combine <baseSpec> [specs...]

Positionals:
  baseSpec  Base spec URL                                               [string]
  specs     List of spec URLs to merge                                  [string]

Options:
  --help        Show help                                              [boolean]
  --version     Show version number                                    [boolean]
  --output, -o  Output filename, by default stdout will be used         [string]

Examples:
  [combine 3 specs]
    
    swagger-combine -o merged.json https://rebilly.github.io/RebillyAPI/swagger.json https://rebilly.github.io/RebillyUserAPI/swagger.json https://rebilly.github.io/RebillyReportsAPI/swagger.json
```