npm package: @movmo/express-checkout-button
Description: React component plugin for embedding Movmo Express Checkout on airline websites.
Author: Movmo
Latest version: 1.2.0

# Movmo Express Checkout Button

A React component for integrating Movmo's Express Checkout functionality into airline websites.

## Installation

```bash
npm install @movmo/express-checkout-button
```

or

```bash
yarn add @movmo/express-checkout-button
```

## Usage

### Basic Example with Pre-saved Offer

If you have already saved the flight offer to Movmo's system and have an offer ID:

```jsx
import React from 'react';
import { MovmoCheckoutButton } from '@movmo/express-checkout-button';
// Important: Import the styles
import '@movmo/express-checkout-button/dist/index.css';

function MyBookingPage() {
  return (
    <div className="booking-page">
      <h1>Complete your booking</h1>

      <MovmoCheckoutButton
        iataCode="PR"
        apiKey="your-movmo-api-key"
        providerID="amadeus"
        flightOfferID="offer-123-456-789"
        isProd={false} // Set to true for production environment
      />
    </div>
  );
}

export default MyBookingPage;
```

### Example with Raw Flight Offer

If you have the raw flight offer data that needs to be saved when the button is clicked:

```jsx
import React from 'react';
import { MovmoCheckoutButton } from '@movmo/express-checkout-button';
// Important: Import the styles
import '@movmo/express-checkout-button/dist/index.css';

function MyBookingPage() {
  // Flight offer data retrieved from your booking system (Amadeus, Sabre, etc.)
  const flightOffer = {
    // Your raw flight offer data from the provider
  };

  return (
    <div className="booking-page">
      <h1>Complete your booking</h1>

      <MovmoCheckoutButton
        iataCode="AA"
        apiKey="your-movmo-api-key"
        providerID="sabre"
        flightOffer={flightOffer}
        isProd={false} // Set to true for production environment
      />
    </div>
  );
}

export default MyBookingPage;
```

## Props

| Prop            | Type    | Required | Description                                                                                                                                     |
| --------------- | ------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| `iataCode`      | string  | Yes      | The IATA code for the airline                                                                                                                   |
| `apiKey`        | string  | Yes      | Your Movmo API key                                                                                                                              |
| `providerID`    | string  | Yes      | The provider identifier (e.g., "amadeus", "sabre", "duffel")                                                                                    |
| `flightOffer`   | object  | No\*     | The raw flight offer data object from the provider. Required if `flightOfferID` is not provided                                                 |
| `flightOfferID` | string  | No\*     | The ID of a pre-saved flight offer. Required if `flightOffer` is not provided                                                                   |
| `isProd`        | boolean | No       | Whether to use production endpoints (default: false). When true, uses production API and flights URLs; when false, uses e2e (testing) endpoints |

\*Note: Either `flightOffer` or `flightOfferID` must be provided, but not both.

## Provider Options

The `providerID` prop accepts provider identifiers as strings. Common providers include:

```jsx
// Common provider IDs
'amadeus'; // For Amadeus flight data
'sabre'; // For Sabre flight data
'duffel'; // For Duffel flight data
// ... and other supported providers
```

## Environment Configuration

The `isProd` prop controls which Movmo endpoints are used:

- When `isProd={false}` (default):

  - API endpoint: `https://e2e.api.movmo.io`
  - Flights UI: `https://flights.e2e.movmo.io`

- When `isProd={true}`:
  - API endpoint: `https://api.movmo.io`
  - Flights UI: `https://flights.movmo.io`

## CSS Integration

You must import the component's CSS for proper styling:

```jsx
// Import the styles
import '@movmo/express-checkout-button/dist/index.css';
```

## Development

### Running Storybook

To run the component in a local development environment with interactive documentation:

```bash
# Install dependencies
npm install

# Start Storybook
npm run storybook
```

This will launch Storybook at [http://localhost:6006](http://localhost:6006) where you can explore and interact with the component.

### Building the Component

```bash
npm run build
```

### Storybook Examples

The Storybook includes several examples:

1. **With Pre-saved Offer ID**: Example using a pre-saved flight offer ID
2. **With Raw Flight Offer**: Example with raw Amadeus flight offer data that will be saved on button click
3. **Production Environment**: Example configured for production environment
4. **Minimal With Offer ID**: Minimal configuration example with just the required props

## License

MIT