One Click Checkout

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

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

Translations

{
   buttonText?: string;
}

CustomUIRender Parameters

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

Usage Examples

Summary:

src/views/basket/summary.tsx

Product Info:

src/views/product/product-info.tsx

Default Usage

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(', ')}`
         )
     )
 }}
/>;

Custom UI Render Usage

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