In a nutshell
To accept a payment, create a transaction using our API, our client Javascript library, Popup JS, Payment JS, or HTML Checkout. Every transaction includes a link that can be used to complete payment.
Popup & Redirect JS
Transflo 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.
Collect customer information
To initialize the transaction, you'll need to pass information such as email, first name, last name 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. |
|
currency | String | Yes | Currency to charge in. [ 'EUR', 'GBP', 'USD' ] |
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. |
HTML
<form method="POST" action="https://transflo.io/ext_transfer" >
<input type="hidden" name="public_key" value="{public_key}" />
<input type="hidden" name="return_url" value="https://example.com/returnurl" />
<input type="hidden" name="tx_ref" value="4fkFJ3h1uW" />
<input type="hidden" name="amount" value="100" />
<input type="hidden" name="currency" value="USD" />
<input type="hidden" name="email" value="[email protected]" />
<input type="hidden" name="first_name" value="John" />
<input type="hidden" name="last_name" value="Doe" />
<input type="hidden" name="title" value="Test Payment" />
<input type="hidden" name="description" value="Payment Description" />
<input type="hidden" name="logo" value="https://example.com/logo.png" />
<input type="hidden" name="meta" value="" />
<input type="submit" value="submit" />
</form>
Sample Inline Redirect Implementation
You can embed Transflo on your page using our Checkout() JavaScript function. The function responds to your request in accordance with your request configurations. If you specify a callback_url in your request, the function will redirect your users to the provided callback URL when they complete the payment.
<form>
<script src="https://transflo.io/v1/payment.js"></script>
<button type="button" onClick="makePayment()">Pay Now</button>
</form>
<script>
function makePayment(){
Checkout({
"public_key": "{public_key}",
"tx_ref": '' + Math.floor((Math.random() * 1000000000) + 1),
"amount": 100,
"currency": "USD",
"return_url": "https://webhook.site",
"customer":{
"email": "[email protected]",
"first_name":"John",
"last_name":"Doe",
},
"customization": {
"title": "Test Payment",
"description": "Payment Description",
"logo": "https://assets.piedpiper.com/logo.png"
},
"meta": {
"uuid": "uuid",
"response": "Response"
}
});
}
</script>
Sample Inline Popup Implementation
You can embed Transflo on your page using our Checkout() JavaScript function. The function responds to your request in accordance with your request configurations. If you specify a callback_url in your request, the function will redirect your users to the provided callback URL when they complete the payment.
<form>
<script src="https://transflo.io/v1/popup.js"></script>
<div id="wrapper"></div>
<button type="button" onClick="makePayment()">Pay Now</button>
</form>
<script>
function makePayment(){
Checkout({
"public_key": "{public_key}",
"tx_ref": '' + Math.floor((Math.random() * 1000000000) + 1),
"amount": 100,
"currency": "USD",
"return_url": "https://webhook.site",
"customer":{
"email": "[email protected]",
"first_name":"John",
"last_name":"Doe",
},
"customization": {
"title": "Test Payment",
"description": "Payment Description",
"logo": "https://assets.piedpiper.com/logo.png"
},
"meta": {
"uuid": "uuid",
"response": "Response"
}
});
}
</script>