Integrating
PIX simplifies real-time payments in Brazil with secure and instant account-to-account transfers.
Smart PIX
into your payment form expands your payment options, offering customers a fast, secure, and widely adopted local payment method in Brazil.
By following the steps on this page, you can add the Smart PIX button to your form and customize its appearance and functionality to match your brand or preferences.
Display button
order_id
using
init payment
API
requests and on the payment form at the same time.
If you are already using an existing PIX host-to-host button, you should disable it so that orders are created and processed automatically by the payment form itself.
To enable the Smart PIX button on the payment form configure the Smart PIX payment method for your channel.
Once the payment method is set up, you are ready to display the Smart PIX button on the Payment Form, with the additional option to hide the button if necessary.
Subscribe to the mounted
Form events are essential checkpoints for monitoring user interactions in payments.
event
to check when the Smart PIX button is set up and displayed. When the event is emitted for the applebtn
entity, this means the Smart PIX button is fully displayed.
Customization
Customize the Smart PIX button by setting its position and visibility to match your payment form’s design and user experience requirements.
Button position
To set the Smart PIX button position, create, and specify a div
, pass its id attribute value to the containerId
parameter in the pixButtonParams
object.
|
|
In this example, the div
with the ID yourCustomContainerId
is created and the containerId
parameter in the pixButtonParams
object is set to the value yourCustomContainerId
.
Without a specified containerId
, the button appears by default above all fields of the Payment Form. If a non-existing container is specified, an error message appears in the console.
Container with id =‘specified-container’
does not exist.
Button hiding
To hide the button from the customer, pass
false
to the enabled
parameter. You do not need to specify
true
to display the button on the form as it is the default value.