Payments with credit cards
Last updated on 03/04/2024
Payments with credit cards
Overview
In addition to supporting digital wallet payments, Visuel.ly also allows for credit card payments. The payment process can be completed in either a single scene or across three scenes, depending on the amount of information required. All payment-related scenes are created using form layers.
Credit Card Payments
Let's go through the process step-by-step
Multiple scenes required: To process credit card payments, you may need two or three scenes:
Billing Address: A scene to collect the billing address.
Credit Card Information: A scene for the credit card details
Shipping Address (Optional): A scene to gather the shipping address, if needed.
Use Form Layers: To create these scenes, use Input Fields from Form Layers. Ensure that the Form Type is set to "Payment." Below are the form fields you can use to build these scenes: Here are the form fields you can use to create these scenes
Billing Address:
First name
Last name
Billing Street
Billing City
Billing Postal Code
Shipping Address:
First name
Last name
Shipping Street
Shipping City
Shipping Postal Code
Credit Card
Credit card number
Expiration date
CVC number.
Configure Data Send: Once your scenes are set up, click on Configure Scene for each one and select Authorize in the Send to data field to ensure proper processing for all these scenes.
Warnings:
To ensure proper payment processing, you need to configure the Scene to send data to the correct third-party payment processing vendor. Currently, this vendor is Authorize.net. You must send not only credit card information but also the user's product selection, billing address (if obtained), and shipping address (if obtained) to Authorize.net.
Notes:
Currently, Authorize.net is the only payment gateway service provider we support for credit card processing. To use Authorize.net, you need a merchant account with them. Additionally, you must add Authorize.net in the Integrations module located in the Account Settings section.