Bubble
The Efí Bank module for Bubble allows you to receive payments via Boleto, Credit Card, and Installment.
Bubble is a versatile platform for website/platform development. By carefully following these steps, you will be able to obtain client_id and client_secret, encode them in base64, and configure the essential fields to start receiving your payments.
1. Installation
1.1. Obtain API Credentials
Before you start receiving payments with Efí, you'll need to obtain Production and Homologation credentials. Follow the steps below:
- Access the Efí dashboard on the API menu.
- In the sidebar, click on Applications, then click on Create application.
- Enter a name for the application (e.g., Bubble), and select the "Issuance API" option (boleto, installment, and credit card);
- Click on Create application.
- Enter your Electronic Signature to confirm the changes and update the application.
After obtaining client_id and client_secret, you'll be taken to a screen similar to the one below:
1.2. Encode Credentials
Then copy your client_id and client_secret, access the page: https://efipay.github.io/encode-credentials/ and paste the credentials into their respective fields.
Click on "Encode and Display"
Then copy the returned code and save this information, as we will use it later in the plugin configuration.
2. Installing the Plugin
- Access Bubble Editor:Log in to your Bubble account and access your application's editor.
- Adding the Plugin: In the sidebar, click on "Plugins" and then select "+ Add plugins".
- Installation: Search for "Efí Bank" and install the plugin for the desired payment method:
Click on "Done" to finish.
3. Configuring the plugin
To configure, copy the encoded credentials obtained at the end of step 1.2 and paste them into the Authorization (header)(token call) field:
Done! Configuration completed! Note: If you use the Credit Card billing plugin, perform step 3.1 below.
3.1. Credit Card
Important!The steps below are necessary ONLY for the Credit Card plugin. They do not apply to other Efí Bank plugins for Bubble.
After filling in the Authorization field (Step 3), you need to fill in the following fields:
The remaining fields need to be filled with the name of each input in your project. They are:
- id-input-cardnumber: Card number
- id-input-cvv: Card CVV
- id-input-totalValue: Total order value
- id-input-expirationMonth: Card expiration month
- id-input-expirationYear: Card expiration year
- id-select-parcels: Installments selection field
- id-payment-token: Hidden field for Payment Token
Associate these fields with the names of the corresponding inputs in your application. Make sure the field names in Bubble match the IDs mentioned.
For example: You have an input for the customer to enter the card number. The name of this input should be entered in the id-input-cardnumber field.
Done! Now you can continue with your development!
3.2. Pix
Important!The steps below are necessary ONLY for the PIX plugin. They do not apply to other Efí Bank plugins for Bubble.
After filling in the Authorization field (Step 3), follow these steps:
- Generate a certificate in your Efí account, see how by clicking here
- Upload the certificate on the conversion page and click on "Encode and Display", clicking here
- Copy the content of the Certificate and paste it into the "Certificate file content" field
- Copy the content of the Key and paste it into the "Key file content" field
Done! Now you can continue with your development!
4. Payment Notifications
4.1. Setting up your Notification URL
Important!To receive payment notifications in your project automatically, make sure you are on the "Starter" plan of the Bubble platform. It is worth noting that this is a limitation/requirement of the Bubble platform.
In your project:
- Access the "Settings" option
- Click on the "API" tab
- Inside "Public API Endpoints", click on "Enable Workflow API and backend workflows".
- After that, go to "Backend workflows"
- Click on "New API workflow"
- Set a name for the API workflow (for example, efi_cartao)
- Select the other fields as follows:
- Click on "Detect data" and copy the URL provided. It will be your notification URL;
- Click on the "Workflow" menu;
- Select your purchase completion event;
- Click on the action to create a billet/card/carnet;
- At the end of the configuration window, paste the copied URL into the "notification_url" field;
After that, proceed with the step below:
4.2. Querying a Notification Token
In your project, access the "Backend Workflows" menu;
Select the Workflow created earlier (Ex: efi_cartao) and add the action "EfíBank - Query Notification.
Click on the notification query action and in the "token" field select the "Request Data" option, then click on the "notification" option.
Done! Now just add your action with its internal routines.
5. Frequently Asked Questions
Where can I track transactions generated by the plugin?
Transactions generated through the plugin can be tracked in your Efí account under the menu API > My Applications > Your Application. In this environment, you can track all transactions and their respective statuses.
When I try to make a payment, I receive the message "An error occurred while trying to make your request. Please contact the store owner.".
This error message may be displayed at the time of checkout for various reasons. In this case, the first step is to verify the credentials of your application and also check in your API the sub-tab "request history" see how to use this feature.
6. Support and Suggestions
Your suggestions for new ideas and implementations for the Efí plugin are very important. Therefore, if you have any ideas, please contact our team. We will review your suggestion and consider the possibility of implementation.
If you have any questions, please contact us through the Efí website.