Movmo Express Checkout Button

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

Installation

npm install @movmo/express-checkout-button

or

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:

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:

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:

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

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

# Install dependencies
npm install

# Start Storybook
npm run storybook

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

Building the Component

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