### Install Project Dependencies

Source: https://github.com/pavindulakshan/payhere-js-sdk/blob/master/CONTRIBUTING.md

Use one of the following package managers to install all required project dependencies for the Payhere JS SDK.

```Shell
npm install
```

```Shell
yarn
```

```Shell
pnpm install
```

--------------------------------

### Install Payhere JS SDK Client

Source: https://github.com/pavindulakshan/payhere-js-sdk/blob/master/packages/client/README.md

Instructions for installing the @payhere-js-sdk/client package using popular package managers like npm, Yarn, and pnpm. This is the first step to integrate the SDK into your project.

```Shell
npm install @payhere-js-sdk/client
```

```Shell
yarn add @payhere-js-sdk/client
```

```Shell
pnpm i @payhere-js-sdk/client
```

--------------------------------

### Set Up Local Package Linking

Source: https://github.com/pavindulakshan/payhere-js-sdk/blob/master/CONTRIBUTING.md

These commands create a global symlink for the SDK and then link it into a local single-page application, allowing for local development and testing without publishing.

```Shell
npm link
```

```Shell
npm link payhere-js-sdk
```

--------------------------------

### Compile TypeScript Source Code

Source: https://github.com/pavindulakshan/payhere-js-sdk/blob/master/CONTRIBUTING.md

Run this command to compile the TypeScript source files of the SDK into JavaScript, preparing them for use.

```Shell
npm run build
```

--------------------------------

### Run React Development Server with Yarn

Source: https://github.com/pavindulakshan/payhere-js-sdk/blob/master/samples/react/README.md

Starts the React application in development mode, making it accessible via a local browser. The server supports hot reloading for immediate feedback on code changes and displays lint errors in the console.

```Shell
yarn start
```

--------------------------------

### Process One-Time Payments with Payhere Checkout

Source: https://github.com/pavindulakshan/payhere-js-sdk/blob/master/packages/client/README.md

Demonstrates how to initiate a one-time payment using the Payhere Checkout API. It involves creating Customer and CheckoutParams objects with necessary details like return URLs, order ID, item title, currency, and amount, then starting the checkout process.

```JavaScript
import {Customer, CurrencyType, PayhereCheckout, CheckoutParams} from '@payhere-js-sdk/client'

function onPayhereCheckoutError(errorMsg) {
  alert(errorMsg)
}
  
function checkout() {
  const customer = new Customer({
    first_name: "Demo",
    last_name: "User",
    phone: "+94771234567",
    email: "user@example.com",
    address: "No. 50, Highlevel Road",
    city: "Panadura",
    country: "Sri Lanka"
  })

  const checkoutData = new CheckoutParams({
    returnUrl: 'http://localhost:3000/return',
    cancelUrl: 'http://localhost:3000/cancel',
    notifyUrl: 'http://localhost:8080/notify',
    order_id: '112233',
    itemTitle: 'Demo Item',
    currency: CurrencyType.LKR,
    amount: 100
  })

  const checkout = new PayhereCheckout(customer,checkoutData,onPayhereCheckoutError)
  checkout.start()
}
```

--------------------------------

### Eject Create React App Configuration with Yarn

Source: https://github.com/pavindulakshan/payhere-js-sdk/blob/master/samples/react/README.md

Removes the single build dependency from a Create React App project, copying all configuration files (webpack, Babel, ESLint) directly into the project. This provides full control over the build setup but is a one-way operation.

```Shell
yarn eject
```

--------------------------------

### Set Up Customer Preapproval with Payhere

Source: https://github.com/pavindulakshan/payhere-js-sdk/blob/master/packages/client/README.md

Shows how to use the Payhere Preapproval API to link customer payment information for future payments without direct customer intervention. This process requires defining customer details and preapproval parameters, including return and notify URLs.

```JavaScript
import {PayherePreapproval,PreapprovalParams, Customer, CurrencyType} from '@payhere-js-sdk/client'

function preApprove() {
  const customer = new Customer({
    first_name: "Demo",
    last_name: "User",
    phone: "+94771234567",
    email: "user@example.com",
    address: "No. 50, Highlevel Road",
    city: "Panadura",
    country: "Sri Lanka"
  })

  const preappParams = new PreapprovalParams({
    returnUrl: 'http://localhost:3000/return',
    cancelUrl: 'http://localhost:3000/cancel',
    notifyUrl: 'https://dfc84fd10430.ngrok.io/preapprove-notify',
    order_id: '112235',
    itemTitle: 'Demo Item',
    currency: CurrencyType.LKR
  })
  
  const preapp = new PayherePreapproval(customer,preappParams,(err) => alert(err))
  preapp.start()
}
```

--------------------------------

### Build React App for Production with Yarn

Source: https://github.com/pavindulakshan/payhere-js-sdk/blob/master/samples/react/README.md

Compiles the React application into a production-ready build, optimized for performance and minified. The output is placed in the `build` folder, ready for deployment.

```Shell
yarn build
```

--------------------------------

### Initialize Payhere SDK Client

Source: https://github.com/pavindulakshan/payhere-js-sdk/blob/master/packages/client/README.md

Initialize the Payhere SDK in your Single Page App's entry point. This involves specifying your merchant ID and the account type (Sandbox or Live) to configure the SDK for transactions.

```JavaScript
import {Payhere, AccountCategory} from "@payhere-js-sdk/client"

// Sandbox 
Payhere.init("12xxxxx",AccountCategory.SANDBOX)

// Live
Payhere.init("12xxxxx",AccountCategory.LIVE)
```

--------------------------------

### Initiate Recurring Payments with Payhere Subscription

Source: https://github.com/pavindulakshan/payhere-js-sdk/blob/master/packages/client/README.md

Illustrates how to set up recurring payments using the Payhere Subscription API. This involves defining customer details and subscription parameters, including recurrence frequency and duration, to enable automated future payments.

```JavaScript
import {PayhereSubscription,SubscriptionParams, Customer, Month,CurrencyType} from '@payhere-js-sdk/client'

function onPayhereSubscriptionError(errorMsg) {
  alert(errorMsg)
}

function initSubscription() {
  try {
    const customer = new Customer({
      first_name: "Demo",
      last_name: "User",
      phone: "+94771234567",
      email: "user@example.com",
      address: "No. 50, Highlevel Road",
      city: "Panadura",
      country: "Sri Lanka"
    })

    const subscriptionData = new SubscriptionParams({
      returnUrl: 'http://localhost:3000/return',
      cancelUrl: 'http://localhost:3000/cancel',
      notifyUrl: 'http://localhost:8080/notify',
      order_id: '112234',
      itemTitle: 'Demo Item',
      recurrence: new Month(1),
      duration: new Month(12),
      currency: CurrencyType.LKR,
      amount: 100
    })
          
    const subscription = new PayhereSubscription(customer,subscriptionData,onPayhereSubscriptionError)
    subscription.start()
  } catch(err){
    console.log(err)
  }
}
```

--------------------------------

### Launch React Test Runner with Yarn

Source: https://github.com/pavindulakshan/payhere-js-sdk/blob/master/samples/react/README.md

Initiates the test runner in interactive watch mode for the React application. This allows developers to continuously run tests as code changes, providing immediate feedback on test results.

```Shell
yarn test
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.