# Project Zero - Google Pay Plugin

## Installation

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

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

# Adding Google Pay Payment Method to Checkout

---

## 1. Create Google Pay File

**views/checkout/steps/payment/options/google-pay.tsx**

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

export default function GooglePay() {
  return <PluginModule component={Component.GooglePay} />;
}
```

## 2. Update Payment Step

**views/checkout/steps/payment/index.tsx**

```tsx
import GooglePay from './options/google-pay';

export const PaymentOptionViews: Array<CheckoutPaymentOption> = [
  {
    slug: 'payment-option-slug',
    view: GooglePay
  }
  // Other payment methods can be added here
];
```

## Props

### customUIRender

A function to fully customize the Google Pay component's appearance. If provided, the default UI will not be shown; instead, the JSX returned by this function will be rendered.

| Property | Type | Description |
| --- | --- | --- |
| `customUIRender` | `React.ReactNode` | Optional function to fully customize the Google Pay component. |

#### Example

```tsx
<PluginModule
  component={Component.GooglePay}
  props={{
    customUIRender: ({ handlePaymentRequest, paymentErrors }) => {
      return (
        <div className="flex flex-col gap-4">
          <button
            onClick={handlePaymentRequest}
            className="group relative w-full flex justify-center items-center gap-3 bg-black hover:bg-gray-800 text-white font-medium py-4 px-6 rounded-lg transition-all duration-200 active:scale-[0.98]"
          >
            <span className="text-lg">Pay with Google Pay</span>

            <span className="absolute right-4 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
              →
            </span>
          </button>

          {paymentErrors && (
            <p className="text-sm text-red-700 mt-1">{paymentErrors}</p>
          )}
        </div>
      );
    }
  }}
/>
```