Zyllio Documentation English

Stripe Payments

Available from the Enterprise plan.

The Zyllio platform does not charge any fees on payments made through Stripe.

Stripe is an online payment infrastructure that allows businesses to manage and accept payments securely.

By integrating Zyllio with Stripe, you will benefit from its robust features, such as payment management, recurring billing, fraud protection, and much more.

Prerequisites

A valid Stripe account is required to connect the Stripe and Zyllio solutions.

Additionally, a subscription to the Zyllio Enterprise plan is needed to activate this feature.

Configuration

The Stripe integration can be activated from the Settings tab / Integration / Stripe by enabling the Enable button as shown in this image

⁠

Connect Your Stripe Account

Next, click the Connect with Stripe button to link your account with the Zyllio platform.

⁠

Finally, click the Connect button.

Close the tab when the following message appears: “Your Stripe account has been connected. Please close this window.”

Test and Production Mode

We recommend conducting all your Zyllio application design and payment testing in Test Mode.

During the testing period, the Production Mode option should be disabled.

Production mode can be enabled once the application is finalized.

Currency

The currency parameter allows you to specify the currency for payments in your mobile application

Name

Currency

Dollar

USD

Euro

EUR

There are no rows in this table

⁠

Creating Users

From the Database tab, click and drag a Users table into the workspace.

⁠

This way, Zyllio creates a ready-to-use table with 2 sample users.

⁠

Creating Products

From the Database tab, click and drag a Products table into the workspace.

⁠

This way, Zyllio creates a ready-to-use table with 7 sample products.

⁠

Creating Catalog Screens

From the Designer tab, select the List screen template and then select the Products table.

⁠

Click and drag the screen to create this first screen, then rename the screen to Products.

⁠

Next, create a detail screen by selecting a Details screen template, then choose the Products screen, and finally select the Products component.

⁠

Click and drag the screen to create this new screen, then rename it to Details.

Finalize the detail screen as follows:

Remove the Currency and PriceId components from the screen.

Change the Price component to a Formula, then select the Currency format and the € symbol.

Modify the Price component and change the Label property to Price.

⁠

And link the two screens from the Flow tab.

⁠

Authentication

Create an authentication screen using a Login screen template and then select the Users table.

Next, link the Enter button to the Products screen.

⁠

Designate the Login screen as the startup screen by clicking on the icon as shown below.

⁠

Creating a Cart

Add an Add to Cart button in the Details screen.

⁠

Define an Add Product action and fill in the following properties:

Propriété

Type

Valeur

Image

Variable

Products/Image

Price Id

Variable

Products/PriceId

Name

Variable

Products/Name

Description

Variable

Products/Description

Price

Variable

Products/Price

Currency

Variable

Products/Currency

Quantity

Fixed

There are no rows in this table

⁠

You will get:

⁠

Next, create a screen called Cart to display the cart.

Select a Cart component by choosing Fixed.

⁠

Drag the component into the screen as follows:

⁠

Link the Add To Cart button to the Cart screen.

⁠

Creating a Payment Button

Add a button called Pay that uses the Process Payment action

⁠

Define Stripe Products

It is important to qualify your Stripe integration in test mode before switching to production mode.

Click on the Test mode button:

⁠

Next, add your products one by one as follows:

Create a product.

Enter its name.

Enter its description.

Upload its image.

Set the pricing mode to One-Off (one-time).

Enter its price, ensuring the correct currency is selected.

⁠

Once the product is created, copy its Price ID by clicking on the Copy price ID menu.

⁠

To paste it into the Zyllio Products table as follows:

⁠

At this stage, your application is ready to accept payments in test mode.

Testing a Payment

When conducting interactive tests, use a card number of type:

⁠

4242 4242 4242 4242⁠

Enter this card number in the Dashboard or in a payment form.

Use a valid expiration date such as 12/34.

Use any three-digit CVC code (four digits for American Express cards).

Use any value of your choice for the other fields in the form.

⁠

Payments appear in the Transactions section.

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.