Bank3D Inline
Bank3D Inline JS, provides you a secure, swift, easy and convenient payment flow for both web and mobile users.
The fact that integrating it can be done with just a simple line of code, makes it not only the easiest way to start receiving payments, but also the fastest. Payments can begin and end on the same page, hence maximizing time.
Below are code snippet that shows you how to easily implement Bank3D's inline JS. Just copy and add to your page
<form>
<script src="https://parkwaycdnstorage.blob.core.windows.net/bank3d/bank3d.min.js"> </script>
<button type="button" onclick="payWithBank3D()"> Pay Now </button>
</form>
<script>
const payment = Bank3D.createPayment({
"reference": "wl8224", // generates a pseudo-unique reference. Please replace with a reference you generated.
"currencyCode": "NGN",
"merchantKey": "PayzoneAPP", // use your test or live merchant key
"amount": 5000000,
"email": "[email protected]",
"phone": "0801234567889",
"color": "#aa0066",
"mode": "test",
"onReady": function() {
// The popup's iframe has loaded and it's preloader is visible
// Use this to stop you own custom preloader
},
"onClose": function() {
// The user closed the popup or transaction was not completed
},
"callback": function(reference) {
// Transaction was completed and it was successfull.
// This is the stage where it's necessary to verify the payment using "reference" argument
}
});
payment.open();
</script>
Note
Make sure to not reuse a reference that has been previously used.
Methods of receiving payments
- Transfer: a user selects the transfer option, clicks on continue confirming the amount to be paid and then makes a transfer to the account number specified on the modal before it expires. Below is a pictorial example;
- Bank: users are provided with the option of entering their account details such as bank name and account number to complete payment. Simply select the bank option, select bank name and enter account number, and the click on pay.
- Card: a user enters card details and PIN and then an OTP is sent to the users' phone number that is connected to the account. This transaction could either be end as; success, incorrect PIN or issuer or switch inoperative.
When a user inputs their card details, Bank3D validates the card, charges the card, and then passes a response object (which contains the status of the transaction including reference) to your callback function.
NOTEBefore you give value to the customer, please make a server-side call to our verification endpoint to confirm the status and properties of the transaction.
Configuration Parameters
'true' indicates required parameters.
Parameter | Required | Description |
---|---|---|
amount | true | Amount to be charged in kobo. |
colour | false | You get to choose a theme color for the payment modal that reflects your brand. |
currencyCode | true | Currency charge should be performed in Defaults to NGN. |
false | Customer email address. | |
marchantKey | true | Your merchant key from Bank3D. Use test key for test mode and live key for live mode. |
phone | false | Phone number of customer. |
reference | false | Your unique transaction reference. |
Updated over 3 years ago