Design Process
Role & Experience
Creating a membership process relies heavily on the backend structure. The backend controls how data is handled when a user makes a request or when a page retrieves data from the servers to a database. This is the moment where 16 years of backend experience come to the forefront. I created a simple front-end design to ensure the data needed from the user is clear and concise. Using Stripe's API, I developed the backend to receive data from the user and store their information in the customer section within Stripe, making them a member.
Stripe Customer Management
Stripe handles the management of customer data. I designed and developed the frontend. For the backend, I created the algorithm, and Stripe collects the customer's information and stores it on their platform. Customers can access their data at any time. Implementing Stripe's API offers various features and benefits for both me and the customers, such as creating subscriptions, invoices, and allowing customers to store their cards in Stripe for future purchases.Research
Before Stripe, I was using Braintree Payments as my method of processing payments online. I had everything set up and ready from the sandbox and applied my keys for production use. It was a great tool that introduced me to fintech. It was FREE! Eventually, PayPal bought out the company and everything changed. I no longer had access to production. I called a representative, and it was clear I wasn't bringing in enough volume. He tried to direct me too many times to use PayPal. That is not what I wanted because I aimed to avoid using PayPal and prevent customers from leaving my website. I began to research to look for another platform. I narrowed my search to Square and Stripe. From the research, I chose Stripe as my primary payment processor because Stripe's API documentation is well laid out. I caught on to it fairly quickly. Because I was moving away from Braintree, I had to start all over and build everything from the ground up.Design Decision & Rationale
Don't get me wrong, I really like Square. Square's advantages were the devices it offered to charge customers, such as a card reader that you can plug into your phone to swipe. They have another reader that accepts Apple and Samsung Pay. I needed to have a central processor source. From a coding perspective and quick setup, Stripe provided the best documentation. Learning a new platform involves understanding the environment because everything is new. It took me about a week to get familiar with the codebase. Once I made it over that hurdle, everything was straightforward. I kept the design simple, using imagery as a filler to bring a level of relaxation to the page while providing just enough fields for the users to fill out the form without overwhelming them at each step. When forms are lengthy, I do whatever I can to break them up into steps of no more than 4, keeping the number of fields within each step as short as possible.Customer Updates
All customer information for the purpose of updating or deleting their profile is retrieved from Stripe. Within the market, customers can create a vault to store their card and remove it from Stripe for future payments. Subscriptions can also be canceled on the page. If they are already a part of the[COMMUNITY], a request will automatically be made to Stripe to check if the email address in the[COMMUNITY] exists in Stripe on page load. Otherwise, the customer will have to provide their email and the customer ID provided by Stripe.
Invoices
Stripes keeps a record of all the invoices that I create and request payment for. This feature is a key milestone for me in tracking the work I complete for customers. I can start an invoice and begin adding line items along with the cost. I don't have to place everything all at once. Additional line items can be added to the invoice through the services at any time. When ready, I can submit the detailed invoice to the customer for the completed services. I can perform the actions directly from my site.
Challenges & Solutions
Starting over and building a new customer experience in a new platform was by far the most significant challenge. I had to move quickly to understand Stripe's documentation. This is my first time using Stripe, so I was unfamiliar with its layout. The only solution that I knew was to keep working at it until everything made sense. Stripe uses an unusual syntax for search queries when you want to find a customer or invoice, etc., but I have seen more confusing methods. What I like about Square is the free portable card readers that connect directly to the app on your phone. What I didn't like was having to import files to access their use, like subscriptions within the code. Stripe only requires importing two files wherever Stripe is needed. I started developing the subscription portal right away, and Stripe knew what to do. For coding, Stripe's documentation is excellent for allowing engineers creative control to create the web app to the needs and wants, while Stripe handles the data received and requested.
Results & Impact
Everything has been successfully migrated to Stripe. Testing was performed in the sandbox, confirming that the requested and received information from Stripe is correct. The next step is to replace the sandbox keys with the production keys. This process will make the app live and ready for accepting online payments. Currently, the api is set up within a web app to make the store an app of its own within a native app.FInal Reflections
Like any other business, I want to connect with the customers. From what I have experienced so far, the work is to gain the customer's trust. Even with a name-brand item, potential customers are going to be skeptical. Whether you price the product high or low, they will question it. By providing this feature, I can establish relationships to understand their needs and wants, and deliver items tailored to their tech needs.