npm package: @ljmarquezg/checkout-spartacus-connector
Description: Checkout.com provides an end-to-end platform that helps you move faster, instead of holding you back. With flexible tools, granular data and deep insights, it’s the payments tech that unleashes your potential. So you can innovate, adapt to your markets, c
Latest version: 2211.32.1-flow-1

# Checkout.com Spartacus Connector for SAP Commerce Cloud

Checkout.com provides an end-to-end platform that helps you move faster, instead of holding you back. With flexible tools, granular data and deep insights, it’s the payments tech that unleashes your potential. So you can innovate, adapt to your markets, create outstanding customer experiences, and make smart decisions faster. The Connector for SAP Commerce Cloud (formerly Hybris) enables customers to implement a global payment strategy through a single integration in a secure, compliant and unified approach.

This [Checkout.com](https://www.checkout.com/) library adds payments capabilities to the Spartacus Storefront for SAP Commerce Cloud.

---

## Installation

1. **Install the Connector and Translations:**
   ```bash
   yarn add @checkout.com/checkout-spartacus-connector@2211.32.1-flow
   yarn add @checkout.com/checkout-spartacus-translations@2211.32.1-flow
   ```

2. **Add Styles to angular.json:**
   ```json
   "styles": [
     "src/styles.scss",
     "node_modules/@checkout.com/checkout-spartacus-connector/styles/styles.scss"
   ]
   ```

3. **Add Frames Script to index.html:**
   ```html
   <body>
     <app-root></app-root>
     <script src="https://cdn.checkout.com/js/framesv2.min.js"></script>
   </body>
   ```

4. **Configure in your Spartacus App:**
   - See [Configuration Example](#configuration-example) below.

---

## Release Compatibility
This library is tailored to the [Spartacus](https://sap.github.io/spartacus-docs/) Storefront:

- Connector: `@checkout.com/checkout-spartacus-connector` **2211.32.1-flow**
- Translations: `@checkout.com/checkout-spartacus-translations` **2211.32.1-flow**
- Spartacus: **2211.32.1**
- SAP Commerce Cloud: **2211**
- Angular CLI: **17.3.x**
- Node.js: **20.9.0+**
- Yarn: **1.22.19** or npm **10.2.4+**
- Peer dependencies: Spartacus Feature Modules `checkout` and `order`

---

## Usage

You can use the connector in your Spartacus project in two ways:

### Option 1: Single Import (Recommended)

Import `CheckoutComModule` in your `spartacus-configuration.module` and add translations configuration:

```typescript
import { NgModule } from '@angular/core';
import { checkoutComTranslationChunkConfig, checkoutComTranslations } from '@checkout.com/checkout-spartacus-translations';
import { CheckoutComModule } from '@checkout.com/checkout-spartacus-connector';

@NgModule({
  imports: [
    ...,
  CheckoutComModule
],
providers: [
  ...
    provideConfig({
      i18n: {
        resources: checkoutComTranslations,
        chunks: checkoutComTranslationChunkConfig,
        fallbackLang: 'en'
      },
    } as I18nConfig),
]
})
export class SpartacusConfigurationModule {}
```

### Option 2: Detailed Import (Advanced)

If you want to customize the configuration, you can import and configure the module manually:

```typescript
import { NgModule } from '@angular/core';
import { CmsConfig, provideConfig } from '@spartacus/core';
import { checkoutComAdapterProviders, checkoutComFacadeProviders, CheckoutComModalConfig, CHECKOUT_COM_FEATURE, checkoutComGuardsProviders } from '@checkout.com/checkout-spartacus-connector';

@NgModule({
  imports: [],
  providers: [
    ...,
    ...checkoutComFacadeProviders,
    ...checkoutComAdapterProviders,
    ...checkoutComGuardsProviders,
    provideConfig(CheckoutComModalConfig),
    provideConfig({
      featureModules: {
        [CHECKOUT_COM_FEATURE]: {
          module: () => import('@checkout.com/checkout-spartacus-connector').then(m => m.CheckoutComComponentsModule),
          cmsComponents: [
            'CheckoutPaymentDetails',
            'CheckoutOrderSummary',
            'CheckoutPlaceOrder',
            'CheckoutReviewPayment',
            'CheckoutReviewShipping',
            'OrderConfirmationThankMessageComponent',
            'OrderDetailItemsComponent',
            'OrderConfirmationItemsComponent',
            'OrderConfirmationTotalsComponent',
            'OrderConfirmationOverviewComponent',
            'OrderConfirmationShippingComponent',
            'OrderConfirmationBillingComponent',
            'OrderConfirmationContinueButtonComponent',
            'AccountPaymentDetailsComponent',
            'AccountOrderDetailsItemsComponent',
            'AccountOrderDetailsOverviewComponent',
            'AccountOrderDetailsSimpleOverviewComponent',
            'AccountOrderDetailsGroupedItemsComponent',
            'AccountOrderDetailsTotalsComponent',
          ],
        }
      }
    } as CmsConfig),
    provideConfig({
      i18n: {   
        resources: checkoutComTranslations,
        chunks: checkoutComTranslationChunkConfig,
        fallbackLang: 'en'
      },
    } as I18nConfig),
  ]
})
export class SpartacusConfigurationModule {}
```

Both options are supported. Use the single import for most projects, or the detailed import for advanced customization.

**Note:**
- Using `featureModules` enables lazy loading of CMS components.
- Translations are always loaded eagerly.

---

## Local Testing

To test your library before publishing:

1. Build and pack your library:
   ```bash
   yarn build:prepare-test-packages
   ```
2. Add the generated `.tgz` file as a dependency in your test project:
   ```bash
   yarn add ./checkoutcom-spartacus-connector-2211.32.1-flow.tgz --force
   ```
3. Use only package imports (not relative paths) in your test project.

---

## Peer Dependencies

Ensure your project uses compatible versions:
- `@spartacus/core`, `@spartacus/storefront`, `@spartacus/checkout`, `@spartacus/order` (2211.32.1)
- `@angular/core` (17.3.x)
- `@checkout.com/checkout-spartacus-translations` (2211.32.1-flow)

---

## Troubleshooting

- **Integrity check failed:**
  - Clear yarn/npm cache, remove lock files, rebuild and reinstall the .tgz.
- **Duplicate identifier errors:**
  - Ensure you import only from the package, not from relative paths.
- **Providers not working:**
  - Confirm all providers are exported in `public-api.ts`.
- **Styles not applied:**
  - Check that the library stylesheet is included in `angular.json`.
- **OCC endpoint errors:**
  - Make sure your backend OCC endpoints are configured and available.

---

## Extending Components

You can fork the repository or extend individual components in your project. See [GitHub SAP CX 2211](https://github.com/checkout/Checkout-SAP-Cloud-Commerce-2211) for source code.

## Extending components
The source code of the connector can be found on
* [GitHub SAP CX 2011](https://github.com/checkout/Checkout-SAP-Cloud-Commerce-2011)
* [GitHub SAP CX 2015](https://github.com/checkout/Checkout-SAP-Cloud-Commerce-2105)
* [GitHub SAP CX 2205](https://github.com/checkout/Checkout-SAP-Cloud-Commerce-2205)
* [GitHub SAP CX 2211](https://github.com/checkout/Checkout-SAP-Cloud-Commerce-2211)

## Supported APMs

| Supported APM’s: |
|------------------|
| ACH Direct Debit |
| ApplePay         |
| Bancontact       |
| Credit Card      |
| Eps              |
| GooglePay        |
| iDeal            |
| Klarna           |
| Multibanco       |
| Przelewy24       |
| Fawry            |

---

## Release Notes

See the [full release notes](#release-notes) section for details on updates and compatibility.

---

## License & Support

Checkout.com Connector is provided under the MIT license. For support, open an issue in the [GitHub repository](https://github.com/checkout/Checkout-SAP-Cloud-Commerce-2211).

---

## Changelog

### Release 2211.32.1-flow
* Update Dependencies:
  * [CheckoutSpartacusTranslations](https://www.npmjs.com/package/@checkout.com/checkout-spartacus-translations) to version 2211.32.1-flow
  * Checkout Flow component can be enabled to use the Checkout.com Connector payment methods and logic
  * Updated readme file dependencies to be compatible with Spartacus 2211.32.1

### Release 2211.32.1
* Update Dependencies:
  * [CheckoutSpartacusTranslations](https://www.npmjs.com/package/@checkout.com/checkout-spartacus-translations) to version 2211.32.1
  *  "ngx-plaid-link": "^14.0.0",

* Removed Dependencies:
  * "ng2-tooltip-directive": "^2.10.3"

| Supported APM’s: |
|------------------|
| ACH Direct Debit |
| ApplePay         |
| Bancontact       |
| Credit Card      |
| Eps              |
| GooglePay        |
| iDeal            |
| Klarna           |
| Multibanco       |
| Przelewy24       |
| Fawry            |

### Release 4.2.8
* Updated Klarna APM Configuration

### Release 4.2.7
* Removed BIC from iDeal APM form

### Release 4.2.6
* Included support for SAP CX 2211
* Fixed dependencies issues.
  *  "ng2-tooltip-directive": "^2.10.3",
  *  "ngx-plaid-link": "1.0.3",
  *  "@techiediaries/ngx-qrcode": "^9.1.0"

### Release 4.2.5
* Included support for SAP CX 2211
* Fixed dependencies issues.
  *  "ng2-tooltip-directive": "^2.10.3",
  *  "ngx-plaid-link": "1.0.3",
  *  "@techiediaries/ngx-qrcode": "^9.1.0"

### Release 4.2.4
* Included support for SAP CX 2205
* Included the following components in the list of components to be imported in the Spartacus configuration module:
  * GuestRegisterFormComponent.
  * AccountPaymentDetailsComponent.
* Included support for the following APMs:
  * Cartes Bancaires
  * Multiple Card Brands
* Update Dependencies:
  * [CheckoutSpartacusTranslations](https://www.npmjs.com/package/@checkout.com/checkout-spartacus-translations) to version 4.2.4

### Release 4.2.3
Include binaries. Previous 4.2.x releases are missing binaries.

### Release 4.2.2
Update readme

### Release 4.2.0
Use this release if you are using Spartacus 4.2.x
* Upgrade to Spartacus 4.2
* Show first name + last name as the card account holder
* Fix for ApplePay transaction status

### Release 1.0.2
* Source code now publicly available

### Release 1.0.0
* Added support for SSR

### Release 0.0.0
* Lazy loaded feature module
* Translations moved to separate node module
* APM’s
  * AliPay
  * ApplePay
  * Bancontact
  * Benefit Pay
  * EPS
  * Fawry
  * GooglePay
  * iDeal
  * Klarna
  * KNet
  * Mada
  * Multibanco
  * Oxxo
  * PayPal
  * Poli
  * Przelewy24
  * QPay
  * Sepa
* Credit card form placeholder localisation
* Display card payment icon
* Made OCC endpoints configurable