This guide provides a detailed reference on how to integrate the Push Cash button into your application.

​
Button Interface

The Push Cash button enables the integration of a payment entry point into your web application. By using the PushJS package, you can render a customizable button that initiates the Push Cash payment flow.

​
Loading the PushJS Package

Include the PushJS script in your HTML by adding the following script tag:

<script src="https://cdn.pushcash.com/sdk/push.umd.js"></script>

​
Rendering the Button

To render the Push Cash button on your page, use the PushCash.Button function with the appropriate arguments.

​
Syntax

var push = window.PushCash.Button({
  selector: '<CSS selector>',
  style: {
    color: '<color>',
    shape: '<shape>',
    width: <width>,
    height: <height>,
    disabled: <boolean>,
  },
}).render();
  • selector (string, required): A CSS selector that identifies the HTML element where the button will be rendered.
  • style (object, optional): An object that defines the style of the button.
    • color (string): The color theme of the button. Options are 'royal' (default), 'white', 'navy'.
    • shape (string): The shape of the button. Options are 'rect' (default), 'pill'.
    • width (number): The width of the button in pixels (between 252 and 800).
    • height (number): The height of the button in pixels (between 36 and 80).
    • disabled (boolean): Whether the button is disabled - default is false.

example button initialization

var push = window.PushCash.Button({
  selector: '#pushcash-button',
  style: {
    color: 'navy',
    shape: 'pill',
    width: 300,
    height: 50,
    disabled: false,
  },
}).render();

​
Setting a Callback

Define a callback function that executes when the user clicks the button. This function should return a promise that resolves to a URL string, which the SDK will use to redirect the user.

push.setCallback(async function() {
  // Your logic to invoke your backend to create a payment intent and return the URL for the payment session
  const intentUrl = await createPaymentIntent();
  return intentUrl;
});

​
Disabling the Button

You can dynamically disable or enable the button using the setDisabled method.

push.setDisabled(true);  // Disable the button
push.setDisabled(false); // Enable the button

​
Destroying the Button

If you need to remove the button from the page, call the destroy method.

push.destroy();

​
Styleguide

Below are examples of the Push Cash button in different configurations.

​
Example 1: Royal Blue Rectangle (Default)

window.PushCash.Button({
  selector: '#pushcash-button'
}).render();

​
Example 2: White Pill-Shaped Button

window.PushCash.Button({
  selector: '#pushcash-button',
  style: {
    color: 'white',
    shape: 'pill',
  },
}).render();

​
Example 3: Navy Blue Rectangle with Custom Size

window.PushCash.Button({
  selector: '#pushcash-button',
  style: {
    color: 'navy',
    shape: 'rect',
    width: 400,
    height: 60,
  },
}).render();

This styleguide should help you choose the appropriate button configuration for your application.