Skip to content

Button

A button that will perform the defined action when user tap/click on it

Name Description
component button
text text for the button, if icon is not null, text will be used
icon if child is null and icon is not null, icon will be used
kind kind of button, primary, outlined, round
shape if this is set to circle, the shape of the button will be a circle; round will automatically be a circle
padding if shape is a circle, will used this to pad if provided, otherwise default to 20px
action action to perform when user tap/click on the button, this can be text such as close and platform
will implement the action or an action object. Some valid actions are
createDispatch, dispatch, etc, with each action provided proper params
options options for the button
child if this is not null, this will be used as a child of the button, child can be any markup component (e.g. text, icon, etc)

Style objects

  • root
  • widget
  • color
  • fillColor

Actions

See Actions for more details | Name | Description | | - | - | | close | close the current screen | | object | if object is a json object that has target attribute, will invoke the target (see Actions targets below) |

Action targets

Name Description
invokeScript invoke a script with options as jsonParams
payment process payment

examples

{
  "component": "button",
  "text": "Open dispatch",
  "kind": "primary",
  "styles": {
    "root": {
      "fontWeight": "bold"
    }
  },
  "action": {
    "target": "invokeScript",
    "options": {
      "handle": "cart-action",
      "action": "add",
      "productId": "7a9b0453-14bd-44df-b6c8-f368f809c2bc",
      "offeringId": 8a3b2a24-14bd-44df-b6c8-f368f809c2bc
    }
  }
}

Payment example

"action": {
  "target": "payment",
  "options": {
    "title": "Checkout",
    "message": {
      "confirmTitle": "Confirm your order",
      "confirmBody": "Subtotal: {values.total|numeral:$0.00}",
      "thankyou": "Payment is processed!"
    },
    "data": {
      "amount": "{values.total}",
      "ccy": "USD",
      "symbol": "$"
    },
    "save": {
      "tracker": "6a8a5db9-ab7d-4b5a-b488-38458cd21c71",
      "body": "Your order is submitted!",
      "description": "The glam daily cart checkout"
    },
    "providers": [
      {
        "providerName": "Stripe",
        "key": "pk_test_CyocRGjl6i8mTTpydniZVujq",
        "handle": "stripe-test"
      }
    ]
  }
}