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:

1. List of payment methods supported by Tazapay
2. Collection Methods API - This returns the Tazapay name and other properties of each payment method
3. Checkout API

Sample cURL

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": "[e-mail]",
    "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.

JSON

{
  "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": "[e-mail]",
      "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:

1. List of checkout events
2. List of payment attempt events
3. 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.