List the payment methods on your own page
With Tazapay, you can also choose to control the payment method selection experience for your customers. You can display the payment methods on your application and only redirect to Tazapay after the customer has selected a payment method.
Integration Steps
Step 1: Set up your Tazapay account
Before integrating Tazapay Checkout, ensure you have a Tazapay account. Sign up if you haven't already.
Step 2: Create a Checkout Session
The Checkout Session is the core concept in Tazapay Checkout. It contains all the details about the transaction, such as the amount, currency, customer details and the payment methods.
Specify the payment method the customer selected in the field payment_methods
.
Payment Method Nomenclature
Each payment method is represented by a unique string in Tazapay. The name for a payment method is the combination of the payment method name and the currency in which the customer is charged. For example, the name for Paynow in Singapore is
paynow_sgd
Related Links:
- List of payment methods supported by Tazapay
- Collection Methods API - This returns the Tazapay name and other properties of each payment method
- Checkout API
Sample cURL
curl --request POST \
--url https://service-sandbox.tazapay.com/v3/checkout \
--header 'accept: application/json' \
--header 'authorization: Basic YWtfdGVzaF9ZTFNVQUUwVjRCSEpIOFg0ODZPQzpza190ZXN0X0hNOEM3SEVSV1BmODVPZnFCMXhLTUJJMWlENnVWYTEyUWN2VE5ZeVJhSHhRZjVTOW9pZUtoOVZzejg3cnhtSEpaSlcyTHdVc0NSY2RWbUR0d0U4Q0VkdWNIUXRnNVQzVjl1NkltQWludkdiMjhWeXhTVVlsTTFMWWllbU80THFt' \
--header 'content-type: application/json' \
--data '{
"customer_details": {
"name": "Andrea Lark",
"email": "[email protected]",
"country": "VN"
},
"invoice_currency": "USD",
"amount": 10000,
"transaction_description": "1 x T-shirt",
"payment_methods":["bank_push_vnd"]
}'
Step 3: Redirect customers to Tazapay checkout
Calling the checkout API in Step 2 provides the following response. Redirect the customer to Tazapay's hosted payment page using the URL.
{
"status": "success",
"message": "",
"data": {
"amount": 10000,
"amount_paid": 0,
"billing_details": null,
"cancel_url": "",
"created_at": "2024-07-19T10:11:07.832914998Z",
"customer": "cus_cq8i3c4j2pdpn2r2lah0",
"customer_details": {
"country": "VN",
"email": "[email protected]",
"name": "Andrea Lark",
"phone": {
"calling_code": "",
"number": ""
}
},
"customer_fee_percentage": 0,
"expires_at": null,
"holding_currency": "USD",
"id": "chk_cqd3nep5ct0u7aakeco0",
"invoice_currency": "USD",
"items": [],
"latest_payment_attempt": "",
"metadata": null,
"object": "checkout",
"paid_in_excess": false,
"partially_paid": false,
"payin": "chk_cqd3nep5ct0u7aakeco0",
"payment_attempts": [],
"payment_methods": [
"bank_push_vnd"
],
"payment_status": "unpaid",
"payment_status_description": "",
"reference_id": "",
"remove_payment_methods": [],
"shipping_details": null,
"statement_descriptor": "",
"status": "active",
"success_url": "",
"token": "tGxhgHg5USrT3Gizxu-aL-GFF5FhyaCT4KHyXQXcxZE=",
"transaction_data": [],
"transaction_description": "1 x T-shirt",
"transaction_documents": [],
"url": "https://checkout-sandbox.tazapay.com/transaction/tGxhgHg5USrT3Gizxu-aL-GFF5FhyaCT4KHyXQXcxZE=",
"webhook_url": ""
}
}
Step 4: Handle post-payment events
Tazapay sends events to your webhook endpoint to notify you about changes in the Checkout Session status. Set up a webhook endpoint to handle events like checkout.paid.
Related Links:
- List of checkout events
- List of payment attempt events
- Configuring your webhook endpoint on the Tazapay dashboard
Customisation and Configuration
You can configure the appearance and behaviour of the Checkout Page
Logo
You can add your logo to the Checkout Page
Related Guide: Adding logo to the Checkout Page
Transaction Description
You can add a transaction description to display to the customer on the Checkout Page. This is typically the description of the goods / services the merchant is paying for. Pass appropriate values in the transaction_description
field in the checkout API.
Updated about 2 months ago