Project Zero - BLIK Plugin

PayU Europe BLIK payment method for the Project Zero storefront. The shopper enters the 6-digit one-time BLIK code generated in their banking app; the code is submitted through the generic digital-wallet checkout flow (server-to-server, no redirect) and the order is finalized on PayU's asynchronous order-confirmation webhook.

Markets: Poland (and Slovakia when enabled on the POS).

Installation

You can use the following command to install the extension with the latest plugins:

npx @akinon/projectzero@latest --plugins

Adding BLIK to Checkout

BLIK arrives from the backend as a wallet payment option (payment_type: "wallet"). All PayU Europe wallet methods share that type, so the storefront selects the BLIK component by the payment option's slug through the brand PaymentOptionViews registry. That registry is resolved before the generic wallet branches, so no core change is required.

1. Create the BLIK option file

views/checkout/steps/payment/options/blik.tsx

import Blik from '@akinon/pz-blik';

export default function BlikOption() {
  return <Blik />;
}

2. Register it in the payment step

views/checkout/steps/payment/index.tsx

import BlikOption from './options/blik';

export const PaymentOptionViews: Array<CheckoutPaymentOption> = [
  {
    slug: 'blik', // must match the BLIK payment option slug configured in the Akinon backend
    view: BlikOption
  }
  // Other payment methods can be added here
];

The slug must exactly match the BLIK payment option slug provisioned on the POS in the Akinon backend.

Translations

The default UI reads the following localization keys — add them to the brand translations:

| Key | Example (en) | | --------------------------------- | -------------------------------------- | | checkout.blik.code_label | BLIK code | | checkout.blik.code_placeholder | 6-digit code | | checkout.blik.pay_button | Pay | | checkout.blik.processing | Processing... | | checkout.blik.errors.context | Could not proceed to the payment step. | | checkout.blik.errors.incomplete | Payment could not be completed. | | checkout.blik.errors.unexpected | An unexpected error occurred. |

Props

| Prop | Type | Description | | --- | --- | --- | | className | string | Applied to the default wrapper element. | | customUIRender | (props) => JSX.Element \| null | Fully replaces the default UI. Receives { code, setCode, handleSubmit, isProcessing, isValid, paymentErrors }. |

customUIRender example

<Blik
  customUIRender={({
    code,
    setCode,
    handleSubmit,
    isProcessing,
    isValid,
    paymentErrors
  }) => (
    <div>
      <input
        value={code}
        inputMode="numeric"
        onChange={(event) => setCode(event.target.value)}
      />
      <button onClick={handleSubmit} disabled={!isValid || isProcessing}>
        Pay with BLIK
      </button>
      {paymentErrors && <p>{paymentErrors}</p>}
    </div>
  )}
/>