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

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

Available channel: WhatsApp

Introduction: Streamlining Your Sales

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

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

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

Creating and Configuring the Payments Block

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

1. Add the Payments 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 should be connected at a logical point in the journey.

2. Configure the Payment Method

Important: The payments 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.

Using variables is especially recommended in scenarios where payment data is dynamically generated 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.

Configuring PIX Copy and Paste

When selecting PIX Copy and Paste as the payment method, the Provider field will be displayed with two options:

Own provider: field indicating the provider responsible for the transaction.
Checkout: To process Pix directly through Blip’s Checkout. Using this provider requires prior contracting of the service.

Own Provider

When selecting Own Provider, the following fields 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 during 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.

Checkout

When selecting Checkout as the provider, the flow uses Blip’s payment infrastructure to generate the Copy and Paste code automatically.

Fields displayed when selecting this option:

Company: select the active merchant linked to your contract. If there is no active company, you can request activation directly in the payments block.
Automatic payment update (optional): configure automatic messages according to the status returned by the transaction:
Notification send delay: defines how long the system waits before checking if the payment was completed. This is not the PIX code validity time; it is only the time the flow waits before querying the transaction status. The maximum configurable time is 10 minutes. Ideally, this time should be less than the PIX code expiration time.
Payment approved message: example: “Payment approved successfully!”
Payment declined message: example: “Oops! Your payment was declined. Please check the details and try again.”
Payment processing message: example: “We are processing your payment. You will receive confirmation shortly.”
Payment link created message: example: “Use the code above to complete the payment via Pix.”

Attention: Automatic status update via webhook is available only when the selected provider is Blip Checkout. When using your own provider, there is no automatic transaction status update within the conversation.

Configuring the Boleto

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

Boleto code: enter the boleto barcode.

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

Configuring the Payment Link

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

For configuring the Payment Link, you must select the Own Provider option; then the following field will appear:

HTTPS Link: A fixed or dynamic HTTPS link.

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

Configuring the Checkout

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

When selecting Checkout, specific configuration fields will be displayed:

Company

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

Automatic payment update (optional)

In this section, you configure automatic messages according to the payment status returned, just like PIX Copy and Paste using the “Checkout” provider:

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.

Attention: If both payment methods enabled in the same block use the Checkout provider, the notification send delay defined in the configuration of the first method will be applied automatically and will also apply to the second method.

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

3. Configure the 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, containing only letters, numbers, and dashes.

Another possibility is to generate a Script that returns a random 5-digit number (between 10000 and 99999) in a block prior to this one, 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 product-related field, you must return exactly in this format for the payments block to correctly interpret the data.

To generate this JSON, you can use a script (executed in the block preceding the payments block) and provide the script's output variable, or enter the JSON Array directly in the field. Usually, the script approach is used, especially when product and price selections are dynamic.

It is allowed 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 during the conversation, one alternative is to use an accumulator script executed with each selection that keeps the product array updated between interactions. The logic works as follows:

With each selection, the script checks if the product already exists in the array by name.
If it 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 1 description",
                price: "10.00",
                amount: { value: 1000, offset: 100 }
            },
            "id_produto_2": {
                retailer_id: "789012",
                name: "Item name 2",
                description: "Item 2 description",
                price: "20.00",
                amount: { value: 2000, offset: 100 }
            },
            "id_produto_3": {
                retailer_id: "345678",
                name: "Item name 3",
                description: "Item 3 description",
                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)  // e.g., "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 payments block like this:

Main text: message with a maximum of 1024 characters displayed along with the payment, for example:
“Complete your order!
Make the payment via Pix copy and paste using your bank’s app.”
Footer (optional): enter additional text with a maximum of 60 characters, usually a short guidance or alert text such as:

“Payment expires in 10 minutes,” or “Secure payment.”

Block Exit Conditions

When reaching this block in the flow, your customer will instantly receive the payment message with all associated information if everything is configured correctly. The payments block does not have the option to wait for input; therefore, upon passing through this block, your customer will be automatically directed to the next block according to your exit conditions. In exit conditions, you can define which block the customer will be directed to in case of an error and in case of success.

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

This is the default behavior of the Payments Block.

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

What Are You Building Here?

It’s 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 Payments Block is not technical; it is strategic.

What Does Your Customer See on WhatsApp?

After the Payments Block is triggered, WhatsApp automatically sends an official payment 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.
The only changes are the action button displayed to the customer and the payment method logo.

The image above shows an illustrative scenario of applying the Payments Block in an automated flow. Using the PIX Copy and Paste and Payment Link options as payment methods.

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

1. Viewing the Payment Card

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

Visible Information: The card displays the product names and descriptions, the exact order amount, available payment methods, and a personalized message.
Action Button: Depending on the configuration, the customer will see buttons like "Copy Pix code," "Copy boleto code," or "Open payment link."
Order Summary: By clicking on the details, the customer sees a structured list with items (e.g., Blip Pen, Magic Cup), quantities, and the total amount (e.g., $10.00).

2. Identification and Payment Data (Web Checkout)

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

Identification: The customer fills in basic personal data such as first name, last name, CPF, email, and phone to ensure transaction security.
Payment Method Selection: The user chooses the specific method, such as Credit Card, where they enter card details (number, expiration, CVV) and set installment options.
Billing Address: For added security, ZIP code and full address details are requested.
Save card for future purchases: By checking this option, your customer can securely store card data and use it in future purchases without needing to fill it out again.

3. Confirmation and Automatic Return

The differentiator 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 a "Return to conversation" button.

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

4. One-Click Purchase

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

The One-Click Purchase flow increases convenience. By selecting a previously saved card, the transaction is completed instantly within WhatsApp’s interface, without the need to re-enter data or navigate to an external page.

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

Note:

In this model, it is possible to view the complete journey behavior, 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 transaction status update within the chat.

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

Need more help? Explore our content at Blip Academy or Blip Community, watch tutorials on our YouTube channel, or ask your questions in our support channel 😃