@movmo/express-checkout-button v1.0.1

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

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
  const flightOffer = {
    // Your flight offer data
  };
  
  return (
    <div className="booking-page">
      <h1>Complete your booking</h1>
      
      <MovmoCheckoutButton
        customerId="your-airline-id"
        apiKey="your-movmo-api-key"
        dataSource="amadeus" // Use string literal: "amadeus" or "sabre"
        flightOffer={flightOffer}
        isProd={false} // Set to true for production environment
      />
    </div>
  );
}

export default MyBookingPage;

Props

Data Source Options

The dataSource prop accepts the following string values:

// Available options
"amadeus" // For Amadeus flight data
"sabre"   // For Sabre flight data

Environment Configuration

The isProd prop controls which Movmo endpoints are used:

• When isProd={false} (default):

  • API endpoint: https://e2e.api.movmo.io
  • Booking UI: https://booking-e2e.app.movmo.io

• When isProd={true}:

  • API endpoint: https://api.movmo.io
  • Booking UI: https://booking.app.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. Default: Standard implementation of the checkout button
2. Development Environment: Example configured for development environment
3. Production Environment: Example configured for production environment
4. Custom-Styled Button: Example showing how to create a custom styled button

License

MIT