# Masterpass REST Plugin

A React component for integrating Masterpass REST payment functionality into your checkout flow.

## Installation

Install the plugin using the Project Zero CLI:

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

## SDK Setup

After installing the package, you need to copy the Masterpass JavaScript SDK to your project's public folder:

```bash
cp node_modules/@akinon/pz-masterpass-rest/assets/masterpass-javascript-sdk-web.min.js public/
```

The SDK file must be accessible at `/masterpass-javascript-sdk-web.min.js` in your application.

## Basic Usage

Here's a simple example of how to use the Masterpass REST component:

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

const MasterpassRest = () => {
  const { locale, currency } = useLocalization();

  return (
    <PluginModule
      component={Component.MasterpassRest}
      props={{ locale, currency }}
    />
  );
};

export default MasterpassRest;
```

**File Path:** `src/views/checkout/steps/payment/options/masterpass-rest.tsx`

## Props Reference

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `locale` | `string` | `'en'` | Language locale for the component (e.g., `'en'`, `'tr'`) |
| `currency` | `string` | `'usd'` | Currency code (e.g., `'usd'`, `'try'`) |
| `texts` | `MasterpassRestOptionTexts` | `defaultTexts` | Object containing all user-facing text for customization and localization |
| `customRender` | `MasterpassRestOptionCustomRender` | `undefined` | Object with custom render functions for advanced UI customization |

## Advanced Customization

### Text Customization

Override any user-facing text for localization or branding:

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

function PaymentPage() {
  const { locale, currency } = useLocalization();

  const customTexts = {
    addCardButton: 'Kartı Kaydet',
    paymentErrorTitle: 'Ödeme Hatası'
    // ... other text overrides
  };

  return (
    <PluginModule
      component={Component.MasterpassRest}
      props={{
        locale,
        currency,
        texts: customTexts
      }}
    />
  );
}
```

### Custom Rendering

Override major UI sections using the `customRender` prop:

```tsx
<PluginModule
  component={Component.MasterpassRest}
  props={{
    locale,
    currency,
    customRender: {
      paymentMethodSelector: (props) => <MyCustomSelector {...props} />
      // ... other custom renderers
    }
  }}
/>
```

For all available customization options, see the [Usage Guide](./docs/USAGE.md) which covers every custom render slot with props and examples.