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, secure payment options.

Button configuration is passed during form initialization in the same init object, formParams and button params. In payment form future payment flow, 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.

When using init payment API , do not create multiple buttons with the same order_id and on the payment form at the same time. If you are already using a host-to-host APM button, disable it so orders are created and processed automatically by the payment form.

To set a custom button position, create a div with your custom ID and pass this value to the related button params object. Without a specified containerId, the button is displayed 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.

If you have not set up an APM button for your channels, contact us.


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.
  • 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-button-container"
  }
};

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

false

Example

true

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>

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.
  • 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-button-container"
  }
};

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>

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.
  • 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-button-container"
  }
};

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-button-container

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

MB WAY button

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

Display button

To enable the MB WAY button on the payment form:

  • Configure the MB WAY payment method for your channel.
  • Provide the future_usage through paymentIntent object.
Initialize MB WAY button 
{
   "future_usage": {
    "payment_type": "one-time"
  }
}
  • Pass mbWayButtonParams with enabled true to the init configuration when initializing the payment form via PaymentFormSdk.init.
Display MB WAY button 
const data = {
  merchantData: {
    merchant: "<-your data->",
    signature: "<-your data->",
    paymentIntent: "<-your data->",
  },
  mbWayButtonParams: {
    enabled: true,
    containerId: "mbway-button-container"
  }
};

let form = PaymentFormSdk.init(data);

Customization

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

enabled boolean

Description

Displays the MB WAY button.

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

Default

false

Example

true

containerId string

Description

Identifier of the container where the MB WAY button is placed.

Default

Button is displayed above the form.

Example

mbway-button-container

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

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.
  • 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,
    disableMaxWidth: true
  }
};

let form = PaymentFormSdk.init(data);

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

disableMaxWidth boolean

Description

Removes the default maximum width constraint of 750px, allowing the PayPal button to expand to the full width of its container.

Default

false

Example

true

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

Pix button

By following the steps, you can add SmartPix or Pix QR buttons to your form and customize them to match your brand or preferences.

SmartPix

Display button

To enable the SmartPix button on the payment form:

  • Configure the SmartPix payment method for your channel.
  • Pass pixButtonParams with enabled true to the init configuration when initializing the payment form via PaymentFormSdk.init.
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 false , the SmartPix button is displayed.

Example

false

Default

true

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: false,
            containerId: 'yourCustomContainerId'
        }
    });
</script>
Pix QR

Display button

To enable the Pix QR button on the payment form:

  • Configure the Pix QR payment method for your channel.
  • Pass pixQrButtonParams with enabled true to the init configuration when initializing the payment form via PaymentFormSdk.init.
Subscribe to the mounted event to check when the Pix QR button is set up and displayed. When the event is emitted for the entity, this means the Pix QR button is fully displayed.

Customization

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

enabled boolean

Description

Displays the Pix QR button.

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

Example

true

Default

false

containerId string

Description

Identifier of the container where the Pix QR button is placed.

Example

pix-qr-button-container

Default

Button is displayed above the form.

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

Display button

To enable the SmartPix button on the payment form:

  • Configure the SmartPix payment method for your channel.
  • Pass pixButtonParams with enabled true to the init configuration when initializing the payment form via PaymentFormSdk.init.
mounted event

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 false , the SmartPix button is displayed.

Example

false

Default

true

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: false,
            containerId: 'yourCustomContainerId'
        }
    });
</script>

Display button

To enable the Pix QR button on the payment form:

  • Configure the Pix QR payment method for your channel.
  • Pass pixQrButtonParams with enabled true to the init configuration when initializing the payment form via PaymentFormSdk.init.
mounted event

Customization

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

enabled boolean

Description

Displays the Pix QR button.

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

Example

true

Default

false

containerId string

Description

Identifier of the container where the Pix QR button is placed.

Example

pix-qr-button-container

Default

Button is displayed above the form.

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