Mileston Payment Client

Mileston Payment Client is a versatile payment button component library designed for seamless integration into projects using plain JavaScript, React, Angular, and Vue. It provides a customizable button that triggers a payment popup and notifies you when the payment process is complete. Other components will be added in future updates. Feel free to open a PR! Contact [email protected] if you have any issues integrating this.

Installation

First, install the package via npm:

npm install mileston-payment-client

Usage

Core Class (Vanilla JavaScript)

For plain JavaScript users, the library provides the MilestonPayButton class that can be instantiated and used directly.

Example

import { MilestonPayButton } from 'mileston-payment-client';

const container = document.getElementById('payment-button-container');

const payButton = new MilestonPayButton(container, {
  buttonText: 'Pay Now',
  onPaymentComplete: () => {
    console.log('Payment complete!');
  },
  onPaymentDataReceived: (data) => {
    console.log('Payment data received:', data);
  },
  onPaymentError: (error) => {
    console.error('Payment error:', error);
  },
  paymentUrl: 'https://example.com/payment',
});

// Optional: Update button text or styles later
payButton.updateButtonText('Checkout');
payButton.updateButtonStyle({ backgroundColor: 'blue', color: 'white' });

React Integration

For React projects, the library provides a dedicated React component.

Example

import React from 'react';
import { PayButton } from 'mileston-payment-client';

function App() {
  return (
    <div>
      <PayButton
        onPaymentComplete={() => console.log('Payment complete!')}
        onPaymentDataReceived={(data) => console.log('Payment data received:', data)}
        onPaymentError={(error) => console.error('Payment error:', error)}
        paymentUrl="https://checkout.mileston.co/payment"
        style={{ backgroundColor: 'green', color: 'white' }}
      >
        Pay Now
      </PayButton>
    </div>
  );
}

export default App;

Angular Integration

For Angular projects, the library provides a dedicated Angular component.

Example

import { Component } from '@angular/core';
import { MilestonPayButton } from 'mileston-payment-client';

@Component({
  selector: 'app-root',
  template: `<div id="payment-button-container"></div>`,
})
export class AppComponent {
  ngOnInit() {
    const container = document.getElementById('payment-button-container');

    const payButton = new MilestonPayButton(container, {
      buttonText: 'Pay Now',
      onPaymentComplete: () => {
        console.log('Payment complete!');
      },
      onPaymentDataReceived: (data) => {
        console.log('Payment data received:', data);
      },
      onPaymentError: (error) => {
        console.error('Payment error:', error);
      },
      paymentUrl: 'https://example.com/payment',
    });
  }
}

Vue Integration

For Vue projects, the library provides a dedicated Vue component.

Example

<template>
  <div id="payment-button-container"></div>
</template>

<script>
import { MilestonPayButton } from 'mileston-payment-client';

export default {
  name: 'App',
  mounted() {
    const container = this.$el.querySelector('#payment-button-container');

    const payButton = new MilestonPayButton(container, {
      buttonText: 'Pay Now',
      onPaymentComplete: () => {
        console.log('Payment complete!');
      },
      onPaymentDataReceived: (data) => {
        console.log('Payment data received:', data);
      },
      onPaymentError: (error) => {
        console.error('Payment error:', error);
      },
      paymentUrl: 'https://example.com/payment',
    });
  },
};
</script>

Customization Options

Configuration Options

All integrations support the following options:

| Option | Type | Required | Description | |---------------------|-----------------------|----------|-------------------------------------------------------------| | container | HTMLElement | Yes | The DOM element to attach the button to (Core only). | | buttonText | string | Yes | Text displayed on the button. | | onPaymentComplete | () => void | Yes | Callback triggered when the payment is complete. | | onPaymentDataReceived | (data: { walletAddress: string, id: string }) => void | Yes | Callback triggered when payment data is received. | | onPaymentError | (error: Error) => void | Yes | Callback triggered when payment fails. | | paymentUrl | string | No | URL of the payment page. | | paymentType | "payment-link" \| "invoice" \| "recurring-payment" | No | Type of payment (used to auto-generate paymentUrl). | | paymentId | string | No | ID of the payment (used to auto-generate paymentUrl). | | buttonStyle | Partial<CSSStyleDeclaration> | No | Custom styles for the button. |

API Methods

• updateButtonText(text: string): void: Updates the button's text.
• updateButtonStyle(styles: Partial<CSSStyleDeclaration>): void: Updates the button's styles.
• destroy(): void: Removes the button from the DOM and cleans up event listeners.

Development Notes

Common Issues

• TypeScript Errors: Ensure your tsconfig.json includes:

  {
    "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
  }

• JSX Error: If you see errors about JSX not being set, make sure your tsconfig.json has:

  {
    "jsx": "react-jsx"
  }

Why vite/client?

If you see references to vite/client in the project, it's likely because your Vue component requires specific module resolution for .vue files. Ensure you include it in tsconfig.json under types:

{
  "compilerOptions": {
    "types": ["vite/client"]
  }
}

License

This library is licensed under the MIT License. See the LICENSE file for details.