BKM Express

pz-bkm provides an integration for BKM Express, allowing users to pay via redirect to the BKM secure payment page during checkout. The component is flexible and supports both default and fully customized rendering.

Installation Method

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

npx @akinon/projectzero@latest --plugins

Props

Prop	Type	Required	Description
translations	object	Optional	Object containing translation strings.
classes	object	Optional	Object containing custom CSS class names.
customUIRender	React.ReactNode	Optional	Custom rendering functions.

CustomUIRender Props

Prop	Type	Required	Description
handleSubmit	UseFormHandleSubmit<BKMOptionForm>	Required	Form submission handler from `react-hook-form`. Wraps the `handleSubmit` method.
onSubmit	SubmitHandler<BKMOptionForm>	Required	Callback function executed on successful form submission.
control	Control<BKMOptionForm>	Required	Control object used to register form inputs with `react-hook-form`.
errors	FieldErrors<BKMOptionForm>	Required	Contains validation errors for form fields.
translations	BKMOptionProps['translations']	Optional	Optional prop for providing localized strings like title and description.
bkmFrameId	string	Required	The DOM `id` attribute for the embedded BKM iframe element.

Translations Properties

Key	Type	Description
title	string	The title text displayed at the top of the component.
description	string	A short description or informative message for the user.
button	string	Text displayed on the submit button.
required	string	Validation message shown when a required field is empty.

Usage Examples

/src/views/checkout/steps/payment/options/bkm.tsx

Default Usage

import PluginModule, { Component } from '@akinon/next/components/plugin-module';

const Bkm = () => {
 return (
   <PluginModule
     component={Component.BKMExpress}
     props={{
       translations: {
         title: 'Pay with BKM Express',
         description: `When paying with BKM Express, you will be redirected to www.bkmexpress.com.tr.`,
         button: 'Pay Now'
       }
     }}
   />
 );
};

export default Bkm;

Customized Usage with Renderer

import PluginModule, { Component } from '@akinon/next/components/plugin-module';

<PluginModule
 component={Component.BKMExpress}
 props={{
   customUIRender: ({
     handleSubmit,
     onSubmit,
     control,
     errors,
     translations,
     bkmFrameId
   }) => (
     <div className="px-4 py-6">
       <form onSubmit={handleSubmit(onSubmit)}>
         <h2 className="font-semibold text-2xl mb-4">{translations?.title}</h2>
         <p className="text-sm">
           When paying with BKM Express, you will be redirected to
           www.bkmexpress.com.tr. <br />
           You need to log in to the application with the username and password
           you used when signing up to BKM Express. You can easily pay by selecting
           the card you want to make a transaction and the payment method from the
           payment screen that appears. After completing your shopping, you will
           automatically return to site.
         </p>
         <div className="py-4">
           <CheckoutAgreements
             control={control}
             error={errors?.agreement}
             fieldId="agreement"
           />
         </div>

         <button className="w-full bg-primary text-white h-9" type="submit">
           Pay with BKM Express
         </button>
       </form>

       <div
         id={bkmFrameId}
         className="bkm-frame !flex justify-center items-center !pt-0"
       ></div>
     </div>
   )
 }}
/>;