> ## Documentation Index
> Fetch the complete documentation index at: https://swwipefinancialserviceslimited.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Accepting Payments

> you can use our client Javascript library, to accept payment from customers

## SwwipePay

SwwipePay library provides a simple and convenient payment flow for web. It can be integrated in easy steps, making it the easiest way to start accepting payments.
you can make use of the SwwipePay CDN.

```
https://parkwaycdnstorage.blob.core.windows.net/bank3d/bank3d.min.js

```

### Collecting Customer Information

To initialize the transaction, you need to pass information such as `email`, `amount`, transaction `reference`, etc.
The key, `email` and `amount` parameters are the only required parameters. The table below lists the parameters that you can pass when initializing a transaction.

| Param          | Required | Description                                                                                                                                                                    |
| :------------- | :------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `merchantKey`  | Yes      | Your public key from PaywithSwwipe. Use test key for test mode and live key for live mode                                                                                      |
| `email`        | Yes      | Email address of customer                                                                                                                                                      |
| `amount`       | Yes      | Amount(in  the lowest currency value -kobo) you are debiting customer.                                                                                                         |
| reference      | Yes      | Unique case sensitive transaction reference. If you do not pass this parameter, PaywithSwwipe will generate a unique reference for you.                                        |
| `currencyCode` | No       | Currency charge should be performed in. Allowed value is: `NGN`                                                                                                                |
| `callback`     | No       | Function that runs when a payment is successful. This should ideally be a script that uses the verify endpoint on the PaywithSwwipe API to check the status of the transaction |
| `onClose`      | No       | JavaScript function that is called if the customer closes the payment window instead of making payment.                                                                        |

The customer information can be retrieved from a database if you already have it stored, or from a form like in the example below:

```html index.html theme={null}
 <form id="paymentForm">

  <div class="form-group">

    <label for="email">Email Address</label>

    <input type="email" id="email-address" required />

  </div>

  <div class="form-group">

    <label for="amount">Amount</label>

    <input type="tel" id="amount" required />

  </div>

  <div class="form-group">

    <label for="first-name">First Name</label>

    <input type="text" id="first-name" />

  </div>

  <div class="form-group">

    <label for="last-name">Last Name</label>

    <input type="text" id="last-name" />

  </div>

  <div class="form-submit">

    <button type="submit" onclick="payWithSwwipe()"> Pay </button>

  </div>

</form>

<script src="https://parkwaycdnstorage.blob.core.windows.net/bank3d/bank3d.min.js"></script>
```

To use SwwipePay, you simply call the createPayment method on the SwwipePay library passing in the payment options object. This returns an instance of a payment.
To open the SwwipePay window, call the open method on the payment object

```js index.js  theme={null}
// Create the payment instance

const paymentForm = document.getElementById('paymentForm');

paymentForm.addEventListener("submit", payWithSwwipe, false);

function payWithSwwipe(e) {

  e.preventDefault();

  // Get form data
  const email = document.getElementById('email-address').value;
  const amount = document.getElementById('amount').value;
  const firstName = document.getElementById('first-name').value;
  const lastName = document.getElementById('last-name').value;

  // validate form data




  const payment = Netpay.createPayment({
  amount: parseInt(amount) * 100, // Convert to kobo
    reference: generateReference(),
    email: email,
    merchantKey: 'Your-Merchant-Key',
    metadata: {
      firstName: firstName,
      lastName: lastName
    },
    callback: function(response) {
      verifyPayment(response.reference);
    },
    onClose: function() {
      alert('Payment was cancelled');
    }
  });
  
  payment.open();

}

function generateReference() {
  return 'txn_' + Date.now() + '_' + Math.random().toString(36).slice(2, 11);
}
 

```

In the sample code above, notice how:

1. The `pay` button has been tied to an `onClick` function called `payWithSwwipe`.
   This is the action that causes SwwipePay library popup to load.

### Important Notes

1. the `merchantKey` field here takes your PaywithSwwipe ***public***key.
2. The `amount` field has to be converted to the lowest currency unit by multiplying the value by `100` so if you wanted to charge\*\* N50\*\*, you have to multiply\*\* 50 \* 100\*\* and pass **5000** in the amount field.
3. It's ideal to generate a unique `reference` from your system for every transaction to avoid duplicate attempts.
4. The `callback` method is called when payment has been completed successfully on the PaywithSwwipe checkout. See the next section to see how to hand the callback.
5. the `onClose` method is called if the user closes the modal without completing payment.

### Handling the callback method

The callback method is triggered when the transaction is completed.  This is where you verify the transaction status.

<Tip>
  Helpful Tip
  To verify the transaction, you have to set up a route page that you pass the transaction reference to From your server,
  you call the PaywithSwwipe verify endpoint to confirm the status of the transaction. You should then return the response to your fronted.
</Tip>

### Verify the transaction status

After payment is made, the next step is to confirm the status of the transaction. A  transaction can be confirmed by the verify transactions endpoint.
To verify the transaction, you must set up a route or page on your server that you pass the reference to. Then from your server, you call the PaywithSwwipe verify endpoint to confirm the status of the transaction, and response is returned to your fronted.
The following parameters are needed to confirm if you should deliver value to your customer or not:

| Parameter     | Description                                                                                                              |
| :------------ | :----------------------------------------------------------------------------------------------------------------------- |
| `data.status` | This indicates if the payment is successful or not                                                                       |
| `data.amount` | This indicates the price of your product or service in the lower denomination (e.g for NGN 50, you'd see 5000 and so on) |

<Warning>
  > 🚧 Verify Amount
  >
  > When verifying the status of a transaction, you should also verify the amount to ensure it matches the value of the service you are delivering. If the amount doesn't match, do not deliver value to the customer.
</Warning>

### Security Best Practices

<Warning>
  **Never expose your secret key on the frontend**. Always keep it on your server.
</Warning>

1. **Use HTTPS** for all payment pages
2. **Validate amounts** on both frontend and backend
3. **Store transaction logs** for audit purposes
4. **Implement rate limiting** on verification endpoints
5. **Use webhook endpoints** for reliable payment notifications