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

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, and Payment Link, 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:

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:

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 Payment Link, you will be able to provide:

A fixed or dynamic HTTPS link.

Accepts flow variable, ideal when the backend generates a personalized link for each customer. Example: {{paymentLink}}.

Currently, three 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.

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.

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 30 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.

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 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. 😃