Skip to main content

Using the React Plugin

Introduction​

The payfurl-dropin Vue plugin provides a simple way to integrate payFURL's payment drop-in component into your React application. This guide will walk you through the steps to set up and use the payfurl-dropin component.

Installation​

First, you need to install the @payfurl/react-plugin package. You can do this using npm:

npm install @payfurl/react-plugin

Usage​

Importing the Component​

In your React component, import the PayfurlDropin component from the @payfurl/react-plugin package.

import { PayfurlDropin } from "@payfurl/react-plugin";

Setting Up the Component​

You can set up the payfurl-dropin component in your React component's template. Here is an example of how you can set up the component:

function App() {
  const handleSuccess = (message: string) => {
    console.log("Payment successful:", message);
  };

  const handleFailure = (message: string) => {
    console.error("Payment failed:", message);
  };

  const handleLoaded = () => {
    console.log("PayfurlDropin loaded");
  };

  const handleValidationStatusChange = (status: boolean, message: string) => {
    console.log("Validation status changed:", status, message);
  };

  return (
    <div>
      <h1>payFURL Drop-in Example</h1>
      <PayfurlDropin
        environment="development"
        publicKey="pubtest02df24d469fc2732a82fcfa64f298b136c84959d52-au"
        debug={ true }
        amount={ 1000 }
        currency="AUD"
        options={ {} }
        onSuccess={ handleSuccess }
        onFailure={ handleFailure }
        onLoaded={ handleLoaded }
        onValidationStatusChange={ handleValidationStatusChange }
      />
    </div>
  );
}

export default App;

Props​

  • environment: The environment in which the component is running (e.g., "sandbox" or "production").
  • public-key: Your payFURL public key.
  • amount: The amount to be charged.
  • currency: The currency in which the amount is specified.
  • options: Additional options for the drop-in component.

Events​

  • @onSuccess: Triggered when the payment is successful.
  • @onFailure: Triggered when the payment fails.
  • @onLoaded: Triggered when the component is loaded.
  • @onValidationStatusChange: Triggered when the validation status changes.