Skip to content

Payment

Description

Payment related information can be display and process for payment in app.

Attributes

  • tile=payment
  • title
  • service: It indicate the payment method can be used one of given options e.g InApp | Wrapper | ApplePay
  • products:
    • amount: Display the amount in the payment screen
    • label: Display payment related information
    • store:
      • title
  • options: Display the different details on paymenet screen based on configuration [Array of object]
    • welcome: display the welcome screen text
    • complete
    • value: value in given currency
    • icon: icon with curreny
    • count
    • text: display a value in given in currency
    • unit: currency unit
  • data
  • save: object
    • tracker: Tracker id to dispatch with details
  • messages:
    • completed: Indicate success message to display after payment is done
    • closeLabel: Indicate the close button text
    • checkLabel: Text for the monthly checkboxes
    • label
  • payments: if have more one payment method then used this configuration
    • services: Array of following services [ InApp | Wrapper | ApplePay | Stripe]
  • styles: provide custom styles any of below one
    • instructions: styles for the message
    • unit: styles for the unit
    • text: styles for the text
    • icon: styles for the icon
    • iconWrapper: styles for the unit and text wrapper
    • slider: styles for the amount slider
    • payment: styles for the payment card
  • classes: provide custom classes any of below one
    • instructions: classes for the message
    • icon: classes for the icon
    • checkbox: classes for the Monthly checkbox
    • iconWrapper: classes for the unit and text wrapper
    • payment: classes for the payment card
  • data

Example

  {
  "tile": "payment",
  "service": "ApplePay",
  "classes": {
    "icon": "font-size-220 text-center pr-2",
    "payment": "font-size-120 text-center mb-2",
    "success": "p-4 text-center header",
    "failure": "p-4 text-center",
    "root": "my-4",
    "stripe": "bg-white p-3 text-dark",
    "checkbox": "text-lichen"
  },
  "messages": {
    "completed": "Thank you for your donation!",
    "label": "weMORI donation",
    "checkLabel": "Give monthly",
    "closeLabel": "Close",
    "instructions": "Given monthly, cancel anytime. After this project ends, you'll be able to choose which project to support next."
  },
  "styles": {
    "backgroundColor": "#FE7300",
    "color": "#E9ECBE",
    "root": {
      "backgroundColor": "#FE7300",
      "color": "#E9ECBE"
    },
    "instructions": {
      "color": "#E9ECBE",
      "textAlign": "center"
    },
    "text": {
      "fontSize": "4rem"
    },
    "unit": {},
    "icon": {
      "flex": "1"
    },
    "success": {
      "border": "5px solid #1C5C57"
    },
    "failure": {
      "border": "5px solid #E71F21"
    },
    "slider": {
      "color": "#E9ECBE"
    }
  },
  "payments": {
    "services": [
      "Stripe",
      "ApplePay"
    ],
    "Stripe": {
      "key": "stripe key",
      "currency": "usd",
      "billing": "97ddcab7-fa1b-4569-9f7f-b7bf22de9d55",
      "org": "cffa7b58-82ff-4258-95e2-7d8d5e4162d0",
      "tracker": "57f1ffbb-66b6-4d5f-ac6b-f7a70087ef35",
      "account": "wemori",
      "description": "{data.title}",
      "sku": "{data.sku}",
      "body": "**{data.title}**\r\n{data.description}"
    },
    "ApplePay": {
      "currency": "usd",
      "billing": "97ddcab7-fa1b-4569-9f7f-b7bf22de9d55",
      "org": "cffa7b58-82ff-4258-95e2-7d8d5e4162d0",
      "tracker": "57f1ffbb-66b6-4d5f-ac6b-f7a70087ef35",
      "account": "wemori",
      "description": "{data.title}",
      "sku": "{data.sku}",
      "body": "**{data.title}**\r\n{data.description}"
    }
  },
  "save": {
    "tracker": "f65bfe93-2dd1-4630-ade8-1b48019df284"
  },
  "options": [
    {
      "value": "1",
      "icon": "icon wemori-tree",
      "count": 1,
      "text": "~1",
      "template": "~{data.trees * 1|numeral:0,0.0}",
      "unit": "trees"
    },
    {
      "value": "5",
      "icon": "icon wemori-tree",
      "count": 1,
      "text": "~5",
      "template": "~{data.trees * 5|numeral:0,0}",
      "unit": "trees"
    }
  ]
}