How it works

Our checkout is flexible, which is why it works in several different ways. There are a few flows you can follow.

Flow 1:

In this flow, the user completes the payment end-to-end by choosing the amount and payment method, while our checkout handles the entire payment creation process. Webhooks are sent as usual to the endpoints registered via the developer portal (or API). Simply send the checkout link to the user, and they can complete the entire payment process.

Additional Information:

• It is possible to send redirectUrl via query parameters. If this information is provided, a button will appear at the end of the flow, and when clicked, it will redirect the user to the specified URL. Ex: checkout.sqala.tech?redirectUrl=sqala.tech
• It is possible to pass the code parameter via query parameters, which represents your system's internal code. This way, the user initiates the flow, but you can maintain greater internal control.
  Ex: checkout.sqala.tech?code=YOUR_INTERNAL_CODE
• It is possible to pass the amount to be paid via query parameters. In this case, the user is directed either to the payment method selection screen (if more than one method is active) or directly to the payment flow (if only one payment method is active). Note that the amount value is always provided in cents. Ex: checkout.sqala.tech?amount=1000
• You can combine both the code and amount parameters. Ex: checkout.sqala.tech?amount=1000&code=YOUR_INTERNAL_CODE

Flow 2:

In this flow, the payment is generated using the API, and after the payment is created, the user is redirected to the checkout. This flow is used to reduce your company's development effort, as the entire UI/UX is already ready. Simply redirect the user to your checkout link /payment?id=PAYMENT_ID.

Scenarios:

• If the payment is within the expiration period: The user will be directed to the screen corresponding to the payment type. For example, with Pix, the user will be redirected to the screen displaying the QR Code / Copy-and-Paste option.
• If the payment has already been made: The user will be redirected to a success screen containing the deposit receipt.
• If the payment is expired or the ID does not exist: The user will be redirected to an error screen.

Example with Pix QR Code:

import fetch from 'node-fetch'

fetch('https://api.sqala.tech/core/v1/pix-qrcode-payments', {
  headers: {
    'Authorization': 'Bearer ' + 'YOUR_ACCESS_TOKEN',
    'Content-Type': 'application/json'
  },
  method: 'POST',
  body: JSON.stringify({
    amount: 990 // amount in cents
  })
})
  .then(response => response.json())
  .then(data => {
    const paymentUrl = `https://checkout.sqala.tech/payment?id=${data.id}&?redirectUrl=sqala.tech`
    console.log(`Redirecting to: ${paymentUrl}`)
  })
  .catch(error => console.error('Fetch error:', error))

Extra:

You can customize your checkout on every render if needed. This can be done using metadata fields.

Available metadata fields:

metadata: {
  CHECKOUT_TITLE: string
  CHECKOUT_LOGO_URL: string
  CHECKOUT_FAVICON_URL: string 
  CHECKOUT_REDIRECT_URL: string 
  CHECKOUT_PRIMARY_COLOR: string
 };