# 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.

## <mark style="color:red;">**Installation Method**</mark>

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

```bash
npx @akinon/projectzero@latest --plugins
```

### <mark style="color:red;">**Props**</mark>

<table><thead><tr><th width="152.15625">Prop</th><th width="161.21875">Type</th><th width="120.11328125">Required</th><th>Description</th></tr></thead><tbody><tr><td>translations</td><td>object</td><td>Optional</td><td>Object containing translation strings.</td></tr><tr><td>classes</td><td>object</td><td>Optional</td><td>Object containing custom CSS class names.</td></tr><tr><td>customUIRender</td><td>React.ReactNode</td><td>Optional</td><td>Custom rendering functions.</td></tr></tbody></table>

### <mark style="color:red;">**CustomUIRender Props**</mark>

<table><thead><tr><th width="128.421875">Prop</th><th width="189.5859375">Type</th><th width="107.15234375">Required</th><th>Description</th></tr></thead><tbody><tr><td>handleSubmit</td><td>UseFormHandleSubmit&#x3C;BKMOptionForm></td><td>Required</td><td>Form submission handler from `react-hook-form`. Wraps the `handleSubmit` method.</td></tr><tr><td>onSubmit</td><td>SubmitHandler&#x3C;BKMOptionForm></td><td>Required</td><td>Callback function executed on successful form submission.</td></tr><tr><td>control</td><td>Control&#x3C;BKMOptionForm></td><td>Required</td><td>Control object used to register form inputs with `react-hook-form`.</td></tr><tr><td>errors</td><td>FieldErrors&#x3C;BKMOptionForm></td><td>Required</td><td>Contains validation errors for form fields.</td></tr><tr><td>translations</td><td>BKMOptionProps['translations']</td><td>Optional</td><td>Optional prop for providing localized strings like title and description.</td></tr><tr><td>bkmFrameId</td><td>string</td><td>Required</td><td>The DOM `id` attribute for the embedded BKM iframe element.</td></tr></tbody></table>

### <mark style="color:red;">**Translations Properties**</mark>

<table><thead><tr><th width="136.82421875">Key</th><th width="108.03515625">Type</th><th>Description</th></tr></thead><tbody><tr><td>title</td><td>string</td><td>The title text displayed at the top of the component.</td></tr><tr><td>description</td><td>string</td><td>A short description or informative message for the user.</td></tr><tr><td>button</td><td>string</td><td>Text displayed on the submit button.</td></tr><tr><td>required</td><td>string</td><td>Validation message shown when a required field is empty.</td></tr></tbody></table>

## <mark style="color:red;">**Usage Examples**</mark>

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

### <mark style="color:red;">**Default Usage**</mark>

```javascript
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;
```

### <mark style="color:red;">**Customized Usage with Renderer**</mark>

```javascript
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>
   )
 }}
/>;
```