APM buttons : Help Center

The integration of alternative payment methods into your payment form expands your payment options. These methods help improve the customer experience and increase conversion rates by offering familiar and secure payment choices.

For API-based init payment and future_usage rules, see Manage APMs Guide . In payment form flows, pass future_usage in paymentIntent during form initialization.

Subscribing to the payment form events allows you to receive real-time information and improve the customer experience.

Bizum button

By following the steps, you can add the Bizum button to your form and customize it to match your brand or preferences.

Display button

To enable a Bizum button on the payment form:

Configure the Bizum payment method for your channel. If you have not set up a Bizum button for your channels, contact Solidgate support.
Provide the future_usage through paymentIntent object.

Initialize Bizum button

{
   "future_usage": {
    "payment_type": "one-time"
  }
}

Pass bizumButtonParams with enabled true to the init configuration when initializing the payment form via PaymentFormSdk.init.

Display Bizum button

const data = {
  merchantData: {
    merchant: "<-your data->",
    signature: "<-your data->",
    paymentIntent: "<-your data->",
  },
  bizumButtonParams: {
    enabled: true,
    containerId: "bizum"
  }
};

let form = PaymentFormSdk.init(data);

Customization

To set the Bizum button position, create, and specify a div, pass its id attribute value to the containerId parameter in the bizumButtonParams object.

enabled boolean

Description

Displays the Bizum button.

If you do not pass this field with true , the Bizum button is hidden.

Default

true

Example

false

containerId string

Description

Identifier of the container where the Bizum button is placed.

Default

Button is displayed above the form.

Example

bizum-button-container

Bizum button

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

In this example, the div with the ID yourCustomContainerId is created and the containerId parameter in the bizumButtonParams 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-existent container is specified, an error message appears in the console.

Container with id ='specified-container' does not exist.

Blik button

By following the steps, you can add the Blik button to your form and customize it to match your brand or preferences.

Display button

To enable a Blik button on the payment form:

Configure the Blik payment method for your channel. If you have not set up a Blik button for your channels, contact Solidgate support.
Pass blikButtonParams with enabled true to the init configuration when initializing the payment form via PaymentFormSdk.init.

Display Blik button

const data = {
  merchantData: {
    merchant: "<-your data->",
    signature: "<-your data->",
    paymentIntent: "<-your data->",
  },
  blikButtonParams: {
    enabled: true,
    containerId: "blik"
  }
};

let form = PaymentFormSdk.init(data);

Customization

To set the Blik button position, create and specify a div, then pass its id attribute value to the containerId parameter in the blikButtonParams object.

enabled boolean

Description

Displays the Blik button.

If you do not pass this field with true , the Blik button is hidden.

Default

false

Example

true

containerId string

Description

Identifier of the container where the Blik button is placed.

Default

Button is displayed above the form.

Example

blik-button-container

theme string

Description

Theme of the Blik button.

light
dark

Default

dark

Example

light

Blik button

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

In this example, the div with the ID yourCustomContainerId is created and the containerId parameter in the blikButtonParams 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-existent container is specified, an error message appears in the console.

Container with id ='specified-container' does not exist.

Cash App Pay button

By following the steps, you can add the Cash App Pay button to your form and customize it to match your brand or preferences.

Display button

To enable the Cash App Pay button on the payment form:

Configure the Cash App Pay payment method for your channel. If you have not set up a Cash App Pay button for your channels, contact Solidgate support.
Provide the future_usage, geo_country, success_url, and fail_url through paymentIntent object.

Initialize Cash App Pay button

{
  "geo_country": "USA",
  "future_usage": {
    "payment_type": "one-time"
  },
  "success_url": "https://ex.com/success",
  "fail_url": "https://ex.com/fail"
}

Pass cashAppButtonParams with enabled true to the init configuration when initializing the payment form via PaymentFormSdk.init.

Display Cash App Pay button

const data = {
  merchantData: {
    merchant: "<-your data->",
    signature: "<-your data->",
    paymentIntent: "<-your data->",
  },
  cashAppButtonParams: {
    enabled: true,
    containerId: "cashapp"
  }
};

