# One Click Checkout

Offers seamless one-click payment solutions by integrating express checkout buttons, helping customers finalize their purchase faster and easier.

## <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="150.125">Prop</th><th width="157.19140625">Type</th><th width="60.53125">Required</th><th>Description</th></tr></thead><tbody><tr><td>product</td><td>object</td><td>No</td><td>Product information.</td></tr><tr><td>productQuantity</td><td>number</td><td>No</td><td>It is used to determine the quantity of the product to be added to the cart.</td></tr><tr><td>clearBasket</td><td>boolean</td><td>No</td><td>It is used when the basket needs to be cleaned while adding the product.</td></tr><tr><td>isDisabled</td><td>boolean</td><td>No</td><td>Button click control is provided.</td></tr><tr><td>className</td><td>string</td><td>No</td><td>The CSS class to apply to the button.</td></tr><tr><td>addBeforeClick</td><td>function</td><td>No</td><td>Can be used for checks before the Click event. The function should return boolean as value.</td></tr><tr><td>onError</td><td>function</td><td>No</td><td>If you get an error when you click the button, you can use it to customize the error.</td></tr><tr><td>providers</td><td>array</td><td>No</td><td>Can be created provider without making a useGetCheckoutProvidersQuery request.</td></tr><tr><td>content</td><td>React.ReactNode</td><td>No</td><td>It is used to create custom content.</td></tr><tr><td>openMiniBasket</td><td>boolean</td><td>No</td><td>Manages the opening status of the mini basket.</td></tr><tr><td>translations</td><td>string</td><td>No</td><td>The text of the button.</td></tr><tr><td>customUIRender</td><td>React.ReactNode</td><td>No</td><td>Optional function to fully customize the button rendering. Receives onClick, disabled, loading, provider, productError and content props.</td></tr></tbody></table>

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

```typescript
{
   buttonText?: string;
}
```

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

<table><thead><tr><th width="125.19140625">Parameter</th><th width="160.87890625">Type</th><th>Description</th></tr></thead><tbody><tr><td>onClick</td><td>() => void</td><td>Function that triggers the one-click payment process.</td></tr><tr><td>disabled</td><td>boolean</td><td>Indicates whether the button is clickable or not.</td></tr><tr><td>loading</td><td>boolean</td><td>Shows a loading state while the payment is being processed.</td></tr><tr><td>provider</td><td>object</td><td>Can be created provider without making a useGetCheckoutProvidersQuery request.</td></tr><tr><td>productError</td><td>string</td><td>Displays an error message related to the product if present.</td></tr><tr><td>content</td><td>React.ReactNode</td><td>Custom content to be displayed inside the button.</td></tr></tbody></table>

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

**Summary:**

```bash
src/views/basket/summary.tsx
```

**Product Info:**

```bash
src/views/product/product-info.tsx
```

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

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

<PluginModule
 component={Component.OneClickCheckoutButtons}
 props={{
   product: data.product,
   translations: {
     buttonText: 'Pay with AKIFAST'
   },
   clearBasket: true,
   addBeforeClick: variantsSelectionCheck,
   openMiniBasket: false,
   providers: [
     {
       pk: 1,
       name: 'Akifast',
       slug: 'akifast'
     }
   ],
   content: (
     <div className="flex items-center justify-center">
       <Icon name="akinon" size={20} className="mr-2" />
       <span>Pay with AKIFAST</span>
     </div>
   ),
   onError: (error) =>
     setProductError(
       error?.data?.non_field_errors ||
         Object.keys(error?.data).map(
           (key) => `${key}: ${error?.data[key].join(', ')}`
         )
     )
 }}
/>;
```

### <mark style="color:red;">**Custom UI Render Usage**</mark>

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

<PluginModule
 component={Component.OneClickCheckoutButtons}
 props={{
   customUIRender: ({
     onClick,
     disabled,
     loading,
     provider,
     productError,
     content
   }) => (
     <>
       <button
         onClick={onClick}
         disabled={disabled}
         className="relative w-full py-3 bg-[#ff2000] text-black hover:bg-[#547ee7] text-sm font-semibold flex items-center justify-center"
       >
         {loading && (
           <span className="absolute left-3 w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
         )}
         {loading ? 'Please wait...' : content ?? `Buy with ${provider.name}`}
       </button>

       {productError && (
         <div className="mt-4 text-xs text-center text-[#d72b01]">
           {productError}
         </div>
       )}
     </>
   )
 }}
/>;
```