Stripe

Stripe Element

This button is integrated with www.stripe.com payment technologies. You can only use it if your company is registered in one of the countries on this list.

You should first register a merchant account with Stripe by following this link in order to make Stripe work.

After your merchant is ready, you can set up this integrated element. If you already have a merchant account with Stripe you can set up right away.

IMPORTANT! None of the information you set in this element is vital for your account. Nobody can access it, withdraw anything from it or change any of the settings with this data. Mobsted communicates and stores this info always using encryption protocols.

Connecting Stripe Account to Mobsted

In addition to drag-and-dropping Stripe element you should set up and connect Stripe account to Mobsted. The steps below would help you with it.

Testing Mode

  • First, you need to get your Stripe Publishable and Secret Keys. Log in to your Stripe account and you would be able to find the keys at https://stripe.com/docs/keys#api-keys.
  • Input the Keys obtained to the Mobsted Stripe form. Make sure you input TEST keys in TEST fields. Make sure your switch for using test keys is at TEST (blue means ON). Which means you are in testing mode and no actual card payments will take place during you application setup. And press Save Changes.
  • Press Save Changes

  • Now it's time to Drag-and-Drop Stripe element in the Constructor.
  • Fill up Stripe Element Properties
  • After the button is set up you can use in in the app and all the transactions should appear in your Stripe account as tests.

Production Mode

Please note - switching to production mode pressing the button in your app and inputting card details will result in an actual transaction from the card to your account.

  • First, you need to get your Stripe Publishable and Secret Keys. Log in to your Stripe account and you would be able to find the keys at https://stripe.com/docs/keys#api-keys.
  • Copy and Paste these two keys in the Production input fields.
  • Switch the current state switcher to PROD ( blue means ON).
  • Press Save Changes.

Stripe Element Properties

  • Backend Name: is used to reference this Element from the other parts of the App. Using Backend Name the value stored in the Element could be printed or it can be called for the logical conditions.
  • Name: the string entered to this field would be displayed to the AppUser on the button for the Stipe element.
  • Font Family: select the font family from the list of defined fonts.
  • Font Size: the size of text characters, measured in units called points (pts); a point is equal to 1/72 inch.
  • Line Height: the amount of space above and below the text.
  • Letter Spacing: is the adjustment of the horizontal white space between the letters in a block of text.
  • Text Color: is sometimes used to convey meaning beyond the basic text. You may use the specific color to emphasize an important statement.
  • Background Color: sets the background color of an element. The background of an element is the total size of the element, including padding and border (but not the margin). Tip: Use a background color and a text color that makes the text easy to read.
  • Border: setting the border to 0 would make it invisible. You can customize the each of the 4 borders separately or all of them together.
  • Corner Radius: how rounded the corners you want to be.
  • Margin: the space around Element, outside of the defined border.
  • Padding: the space around an Element's content, inside of the defined border.
  • Payment account: GUYS HELP
  • Profile settings: Would redirect you to the page where you can connect your Stripe Account and set it up.
  • Amount: the amount to be passed as the amount to be payed. Can be called from the outside element using it's Backend Name or from the Variable using hashtag.
  • Currency: select the currency you want to use for the payments.
  • Description: Description of the payment.
  • Statement Descriptor: State of the payment.
  • Visibility: the default state of the Element, is shown by default, but can be hidden.
  • Conditional Visibility: the condition on which the element would become (un)hidden.
  • Repeat Element: repeat the Element based on the Smart Filter.

Stripe Element Actions

  • Connects to: connect the Stripe button to one of the App Screens, to be redirected when the button is pressed.
  • External Link: paste the link you want to redirect AppUsers when Stripe button is pressed.

That is it. You Stripe button now is is fully live and is accepting payments to your banking account using Stripe as a payment service provider.

Use the above logic for all other built in PSPs. So summarize it - open the PSP's setup page in Mobsted, see the names of fields which you need to fill in, go to your PSP's account and find these fields. Move the data to Mobsted and make sure you distinguish between testing and full production mode.


How did we do?