Straight forward and good looking credit-card form built using vue-paystack plugin.
Code:
<paystack
:amount="amount"
:email="email"
:paystackkey="paystackkey"
:reference="reference"
:callback="callback"
:close="close"
:currency="'NGN'"
:embed="false"
class="btn btn-primary mb-3 active"
v-else
>
<span class="ps-3"> Make Payment </span>
<span class="fas fa-arrow-right ms-3"></span>
</paystack>
- Form design (inspired by: Bootstrap 5 Payment Form, [Bootstrap])
- Form is fully responsive and scalable
- Works on both Android and iOS
Property | Type | Description |
---|---|---|
amount | String | Amount (in the lowest currency value - kobo, pesewas or cent) you are debiting customer |
String | ||
paystackkey | Number | Your public key from Paystack. Use test key for test mode and live key for live mode |
reference | String | Unique case sensitive transaction reference. Only -,., =and alphanumeric characters allowed. If you do not pass this parameter, Paystack will generate a unique reference for you. |
callback | Function | Function that runs when payment is successful. This should ideally be a script that uses the verify endpoint on the Paystack API to check the status of the transaction. |
close | Function | Javascript function that is called if the customer closes the payment window instead of making a payment. |
currency | String | Currency charge should be performed in. Allowed values are: NGN , GHS , ZAR or USD It defaults to your integration currency. |
embed | Boolean | Determines if it should be embeded within your template or should be a pop up. Default is true |
|
- To know more about this service check out paystack