Button

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.