Accept Payments
In a nutshell
To accept a payment, create a transaction using our inline checkout, libraries, payment link,or our SDKs.
SPay provides a simple way to integrate a checkout feature into your existing products. This is the fastest and easiest way to get paid online with minimal code required for integration.
Some of the benefits of using the web checkout flow are:
- Ease of integration
- Secured checkout experience
- Various payment options to enable
Payment Options
Initialise Payment
To initialise the transaction, you'll need to pass information such as email, first name, last name amount, transaction reference, etc. Email and amount are required. Here is the full list of parameters you can pass:
Payment Request Parameters
| Param | Required? | Description |
|---|---|---|
| amount | Yes | Amount you are debiting customer. NB: Amount is in major denomination - Naira) |
| currency | Yes | Currency charge should be performed in. Allowed values is: NGN. |
| reference | Yes | Merchant generated transaction reference |
| merchantCode | Yes | The Merchant's code |
| customer | Yes | Object containing customer information you want recorded with the transaction. Fields within the customer object are: firstName, lastName, phone and email. |
| firstName | Yes | Customer first name | given name |
| lastName | Yes | Customer last name | Surname |
| phone | Yes | Customer phone number |
| Yes | Customer email address | |
| callback | Yes | Function that runs when payment is completed; successful or not successful. The callback function that returns the state of a transaction. |
| onClose | No | Function that is called if the customer closes the payment window instead of making a payment. |
Payment Response Parameters
| Param | Required? | Description |
|---|---|---|
| amount | Yes | Amount customer was debited. NB: Amount is in major denomination - Naira) |
| channel | Yes | Payment channel; WEB, API, Transfer or USSD |
| date | Yes | Transaction date and time |
| meta | Yes | Object containing any extra information you want recorded with the transaction. contains fields such as the custom_field and the processor id |
| paymentMethod | Yes | Payment method; Card, Transfer or USSD |
| reference | Yes | Merchant generated transaction reference |
| status | Yes | Status of the transaction; FAILED, SUCCESS or PENDING |
| id | Yes | the unique id of the transaction at our end |
Go Live
To go live, update your merchant code to its live equivalent and switch the javascript and CSS link to live endpoint below:
Javascript: https://checkout.spaybusiness.com/pay/static/js/spay_checkout.js
CSS: https://checkout.spaybusiness.com/pay/static/css/spay_checkout.css
Sample Code
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://testcheckout.spaybusiness.com/pay/static/css/spay_checkout.css"
rel="stylesheet"
/>
<title>Document</title>
</head>
<body>
<button id="payWithSpay" onclick="payWithSpay()">Pay With Spay</button>
</body>
<script
type="text/javascript"
src="https://testcheckout.spaybusiness.com/pay/static/js/spay_checkout.js"></script>
</html>
function payWithSpay() {
var handler = {
amount: 50,
currency: "NGN",
reference: "spay-9092400324932",
merchantCode: "MCH_la8whiqumgh489i",
customer: {
firstName: "Test",
lastName: "Test",
phone: "0813575SPAY",
email: "[email protected]",
},
callback: function (response) {
console.log("do something with response");
},
onClose: function () {
console.log("do something before closing");
},
};
window.SpayCheckout.init(handler);
}
Retrieve Your Live Merchant Code
Login to your account
Toggle to Live
Click settings
Click Api Keys & Merchant Code and copy the live merchant code
Updated almost 2 years ago