APM buttons
Get in touch
Sign in
APM buttons
Activate and customize alternative payments buttons on your payment form

Integrating alternative payment methods into your payment form expands your payment options. These additions not only improve the customer experience but also help increase conversion rates by offering familiar and secure payment choices.

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.


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

{
  ...
   "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.



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

{
  ...,
  "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, 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.
    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.
 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 the Guide
Pix simplifies real-time payments in Brazil with secure and instant account-to-account transfers. SmartPix button to your form and customize it to match your brand or preferences.

Display button
anchor

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 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 applebtn entity, this means the SmartPix button is fully displayed.

Customization
anchor

To set the SmartPix button position, create, and specify a div, 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.

Looking for help? Contact us
Stay informed with Changelog