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.
Log in and click on Submit.
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
Name
Currency
1
Dollar
USD
2
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
Propriété
Type
Valeur
1
Image
Variable
Products/Image
2
Price Id
Variable
Products/PriceId
3
Name
Variable
Products/Name
4
Description
Variable
Products/Description
5
Price
Variable
Products/Price
6
Currency
Variable
Products/Currency
7
Quantity
Fixed
1
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
Log in to the Stripe portal and switch to test mode
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: