PIX button

Activate Smart PIX button to easily start accepting PIX payments

Integrating Guide
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

To ensure that the Smart PIX button works correctly, do not create multiple PIX buttons with the same 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.

If you have not set up a Smart PIX button for your channels, contact Solidgate support.

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

pixButtonParams object

Expand all

enabled

boolean

Description

Displays the Smart PIX button.

If you do not pass this field with true, the Smart PIX button will be hidden.

Example

false

Default

true

containerId

string

Description

Identifier of the container where the Smart PIX button will be placed.

Example

pix-button-container

Default

Button will be displayed above the form.

Smart PIX button

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<div id="yourCustomContainerId"></div>
<script>
  PaymentFormSdk.init({
  ...restData,
  pixButtonParams: {
  enabled: true,
  containerId: 'yourCustomContainerId'
}
});
</script>

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.

Looking for help? Contact us

Stay informed with Changelog