Creating Payment Flows in Studio with the Payment Block – Blip | Blip Help

Important: Currently, the WhatsApp payment model is available only for Brazil and India.

Available Channel: WhatsApp

Introduction: Speeding Up Your Sales

Blip's Payment Block is the platform's native solution for requesting payments efficiently. It allows you to configure payment methods such as PIX Copy and Paste, Boleto, Payment Link and Checkout in addition to detailing the products sold, all within your flow in Blip.

What does your customer receive? Your customer receives a complete and easy-to-understand payment message on WhatsApp, containing:

Name and description of the products or services.
Exact order value.
Available payment methods.
A personalized message.

Creating and Configuring the Payment Block

Configuring the block is a structured process in three main steps within the Studio:

1. Add the Payment Block

Access your bot's Studio (the flow editor).
Click New block and select the Payment option.
The block will be inserted into the flow and must be connected at a logical point in the journey.

2. Configure the Payment Method

Important: The payment block only organizes and displays the payment options in the conversation. The generation and processing of the charge are the responsibility of the acquirer or payment institution used. You can use your own providers or integrate Blip solutions, while the block only presents the information within the conversational journey.

In this tab, you define the payment options that will be offered to the customer.

Payment method: choose between PIX Copy and Paste, Boleto, or Payment Link.

During configuration, you can use both static values and flow variables.

The use of variables is especially recommended in scenarios where payment data is generated dynamically via API in a previous block (for example, through an HTTP call).

This ensures greater flexibility, automation, and integration with external systems, avoiding the need for fixed values in the flow.

PIX Copy and Paste Configuration

If the selected method is PIX, the following fields will be displayed:

Provider: field that indicates the provider responsible for the transaction. In the case of PIX Copy and Paste, the provider configured by the user themselves is used; after selecting the own provider option, the other fields will become visible.
Business name: name that will be displayed to the customer (e.g., Blip Payments) or a variable (e.g., {{storeName}}).
PIX key type: select CPF, CNPJ, Email, Phone, or Random key; this is a fixed field and cannot be parameterized via flow variable. The selection must be made manually in the block configuration.
PIX key value: Enter the data corresponding to the type (Remember: if it is CPF or CNPJ, it must be valid) or use a variable.
PIX Copy and Paste code: enter the Copy and Paste code generated by your bank manually or use a flow variable if the code is generated dynamically.

Boleto Configuration

If the selected method is Boleto, the following fields will be displayed after selecting the provider:

Boleto code: provide the barcode of the boleto.

This field can be filled in manually or through a flow variable, if the boleto is generated dynamically (e.g.: {{codeBoleto}}).

Payment Link Configuration

When selecting the "Payment Link" option, two provider alternatives will be displayed, as illustrated in the following example:

To configure the Payment Link, you must select the Own Provider option, and then the following field will be displayed:

HTTPS Link: A fixed or dynamic HTTPS link.

It accepts flow variables, ideal when the backend generates a personalized link for each customer. Example: {{paymentLink}}.

Checkout Configuration

To configure Checkout, select the "Payment Link" method and then choose "Checkout" as the provider.

When selecting Checkout, specific fields for configuration will be displayed:

Company

Select the company. If there is no active company linked to your contract, you can request activation directly in the payment block.

Automatic payment update (optional)

In this section, you configure automatic messages according to the status returned by the payment:

Time to send notification:

Defines how long the system will wait before checking if the payment has been completed.

It is not the expiration time of the payment link; it is only the time the flow waits before querying the transaction status.

Ex: If you configure 1 minute, the flow will wait for this period after generating the payment link. At the end of the configured time, or if the user interacts again before that, the transaction status check will be performed and the corresponding message will be sent.

The maximum configurable time for the notification sending time is 10 minutes. Ideally, this time should be shorter than the expiration time of the payment link.

Payment approved message:

Ex: “Payment successfully approved! Your order is already being processed.”

Payment declined message:

Ex: “Oops! Your payment was declined. Check the details and try again.”

Payment in processing message:

Ex: “We are processing your payment. You will receive confirmation in a few moments.”

Payment link created message:

