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"
    }
  ]
}