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 and secure payment choices.

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.

If you have not set up a 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"
  }
};

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>

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.

If you have not set up a Cash App Pay button for your channels,

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"
  }
};

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>

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
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"
  }
};

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>

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

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
anchor

1
2
3
4
5
6
7
8

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

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

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.
To ensure that the Pix QR button works correctly, do not create multiple Pix QR 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 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>

In this example, the div with the ID yourCustomContainerId is created, and the containerId parameter in the pixQrButtonParams 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.

Looking for help? Contact us
Stay informed with Changelog