Ex: “Use the link above to finalize the payment.”

These messages make the experience clearer and more transparent for the customer.

Currently, four payment methods are available for configuration and it is possible to enable up to two methods in the same block, allowing the customer to choose the most convenient option at the time of purchase.

Detail: if the first payment method is configured as a Payment Link, it is not possible to configure another Payment Link as the second method in the same payment block.

3. Configure product details

Access the Configuration tab and complete:

Product type: choose whether it is Digital or Physical.

Charge number: can be a fixed value (e.g.: 123456) or a variable that pulls the product ID (e.g.: {{selectedProduct@retailer_id}}).

It must be a value with a maximum of 35 characters, and can contain only letters, numbers, and hyphens.

Another possibility is to generate a Script that returns a random 5-digit number (between 10000 and 99999) in a previous block, as in the example below:

function run() {
return Math.floor(10000 + Math.random() * 90000);
}

Product specifications: provide the JSON Array in the format below:

[
  {
    "retailer_id": "123456",
    "name": "Item name",
    "amount": {
      "value": 1000,
      "offset": 100
    },
    "quantity": 1
  }
]

Within the field related to the product, it must return exactly in this format so that the payment block interprets the data correctly.

To generate this JSON, a script can be used (executed in the block prior to the payment block) and the script's output variable should be provided, or the JSON Array can be entered directly into the field. Generally, the script path is used, especially when the selection of products and prices is dynamic.

It is permitted to provide more than one item in this Array, as long as the JSON formatting for each item is respected.

Adding multiple products dynamically

When the user can select more than one product throughout the conversation, an alternative is to use an accumulator script executed at each selection that keeps the product array updated between interactions. The logic works as follows:

At each selection, the script checks if the product already exists in the array by name.
If it already exists, it increments the quantity (quantity).
If it is new, it adds the item to the array with quantity: 1.

function run(selectedMenuOption, selectedProducts) {
    try {
        selectedMenuOption = JSON.parse(selectedMenuOption);
        
        let currentProducts = [];
        if (selectedProducts) {
            const parsed = typeof selectedProducts === "string" ? JSON.parse(selectedProducts) : selectedProducts;
            currentProducts = Array.isArray(parsed) ? parsed : parsed.products || [];
        }
        
        const existingProductIndex = currentProducts.findIndex(product => 
            product.name === selectedMenuOption.name
        );
        
        const productMap = {
            "id_produto_1": {
                retailer_id: "123456",
                name: "Item name 1",
                description: "Item description 1",
                price: "10.00",
                amount: { value: 1000, offset: 100 }
            },
            "id_produto_2": {
                retailer_id: "789012",
                name: "Item name 2",
                description: "Item description 2",
                price: "20.00",
                amount: { value: 2000, offset: 100 }
            },
            "id_produto_3": {
                retailer_id: "345678",
                name: "Item name 3",
                description: "Item description 3",
                price: "30.00",
                amount: { value: 3000, offset: 100 }
            }
        };


        if (existingProductIndex !== -1) {
            currentProducts[existingProductIndex].quantity += 1;
        } else {
            const product = productMap[selectedMenuOption.id];
            if (product) {
                currentProducts.push({ ...product, quantity: 1 });
            }
        }
        
        const totalValue = currentProducts.reduce((total, product) => {
            const price = parseFloat(product.price) || 0;
            const quantity = parseInt(product.quantity) || 0;
            return total + (price * quantity);
        }, 0);


        return {
            products: currentProducts,
            totalValue: totalValue.toFixed(2)  // ex.: "10.00"
        };
        
    } catch (error) {
        return {
            unexpectedAnswer: true,
            error: error.message
        };
    }
}

At the end of the selection flow, the script's output variable (e.g., {{products}}) can be referenced directly in the product specifications field in the payment block as follows:

Main text: message displayed along with the payment, for example:

“Finalize your order! Make the payment via Pix copy and paste using your bank's app.”
Footer (optional): insert an additional text, usually a short guidance or alert text such as: “Payment expires in 10 minutes,” or “Secure payment.”

Block Exit Conditions

