APM buttons

Sign in Hub
Get help
APM buttons
Activate and customize alternative payment buttons on your payment form

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 Guide
Initialize the payment form by providing the init object and form parameters. form initialization in the same init object, formParams and button params. In payment form Guide
Effectively handle alternative payments using the payment operations framework. future payment flow, pass future_usage in paymentIntent during form initialization.

Subscribing to the payment form Guide
Form events are essential checkpoints for monitoring customer interactions in payments. 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
anchor

By following the steps, you can add the Guide
Bizum streamlines instant banking payments in Spain. Bizum button to your form and customize it to match your brand or preferences.

Display button
anchor

To enable a Bizum button on the payment form:

  • Configure the Bizum payment method for your channel.
  • Provide the future_usage through paymentIntent object.
1
2
3
4
5

{
   "future_usage": {
    "payment_type": "one-time"
  }
}
  • Pass bizumButtonParams with enabled true to the init configuration when initializing the payment form via PaymentFormSdk.init.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

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
anchor

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

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

Blik button
anchor

By following the steps, you can add the Guide
BLIK streamlines online payments in Poland, enabling direct bank account transactions. Blik button to your form and customize it to match your brand or preferences.

Display button
anchor

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.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

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
anchor

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.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

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

Cash App Pay button
anchor

By following the steps, you can add the Guide
Cash App is a US digital wallet that processes online transactions. Cash App Pay button to your form and customize it to match your brand or preferences.

Display button
anchor

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.
1
2
3
4
5
6
7
8

{
  "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.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

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
anchor

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.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

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

MB WAY button
anchor

By following the steps, you can add the Guide
MB WAY is Portugal’s leading mobile payment method. MB WAY button to your form and customize it to match your brand or preferences.

Display button
anchor

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.
1
2
3
4
5

{
   "future_usage": {
    "payment_type": "one-time"
  }
}
  • Pass mbWayButtonParams with enabled true to the init configuration when initializing the payment form via PaymentFormSdk.init.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

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
anchor

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.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

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

PayPal button
anchor

By following the steps, you can add the Guide
PayPal provides a global online payment platform for secure transactions. PayPal button to your form and customize it to match your brand or preferences.

Display button
anchor

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.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

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
anchor

1
2
3
4
5
6
7
8
9

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
anchor

By following the steps, you can add Guide
SmartPix lets merchants collect one-time or recurring payments from customers' bank accounts using Open Finance technology in Brazil. SmartPix or Guide
Pix QR is ideal for quick, single-use transactions—customers pay from their bank account using QR codes. Pix QR buttons to your form and customize them 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.
  • Pass pixButtonParams with enabled true to the init configuration when initializing the payment form via PaymentFormSdk.init.
Subscribe to the mounted Guide
Form events are essential checkpoints for monitoring customer interactions in payments. 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.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<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.
Subscribe to the mounted Guide
Form events are essential checkpoints for monitoring customer interactions in payments. 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.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<div id="yourCustomContainerId"></div>
<script>
    PaymentFormSdk.init({
        ...restData,
        pixQrButtonParams: {
            enabled: true,
            containerId: 'yourCustomContainerId'
        }
    });
</script>
Looking for help? Contact us
Stay informed with Changelog