name: qliro-plugin title: Qliro Plugin description: Vendure plugin designed to integrate Qliro's payment services into your e-commerce platform. version: 3.0.13 tags: [vendure, plugin, qliro, payment]

Qliro Plugin

The Qliro Plugin is a Vendure plugin designed to integrate Qliro's payment services into your e-commerce platform. It enables seamless payment processing, providing a secure and user-friendly checkout experience for your customers.

Functionality

This plugin enables the following features:

• Integration with Qliro's payment gateway.
• Secure and efficient payment processing.
• Support for various payment methods offered by Qliro.
• Customizable configuration to suit your business needs.
• Custom order states: PaymentError, PayedButNotProcessedError, and PaymentDiscrepancy.
• Event listeners for handling order updates and state transitions.
• GraphQL API extensions for creating payment intents.
• REST endpoints for order validation and status updates.

Use Cases

The Qliro Plugin is ideal for:

• E-commerce stores looking to integrate Qliro as a payment provider.
• Businesses that want to offer multiple payment options to their customers.
• Ensuring a secure and smooth checkout process.

Installation

1. Clone the repository or copy the qliro-plugin directory into your project.

2. Navigate to the plugin directory:

   cd packages/qliro-plugin

3. Install the dependencies:

   yarn

4. Build the plugin:

   yarn build

5. Add the plugin to your Vendure configuration:

   import { QliroPaymentsPlugin } from 'qliro-plugin';
   
   export const config = {
     plugins: [
       QliroPaymentsPlugin,
       // other plugins
     ],
   };

Configuration

1. Obtain your Qliro API credentials from the Qliro merchant portal.

2. Configure the plugin in your vendure-config.ts file:

   import { QliroPaymentsPlugin } from 'qliro-plugin';
   
   export const config = {
     plugins: [
       QliroPaymentsPlugin.init({
         qliroUrl: 'https://api.qliro.com',
         vendureUrl: 'http://localhost:3000',
         tokenSecret: 'your-token-secret',
         payload: {
           MerchantConfirmationUrl: 'https://my-shop/thank-you/?orderCode=',
           Country: 'SE',
           Language: 'sv-se',
           PrimaryColor: '#003A70',
           CallToActionColor: '#003A70',
           ButtonCornerRadius: 100,
         },
       }),
     ],
   };

Mandatory Configuration Options

• qliroUrl: The URL to the Qliro API (e.g., test or production environment).
• vendureUrl: The URL to the current Vendure instance, used for webhooks.
• tokenSecret: The secret used to sign JWTs used by Qliro.
• payload: An object containing additional configuration options:
  • MerchantConfirmationUrl: A page where the customer is sent when the order is completed.
  • Country: The country where the order is placed (e.g., 'SE').
  • Language: Locale indicative for language & other location-specific details (e.g., 'sv-se').

Optional Configuration Options

• tokenValidityMinutes: The validity time in minutes of the JWT. Defaults to 480 (8 hours).
• Additional properties in payload for customization.

Usage

1. Start the Vendure server:

   yarn start

2. Access the admin UI at http://localhost:3050/admin and log in with the default credentials (superadmin/superadmin).

3. Configure payment methods in the admin UI to use Qliro as the payment provider.

4. Test the checkout process to ensure Qliro payments are working as expected.

Testing

The plugin ships an end-to-end spec, test/status-controller.e2e-spec.ts, that boots a Vendure test server (@vendure/testing, sqljs) with the plugin installed, creates a seller-backed channel, places an order, and posts a Qliro Completed status push to POST /payments/qliro. Outbound calls to Qliro are stubbed on QliroService.prototype.

npx vitest run packages/qliro-plugin/test/status-controller.e2e-spec.ts   # from the repo root
npx nx test qliro-plugin                                                   # same, via Nx

Vendure 3.6 and later require OrderService.addPaymentToOrder to run inside a transaction; the status controller opens one explicitly with TransactionalConnection.withTransaction since REST controllers get no @Transaction() interceptor. The spec guards that path.

Resources

• Vendure Plugin Documentation
• Qliro API Documentation for detailed information on Qliro's payment services.