Accept Payment
In a nutshell
To accept a payment, create a transaction using our API, our client Javascript library, Popup JS, Payment JS, or Widget JS. Every transaction includes a link that can be used to complete payment.
Collect customer information
To initialize the transaction, you'll need to pass information such as email, first name, last nam,e amount, transaction reference, etc. Email and amount are required. You can also pass any other additional information in the metadata object field. Here is the full list of parameters you can pass:
| Parameter | Type | Required | Description |
|---|---|---|---|
| public_key | String | Yes | This is required for authentication |
| return_url | Url | No |
URL to redirect when a transaction is completed.
Successful transactions redirects to this url after payment. {tx_ref} is returned, so you don't need to pass it with your url |
| tx_ref | String | Yes | Your transaction reference. This MUST be unique for every transaction. |
| first_name | String | Yes | This is the first_name of your customer. |
| last_name | String | Yes | This is the last_name of your customer. |
| String | Yes | This is the email address of your customer. Transaction notification will be sent to this email address. |
|
| country | String | Yes | This is the country of residence of your customer in iso2 format. |
| state | String | Yes | This is the state of residence of your customer in iso2 format. |
| city | String | Yes | This is the city of residence of your customer. |
| address | String | Yes | This is the address of your customer. |
| zip_code | String | Yes | This is the zip/postal_code of your customer. |
| currency | String | Yes | Currency to charge in. [ 'ARS', 'AUD', 'BDT', 'BWP', 'BRL', 'CAD', 'CLP', 'CNY', 'COP', 'XAF', 'DKK', 'EUR', 'GHS', 'HKD', 'INR', 'IDR', 'ILS', 'JPY', 'KES', 'KRW', 'MYR', 'MXN', 'MAD', 'NPR', 'NZD', 'NGN', 'NOK', 'PKR', 'PEN', 'PHP', 'SGD', 'ZAR', 'LKR', 'SEK', 'CHF', 'THB', 'XOF', 'TRY', 'UGX', 'GBP', 'USD', 'UYU', 'VND', 'ZMW', 'ZWG' ] |
| amount | Integer | Yes | Amount to charge the customer. |
| customization | Array | Yes | Contains title, description and logo of merchant { "title":"Title of payment", "description":"Description of payment", "logo":"https://assets.piedpiper.com/logo.png" } |
| meta | Array | No | You can pass extra information here. |
| plan_id | String | No | If present, it will be treated as a subscription. |
Popup
Just Wallet Popup provides a simple and convenient payment flow for web. It can be integrated in few easy steps, making it the easiest way to start accepting payments.
Sample Implementation
<div class="">
<div class="jw-embed"></div>
<script src="https://pay.justwallet.com/popup.js"></script>
<div id="wrapper"></div>
<button type="button" onClick="makePayment()">Pay Now</button>
<script>
const TRANSACTING_PARAMETERS = {
public_key: "pub-live-psqZeTyrOhiSvJRKlSHX5qy37xH1vr0E",
transaction_reference: Math.floor(Math.random() * 1000000000 + 1),
amount: 1000,
currency: "USD",
email: "[email protected]",
first_name: "John",
last_name: "Doe",
country: "US",
state: "DE",
city: "Middletown",
zip_code: "90000",
address: "bahamas california",
return_url: "https://google.com",
customization: {
title: 'Xfinity',
description: 'Now Payment'
}
};
function makePayment(){
justwallet.init(TRANSACTING_PARAMETERS);
}
</script>
</div>
Hosted Page
Our hosted page allows merchants to seamlessly redirect customers to the Just Wallet platform for secure payment processing. By embedding our redirect.js script in your app, your customers can complete their transactions on Just Wallet, where we handle everything from form collection to payment authorization. When we are done processing the payment, we will redirect back to you via the return_url if you have specified one.
<div class="">
<div class="jw-embed"></div>
<script src="https://pay.justwallet.com/payment.js"></script>
<div id="wrapper"></div>
<button type="button" onClick="makePayment()">Pay Now</button>
<script>
const TRANSACTING_PARAMETERS = {
public_key: "pub-live-psqZeTyrOhiSvJRKlSHX5qy37xH1vr0E",
transaction_reference: Math.floor(Math.random() * 1000000000 + 1),
amount: 1000,
currency: "USD",
email: "[email protected]",
first_name: "John",
last_name: "Doe",
country: "US",
state: "DE",
city: "Middletown",
zip_code: "90000",
address: "bahamas california",
return_url: "https://google.com",
customization: {
title: 'Xfinity',
description: 'Now Payment'
}
};
function makePayment(){
justwallet.init(TRANSACTING_PARAMETERS);
}
</script>
</div>
Widget
The widget.js script allows merchants to embed a fully customizable widget that integrates smoothly into their app's user interface. The widget is designed to be a versatile container that matches the look and feel of your site, ensuring a consistent and professional user experience for your customers.
<div class="mb-4 card card-body">
<div class="jw-embed"></div>
<script src="https://pay.justwallet.com/payment/widget.js"></script>
<script>
const TRANSACTING_PARAMETERS = {
public_key: "pub-live-psqZeTyrOhiSvJRKlSHX5qy37xH1vr0E",
transaction_reference: Math.floor(Math.random() * 1000000000 + 1),
amount: 1000,
currency: "USD",
email: "[email protected]",
first_name: "John",
last_name: "Doe",
country: "US",
state: "DE",
city: "Middletown",
zip_code: "90000",
address: "bahamas california",
return_url: "https://google.com",
plan_id: "109c5e12-b921-4f1d-bdb1-17a34697a5da",
};
justwallet.init(TRANSACTING_PARAMETERS);
</script>
</div>