Web Checkout
Accepting Payments via Web Checkout
Our Web Checkout integration option is best used for accepting payments through websites, but can also be used in mobile applications as a webview. To use our Web Checkout you simply need to generate a payment link and redirect your users there so they can complete payment. Below is an example of how to generate a payment link using our API:
Before you begin, make sure you understand the difference between Test and Live Mode as this will affect how your integration works.
Security and Compliance
Our Web Checkout solution is built with security as a priority, following guidelines from:
- Mozilla's Web Security Guidelines
- OWASP's Secure Coding Practices
- W3C's Payment Request API Standards
For more advanced integration needs, you might want to consider our Direct API which provides more control over the payment process.
One-Time Payment
Use this endpoint to generate a payment link for a single, one-time payment transaction.
End point: https://gateway.yallapaysudan.com/api/v1/gateway/generatePaymentLinkHTTP Method: POST
Authorization: Pass your authorization token (Which you can find in the dashboard) as a bearer token in the header.
Request Parameters:| Parameter | Description | Required/Optional |
|---|---|---|
| amount | The amount to be debited from the customers account | Required |
| paymentSuccessfulRedirectUrl | The URL used to redirect the customer after a successful payment | Required (If not provided will default to the value provided in the dashboard) |
| paymentFailedRedirectUrl | The URL used to redirect the customer after a failed payment | Required (If not provided will default to the value provided in the dashboard) |
| clientReferenceId | A unique ID that identifies the transaction on your backend. Will be used in the webhook request to update payment status. | Required |
| description | A description of the payment to display to the customer at checkout | Optional |
| commissionPaidByCustomer | When set to true, the gateway commission fees are passed on to the customer. When false (default), you (the merchant) pay the commission fees. | Optional (default: false) |
Header:
{
"Authorization": "Bearer <Authorization-Token>"
}
Body:
{
"amount": 15,
"paymentSuccessfulRedirectUrl": "https://your-successful-redirect-url",
"paymentFailedRedirectUrl": "https://your-failed-redirect-url",
"clientReferenceId": "7ff632fc-3e5b-4be5-b2a0-dbe2600e7789",
"description": "Test payment",
"commissionPaidByCustomer": false // Optional: pass commission fees to customer (default: false)
}{
"responseCode": "0",
"responseMessage": "Success",
"currentDate": "2025-06-22",
"currentTime": "13:25:20",
"paymentUrl": "https://gateway.yallapaysudan.com/checkout/web/01JXF7HSW4P9FCG9YN6Z"
}Subscription Payment
Use this endpoint to generate a payment link for recurring subscription payments.
End point: https://gateway.yallapaysudan.com/api/v1/gateway/generateSubscriptionPaymentLinkHTTP Method: POST
Authorization: Pass your authorization token (Which you can find in the dashboard) as a bearer token in the header.
Request Parameters:| Parameter | Description | Required/Optional |
|---|---|---|
| amount | The amount to be debited from the customers account | Required |
| paymentSuccessfulRedirectUrl | The URL used to redirect the customer after a successful payment | Required (If not provided will default to the value provided in the dashboard) |
| paymentFailedRedirectUrl | The URL used to redirect the customer after a failed payment | Required (If not provided will default to the value provided in the dashboard) |
| clientReferenceId | A unique ID that identifies the transaction on your backend. Will be used in the webhook request to update payment status. | Required |
| description | A description of the payment to display to the customer at checkout | Optional |
| commissionPaidByCustomer | When set to true, the gateway commission fees are passed on to the customer. When false (default), you (the merchant) pay the commission fees. | Optional (default: false) |
| subscriptionConfiguration | Object to configure recurring subscription payments | Required |
| subscriptionConfiguration key | Description | Required/Optional |
|---|---|---|
| interval | Frequency unit for billing (DAY, MONTH, YEAR) | Required |
| intervalCycle | Number of intervals between charges (e.g., 2 means every 2 months) | Required |
| totalCycles | Total number of billing cycles before auto-cancel. If omitted, it never ends. | Optional |
Header:
{
"Authorization": "Bearer <Authorization-Token>"
}
Body:
{
"amount": 15,
"paymentSuccessfulRedirectUrl": "https://your-successful-redirect-url",
"paymentFailedRedirectUrl": "https://your-failed-redirect-url",
"clientReferenceId": "7ff632fc-3e5b-4be5-b2a0-dbe2600e7789",
"description": "Test subscription payment",
"commissionPaidByCustomer": false, // Optional: pass commission fees to customer (default: false)
"subscriptionConfiguration": {
"interval": "MONTH", // Accepted values are DAY, MONTH, YEAR
"intervalCycle": "2", // Every 2 intervals (e.g., months or days)
"totalCycles": "10" // Optional. This is the total number of recurring payments to be made. If left null then the default is infinite (never ending subscription)
}
}- subscriptionConfiguration is required for subscription payments.
- Field requirements inside subscriptionConfiguration:
- interval: Required (Accepted values: DAY, MONTH, YEAR)
- intervalCycle: Required (e.g., 2 means every 2 intervals)
- totalCycles: Optional — if omitted, the subscription continues indefinitely
{
"responseCode": "0",
"responseMessage": "Success",
"currentDate": "2025-06-22",
"currentTime": "13:25:20",
"paymentUrl": "https://gateway.yallapaysudan.com/checkout/web/01JXF7HSW4P9FCG9YN6Z"
}Best Practices for Web Checkout
When implementing our Web Checkout, consider these best practices:
- Secure Redirects: Follow Google's Web Fundamentals guide on Navigation and Redirects to ensure secure redirects.
- User Experience: Design your payment flow according to Nielsen Norman Group's checkout usability guidelines.
- Mobile Optimization: Ensure your checkout process is mobile-friendly as recommended by Google's Mobile-Friendly Test.
For a comprehensive overview of how our payment system works, check out our System Overview documentation.
Related Documentation
Live Demo Environments
Explore ready-made demo environments to understand YallaPay's payment flow from checkout to completion.
System Overview
Understand YallaPay's payment system architecture and how different components interact. Learn about our payment flow, security measures, and integration options.
Redirects and Webhooks
Learn how to configure redirects and webhooks for seamless payment integration. Set up success/failure redirect URLs and secure webhook notifications for real-time payment status updates.