Upon reaching this block in the flow, your customer will instantly receive the payment message with all associated information if everything is configured correctly. The payment block does not have the option to wait for input; therefore, when passing through this block, your customer will be automatically directed to the next block according to its exit conditions. In the exit conditions, it is possible to define which block the customer will be directed to if there is an error and if there is success.

When all configurations are correct and the exit is directed as success, the flow will proceed normally to the next block, where you can handle business rules, such as payment confirmation via API.

This is the standard behavior of the Payment Block.

The only exception occurs when the selected method is Checkout with the Automatic payment update enabled. In this case, the flow will wait for the configured time to verify the payment status before proceeding to the next block.

What are you building here?

It is not just a flow. You are building:

An experience
A real sales channel
A reliable process
A conversion point within WhatsApp

When well-configured, the Payment Block is not technical, it is strategic.

What does your customer see on WhatsApp?

After the Payment Block is triggered, WhatsApp automatically sends an official billing card, standardized and professional. It is not just a link; it is a structured component within the conversation.

The visual structure of the card remains the same across all payment methods. What changes is only the action button displayed to the customer and the payment method brand.

The image above demonstrates an illustrative scenario of the Payment Block application in an automated flow. Using the Pix Copy and Paste and Payment Link options as payment methods.

The Payment Block transforms the conversational flow into a real sales channel, offering a professional and secure interface.

1. Billing Card Visualization

As soon as the customer reaches the Payment Block in the flow, they receive an official billing card standardized by WhatsApp.

Visible Information: The card displays the name and description of the products, the exact value of the order, the available payment methods, and a personalized message.
Action Button: Depending on the configuration, the customer will see buttons such as "Copy Pix code", "Copy boleto code", or "Open payment link".
Order Summary: By clicking on the details, the customer views a structured list with items (e.g., Blip Pen, Magic Cup), quantities, and the total value (e.g., R$ 10.00).

2. Identification and Payment Data (Web Checkout)

By clicking on "Open payment link" (in the case of the Checkout method), the user is directed to a secure page outside of WhatsApp:

Identification: The customer fills in basic personal data, such as first name, last name, CPF, email, and phone number, to ensure the security of the transaction.
Method Selection: The user chooses the specific method, such as Credit Card, where they enter the card details (number, expiration date, CVV) and define the installment plan.
Billing Address: For greater security, ZIP code (CEP) and full address details are requested.
Save card for future purchases: By checking this option, your customer will be able to securely store their card details and use them for future purchases without having to fill them in again.

3. Confirmation and Automatic Return

The distinguishing feature of the Checkout method is the real-time status integration with the conversation.

Success Screen: After processing, a screen displays "Payment completed successfully!", with date, time, and the "Back to conversation" button.

Update on WhatsApp: If the Automatic payment update is enabled, the system waits for the configured time (up to 10 minutes) and sends an automatic confirmation message (e.g., "Payment successfully approved!") directly in the chat.
Exception Handling: If the link expires, the user cannot reuse the same checkout link, returning an expired link notice.

4. One-click purchase

On the next purchase, your customer can use the saved card and complete the payment with just one click, without leaving WhatsApp.

The One-click purchase flow enhances convenience. By selecting a previously saved card, the transaction is completed instantly within the WhatsApp interface itself, without the need to re-enter data or navigate to an external page.

However, flexibility is maintained. If the customer wishes to use a new card or a different payment method, they simply select the "Other method" option. Upon doing so, the user is promptly redirected to the Web Checkout outside of WhatsApp, allowing them to enter new credit card information and proceed with the purchase securely, keeping the journey fluid.

Note:

In this model, it is possible to visualize the complete behavior of the journey, including the automatic return of the transaction status directly in the conversation, with payment confirmation integrated into the experience.

It is important to emphasize that this automatic payment update occurs exclusively when the method used is Checkout. In integrations with external providers, there is no automatic update of the transaction status within the chat.

The conversational chat architecture is fully adaptable to your strategy: you define the pace of the conversation, the tone of the interaction, and the ideal moment for conversion, keeping the payment as a fluid and natural part of the experience.

For more information, check out the discussion on this topic in our community or watch the videos on our channel. 😃