Merchi Checkout

A customizable checkout step form component for Merchi e-commerce platform.

Table of Contents

• Installation
• Usage
• Features
• Props
  • Style Classes
  • State Props
  • State Modifiers
  • Function Props
  • Configuration Props
• Examples
• Contributing
• License

Installation

# Using npm
npm install merchi_checkout

# Using yarn
yarn add merchi_checkout

Usage

import { MerchiCheckout } from 'merchi_checkout';

function App() {
  return (
    <MerchiCheckout
      invoice={invoiceData}
      product={productData}
      currentUser={userData}
      toggleMerchiCheckout={() => {}}
      isOpen={true}
    />
  );
}

Features

• Customizable checkout flow
• Support for discount codes
• Google Places integration for address autocomplete
• Multiple payment gateway support
• Quote request functionality
• Domain signup integration
• Customizable styling through className props
• Responsive design
• Invoice generation and management

Props

Style Classes

| Name | Type | Default | Description | |------|------|---------|-------------| | classNameMerchiCheckoutAlertsContainer | string? | "d-flex justify-content-center flex-column alerts-container-sm" | Class for the alerts container | | classNameMerchiCheckoutAlert | string? | "alert alert-dismissible alert-notify" | Class for the alert element | | classNameMerchiCheckoutAlertError | string? | "alert-danger" | Class for the danger/error alert | | classNameMerchiCheckoutAlertSuccess | string? | "alert-success" | Class for the success alert | | classNameMerchiCheckoutButtonPrimary | string? | "btn btn-md btn-primary d-flex align-items-center justify-content-center" | Class for the primary button | | classNameMerchiCheckoutButtonPrimaryBlock | string? | "btn btn-lg btn-primary btn-block" | Class for the primary block button | | classNameMerchiCheckoutButtonSecondary | string? | "btn btn-lg btn-secondary" | Class for the secondary button | | classNameMerchiCheckoutButtonSecondaryBlock | string? | "btn btn-lg btn-secondary btn-block" | Class for the secondary block button | | classNameMerchiCheckoutButtonDownloadInvoice | string? | "btn btn-lg btn-primary" | Class for the download invoice button | | classNameMerchiCheckoutConfirmInfoPanel | string? | "d-flex align-items-center" | Class for the confirmation information panel | | classNameMerchiCheckoutFooterActionsContainer | string? | "d-flex justify-content-between mt-4" | Class for the footer actions container | | classNameMerchiCheckoutFormCheckbox | string? | "form-check-input" | Class for input checkbox or radio | | classNameMerchiCheckoutFormGroup | string? | "form-group" | Class for the form group: label, input, checkbox, radio... | | classNameMerchiCheckoutFormGroupCheckbox | string? | "form-check" | Class for the checkbox/radio container | | classNameMerchiCheckoutFormInput | string? | "form-control" | Class for input fields | | classNameMerchiCheckoutFormSelect | string? | "form-control" | Class for select dropdown fields | | classNameMerchiCheckoutGoogleSuggestList | string? | "list-group m-b-0" | Class for a list group | | classNameMerchiCheckoutGoogleSuggestListItem | string? | "list-group-item cursor-pointer" | Class for the list item geo suggest | | classNameMerchiCheckoutListGroupItemLoader | string? | "list-group-item modal-merchi-checkout-shipment-option" | Class for the list item loader | | classNameMerchiCheckoutFormLabelCheckbox | string? | None | Class for the checkbox/radio label | | classNameMerchiCheckoutInputError | string? | "text-danger" | Class for the input error | | classNameMerchiCheckoutListGroup | string? | "modal-merchi-checkout-shipment-option" | Class for the checkout list group | | classNameMerchiCheckoutListGroupItem | string? | "list-group-item" | Class for the checkout list group item | | classNameMerchiCheckoutRow | string? | "merchi-row" | Class for a row element | | classNameMerchiCheckoutRowColumn | string? | "merchi-column" | Class for a column element | | classNameMerchiCheckoutSubtitle | string? | "merchi-checkout-subtitle" | Class for subtitle elements | | classNameMerchiCheckoutTabsContainer | string? | "merchi-checkout-tabs-container" | Class for the tabs container | | classNameMerchiCheckoutTab | string? | "merchi-checkout-tab" | Class for the checkout tab element | | classNameMerchiCheckoutTabPane | string? | "tab-pane" | Class for the tab pane | | classNameMerchiCheckoutTabPaneButton | string? | "btn merchi-checkout-tab-btn" | Class for the tab pane button | | classNameMerchiCheckoutTabPaneContainer | string? | "tab-content" | Class for the tab content | | classNameMerchiCheckoutTabButton | string? | "btn merchi-checkout-tab-btn" | Class for the merchi checkout tab button | | classNameMerchiInvoiceButtonPayInvoice | string? | "btn btn-lg btn-primary btn-block" | Class for the invoice pay button | | discountClassName | string? | 'merchi-checkout-discount-code-container' | Class for the discount container | | discountClassNameMainContainer | string? | None | Class for the discount main container | | discountClassNameButtonItemRemove | string? | 'btn btn-sm btn-link' | Class for the discount button to remove an item | | discountClassNameButton | string? | 'btn btn-primary' | Class for the discount button | | discountClassNameButtonContainer | string? | '' | Class for the discount button container | | discountClassNameErrorMessage | string? | 'text-danger' | Class for the discount error message | | discountClassNameInput | string? | 'form-control' | Class for the discount input | | discountClassNameListItem | string? | 'list-group-item d-flex align-items-center justify-content-between mt-2' | Class for the discount list item | | discountClassNameListItems | string? | 'list-group' | Class for the discount list items | | discountClassNameInputContainer | string? | 'merchi-checkout-discount-code-field-container' | Class for the discount input container | | discountClassNameInputdiscountLabel | string? | 'visually-hidden' | Class for the discount label |

