Pagaloop Pay

1. Import the script

Include the Pagaloop Pay JavaScript file in your website:

<script src="https://develop.d2savi8su7bxp1.amplifyapp.com/pagaloop-pay.js"></script>

2. Implementation options

There are two different ways to implement the component. You only need to choose ONE of these options, depending on what best fits your project:

Option 1: Declarative implementation with HTML

Add the component directly in your HTML using a payment link ID:

<!-- Declarative implementation with HTML -->
<payment-form token="YOUR_LINK_ID" </payment-form>

Option 2: Dynamic implementation with JavaScript

Alternatively, create the component using JavaScript:

// Dynamic component creation
const paymentForm = document.createElement('payment-form');
paymentForm.setAttribute('token', 'YOUR_LINK_ID');

// Add to desired container
document.getElementById('paymentContainer').appendChild(paymentForm);

3. Listen to events

The component emits events that you can capture to process the payment result:

// Successful payment event
paymentForm.addEventListener('payment-success', (e) => {
  console.log('Payment successful:', e.detail);
  // e.detail contains information like idUniqueTransaction, status, etc.
});

// Payment error event
paymentForm.addEventListener('payment-error', (e) => {
  console.error('Payment error:', e.detail.message);
});

// Event when user closes the form
paymentForm.addEventListener('payment-form-close', () => {
  console.log('Form closed by user');
});

4. Available attributes

The component accepts the following attributes: