Import Package

Import the necessary modules and components as follows:

import React from 'react';
import {
  BenefitPayButton,
  Edges,
  Environment,
  Locale
} from '@tap-payments/benefit-pay-button';

Implementing the BenefitPayButton

Now, let's integrate the BenefitPayButton component into your React component. Here's an example implementation:

const App = () => {
  return (
    <BenefitPayButton
      // Required: The public Key provided by Tap
      operator={{
        publicKey: 'pk_test_XXXXXXXX'
      }}
      // Required: The environment of the SDK (Development or Production)
      environment={Environment.Development}
      // Optional: Enable debug mode
      debug={true}
      // Required: Merchant information (The merchant identifier provided by Tap)
      merchant={{
        id: 'merchant_xxxxxxxxxx'
      }}
      // Required: Transaction details (amount and currency)
      transaction={{
        amount: '12',
        currency: 'BHD'
      }}
      // Optional: Billing contact information
      customer={{
        names: [
          {
            lang: Locale.EN,
            first: 'test',
            last: 'tester',
            middle: 'test'
          }
        ],
        contact: {
          email: '[email protected]',
          phone: {
            countryCode: '+20',
            number: '1000000000'
          }
        }
      }}
      // Optional: Styling options for the button
      interface={{
        locale: Locale.EN,
        edges: Edges.CURVED
      }}
      // Optional: Callback functions
      onReady={() => {
        console.log('Ready');
      }}
      onClick={() => {
        console.log('Clicked');
      }}
      onCancel={() => console.log('Cancelled')}
      onError={(err) => console.log('onError', err)}
      onSuccess={(data) => {
        // Handle success here...
        console.log(data);
      }}
    />
  );
}

Callback Functions

onReady: This function is called when the button is ready to be clicked.
onClick: This function is called when the button is clicked.
onCancel: This function is called when the payment is canceled.
onError: This function is called when an error occurs during the payment process.
onSuccess: This function is called when the payment is successful. You can perform your post-payment tasks here.

Conclusion

You've now successfully integrated the BenefitPayButton component into your React application, allowing you to process payments using Tap's BenefitPay SDK. Make sure to handle payment success and error scenarios according to your application's requirements.