State Props

| Name | Type | Default | Description | |------|------|---------|-------------| | currentUser | MerchiUserJson? | None | Merchi user entity | | invoice | MerchiInvoiceJson? | None | A Merchi invoice json object | | job | MerchiJobJson? | None | A Merchi job json object | | product | MerchiProductJson? | None | A Merchi product json object | | isOpen | boolean? | None | Used if the checkout is active | | isBuyRequest | boolean? | None | Tells the checkout to display payment gateway | | isProductEmbedForm | boolean? | false | Tells the checkout that it's a child of the Product embed form |

State Modifiers

| Name | Type | Default | Description | |------|------|---------|-------------| | includeDomainSignup | boolean? | false | Tells the checkout to hide the domain sign up tab | | showUserTermsAndConditions | boolean? | true | Show user terms and conditions | | showDiscountCode | boolean? | true | Show the discount code UI on the confirm tab | | discountShowAppliedItems | boolean? | false | Show the applied discount items | | redirectWithValue | boolean? | true | On redirect the value of the sale will be appended onto the redirect URLs |

Function Props

| Name | Type | Default | Description | |------|------|---------|-------------| | setInvoice | (i: MerchiInvoiceJson) => void? | None | A setter function for the Merchi invoice | | setJob | (j: MerchiJobJson) => void? | None | A setter function for the Merchi job | | toggleMerchiCheckout | () => void | None | A toggle function which sets the "isOpen" prop |

Configuration Props

| Name | Type | Default | Description | |------|------|---------|-------------| | urlApi | string? | 'https://api.merchi.co/v6/' | URL to connect to the Merchi API | | urlFrontend | string? | 'https://merchi.co/' | URL to redirect users to a frontend | | redirectAfterSuccessUrl | string? | None | On checkout or job creation this url will be redirected to. Typically used for third party conversion tracking | | redirectAfterQuoteSuccessUrl | string? | None | On checkout or job creation "quote request", this url will be redirected to. Typically used for third party conversion tracking | | messageSuccessBuyRequest | string? | None | A success message shown on completion of a buy request | | messageSuccessQuoteRequest | string? | None | A success message shown on completion of a quote request | | discountButtonText | string? | None | Text for the discount button | | discountLabel | string? | 'Discount code' | Label for the discount input |

Examples

Basic Usage

import { MerchiCheckout } from 'merchi_checkout';

function BasicCheckout() {
  return (
    <MerchiCheckout
      invoice={invoiceData}
      product={productData}
      isOpen={true}
      toggleMerchiCheckout={() => {}}
    />
  );
}

With Custom Styling

import { MerchiCheckout } from 'merchi_checkout';

function CustomStyledCheckout() {
  return (
    <MerchiCheckout
      invoice={invoiceData}
      product={productData}
      isOpen={true}
      toggleMerchiCheckout={() => {}}
      classNameMerchiCheckoutButtonPrimary="custom-primary-button"
      classNameMerchiCheckoutFormInput="custom-input"
    />
  );
}

Contributing

We welcome contributions! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

License

MIT