let form = PaymentFormSdk.init(data);

Customization

To set the Cash App Pay button position, create and specify a div, then pass its id attribute value to the containerId parameter in the cashAppButtonParams object.

enabled boolean

Description

Displays the Cash App Pay button.

If you do not pass this field with true , the Cash App Pay button is hidden.

Default

true

Example

false

containerId string

Description

Identifier of the container where the Cash App Pay button is placed.

Default

Button is displayed above the form.

Example

cashapp

Cash App Pay button

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

In this example, the div with the ID yourCustomContainerId is created and the containerId parameter in the cashAppButtonParams 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-existent container is specified, an error message appears in the console.

Container with id ='specified-container' does not exist.

PayPal button

By following the steps, you can add the PayPal button to your form and customize it to match your brand or preferences.

Display button

To enable the PayPal button on the payment form:

Configure the PayPal payment method for your channel. If you have not set up a PayPal button for your channels, contact Solidgate support.
Pass paypalButtonParams with enabled true to the init configuration when initializing the payment form via PaymentFormSdk.init.

Initialize PayPal button

const data = {
  merchantData: {
    merchant: "<-your data->",
    signature: "<-your data->",
    paymentIntent: "<-your data->",
  },
  paypalButtonParams: {
    enabled: true,
    color: "blue",
    shape: "rect",
    label: "checkout",
    height: 52
  }
};

let form = PaymentFormSdk.init(data);

To ensure that the PayPal button works correctly, do not create multiple PayPal 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 a PayPal host-to-host button, disable it so that orders are created and processed automatically by the payment form.

Customization

enabled boolean

Description

Displays the PayPal button.

If you do not pass this field with true , the PayPal button is hidden.

Default

true

Example

false

containerId string

Description

Identifier of the container where the PayPal button is placed.

Default

Button is displayed above the form.

Example

paypal-button-container

color string

Description

Color Reference of the PayPal button.

gold
blue
silver
white
black

Default

gold

Example

blue

shape string

Description

Shape Reference of the PayPal button.

rect
pill
sharp

Default

pill

Example

sharp

label string

Description

Label Reference displayed on the PayPal button.

paypal
checkout
buynow
pay

Default

buynow

Example

checkout

height string [25..55]

Description

Height Reference of the PayPal button.

Default

Button adapts to the size of its container element.

Example

52

PayPal button

paypalButtonParams?: {
  enabled?: boolean;
  containerId?: string;
  color?: "gold" | "blue" | "silver" | "white" | "black";
  shape?: "rect" | "pill" | "sharp";
  label?: "paypal" | "checkout" | "buynow" | "pay";
  height?: number;
};

Pix button

By following the steps, you can add the SmartPix button to your form and customize it to match your brand or preferences.

Display button

To enable the SmartPix button on the payment form:

Configure the SmartPix payment method for your channel. If you have not set up a SmartPix button for your channels, contact Solidgate support.
Pass pixButtonParams with enabled true to the init configuration when initializing the payment form via PaymentFormSdk.init.

To ensure that the SmartPix 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 a Pix host-to-host button, disable it so orders are created and processed automatically by the payment form.

Subscribe to the mounted event to check when the SmartPix button is set up and displayed. When the event is emitted for the entity, this means the SmartPix button is fully displayed.

Customization

To set the SmartPix button position, create and specify a div, then pass its id attribute value to the containerId parameter in the pixButtonParams object.

enabled boolean

Description

Displays the SmartPix button.

If you do not pass this field with true , the SmartPix button is hidden.

Example

true

Default

false

containerId string

Description

Identifier of the container where the SmartPix button is placed.

Example

pix-button-container

Default

Button is displayed above the form.

SmartPix button

<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-existent container is specified, an error message appears in the console.

Container with id ='specified-container' does not exist.

APM buttons Print

Bizum button

Display button

Customization

Blik button

Display button

Customization

Cash App Pay button

Display button

Customization

PayPal button

Display button

Customization

Pix button

Display button

Customization