Developers

Developers

  • Docs
  • Help
  • Blog

›Integrations

Overview

  • Getting Started
  • Testing

Integrations

  • Simple link
  • Simple embed
  • React SDK
  • Embed SDK
  • Webhooks
  • REST Hooks
  • Wix Embed SDK

API

  • Authentication

/api

    /v1/current_company

    • GET /
    • PUT /
    • GET /stats

    /v1/customers

    • GET /
    • GET /:id

    /v1/payments

    • GET /
    • GET /:id

    /v1/plans

    • GET /
    • POST /
    • PUT /:id

    /v1/refunds

    • POST /

    /v1/subscriptions

    • GET /
    • GET /:id
    • DELETE /:id

    /v1/user

    • GET /

JavaScript Embed SDK

Installation

Firstly make sure to load the embed code on your page.

<script src="https://payhere.co/embed/embed.js"></script>

Alternatively install via npm.

# If using npm
$ npm install payhere-embed-sdk --save
# or using yarn
$ yarn add payhere-embed-sdk

How it works

This more advanced integration will allow success and failure callbacks and support more options than the payment buttons above. See a complete example

// If using npm package
import "payhere-embed-sdk/dist/embed.css"
import Payhere from "payhere-embed-sdk/dist/embed"

PayHere.launch({
  embedURL: "https://app.payhere.co/altlabs/buy/coffee",
  customerName: "Pete Hawkins", // optional
  customerEmail: "pete@example.org", // optional
  disableCustomer: "yes", // optional
  amountInCents: 4000, // optional
  hideAmount: "yes", // optional
  customFields: {
    street_address: "14 Anystreet",
    town: "Anytown",
    postcode: "A1 1AB",
    size: "XL",
  }, // optional
  onSuccess: function({ customerName, customerEmail, quantityPurchased, requiresFurtherAuthentication, plan: { id, name }, paymentAmount }) {
    //
  },
  onFailure: function(error) {
    //
  },
  onClose: function() {
    //
  }
})

Properties

  • embedURL - the link to your Payhere payment form

  • customerName - optional name to prefill customer info

  • customerEmail - optional email to prefill customer info

  • disableCustomer - optionally disable the customer fields so they can't be edited, set this to "yes" to disable

  • amountInCents - optionally pass in the price for a plan setup as "Customer sets price (donation)"

  • hideAmount - optionally when passing "amountInCents" option you can hide the price selection from the end user to fix it to the price you have set

  • customFields - optionally pass in set values for custom fields

  • onSuccess - optional callback - returns a payment info

  • onFailure - optional callback - returns an error

    {
      error: "Card declined"
    }
    
  • onClose - optional callback - called when payment form is closed

Custom fields

When passing custom fields the key will be a lowercased version of the label, with spaces replaced by '_'. I.e. if you have a custom field called 'House number' and 'Postcode' you will pass their values as follows:

customFields: {
  house_number: "42",
  postcode: "BT1 1AB"
}

If you have marked custom fields as 'hidden' you can still pass the values in using the embed SDK, this allows you to pass hidden metadata.

← React SDKWebhooks →
  • Installation
  • How it works
    • Properties
    • Custom fields
Developers
Docs
Getting StartedEmbed SDKAPI Reference
Payhere
HelpSignup freeFeatures
More
Our BlogGitHubTwitter
Copyright © 2025 Payhere Payments Ltd