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

  1. 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.

  2. 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.

  3. 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.