Over Parfumado
Parfumado geeft je de mogelijkheid om elke maand, naar jou keuze, een parfum thuisgestuurd te krijgen. De site is een webshop dat draait op Shopify. Shopify biedt geen mogelijkheid tot het aanbieden van abonnementen in de checkout in combinatie met Europese betaalmethodes zoals iDEAL, Bancontact, etc. Hiervoor is een volledig custom checkout geschreven middels een Shopify App Proxy. We hebben een maatwerk betalingsflow geïmplementeerd via Mollie, die het mogelijk maakt om SEPA en creditcard mandaten op te slaan zodat maandelijks betalingen voor de active klanten kunnen worden aangemaakt.
API integraties & Shopify extensie
Door de limitaties van de standaard Shopify functionaliteit had Parfumado een extern systeem nodig voor the verwerken van data. Met behulp van een maatwerk Ruby on Rails middleware applicatie en de ShopifyApp library waren we instaat de product en klant gegevens vanuit de Shopify store te verrijken waar nodig. Met deze oplossing hebben we diverse externe API's geïntegreerd voor bijvoorbeeld diensten zoals Mollie, PostcodeNL, Mailchimp en meer.
Dit gaf ook de mogelijkheid om extra informatie bij te houden voor klanten zodat zij bijvoorbeeld een kalender plannings tool beschikbaar kregen om hun parfum selectie in te beheren. Naast het verrijken van de data voegt deze middleware ook diverse maatwerk pagina's en componenten toe, met behulp van de Shopify App Proxy, zodat deze alsnog in de context van de store draaien en daarmee een samenhangende en onverstoorde gebruikers ervaring kunnen behouden.
Omdat de middleware in een aparte omgeving draait hadden we ook de mogelijkheid om hoge performance achtergrondprocessen the introduceren, waarmee we op basis van Parfumado's vast groeiende klanten bestand kunnen optimaliseren wanneer nodig. Een voorbeeld van een van deze processen is het vast zetten van de parfum selectie wat twee keer per maand gebeurd en waarbij tevens de bestellingen worden aangemaakt en de automatische incasso betalingen worden gepland. Op deze manier worden er duizenden bestellingen aangemaakt in Shopify zonder dat hier nog handmatig werk aan te pas komt.
Mollie Recurring betalingen
Wanneer klanten zich voor het eerst aanmelden bij Parfumado en het abonnement start word er een mandaat voor hun bank account of credit card aangemaakt, met behulp van Mollie, waarmee het mogelijk word om automatisch geld te incasseren op basis van hun abonnement. Elke maand worden de kosten voor de active abonnementen automatisch in rekening gebracht. Hierdoor is er voor elke opvolgende betaling dus geen interactie meer nodig van de klant en zal de afschrift automatisch op hun bank of credit card verschijnen.
Er blijven natuurlijk situaties waarbij het wel nodig is voor een klant om in te grijpen. Als een automatische incasso mislukt, worden klanten hiervan automatisch op de hoogte gesteld door de middleware applicatie. De meest voorkomende redenen voor een mislukte afschrijving zijn: te weinig saldo, ingestelde limieten, verlopen mandaten en storneringen. In het geval van een mislukte betaling is de klant zelf instaat dit via het platform op te lossen zodat ze alsnog hun parfum kunnen ontvangen en Parfumado niet hoeft in te grijpen. De klant ontvangt in de mail namelijk een link waarin het account opnieuw geactiveerd kan worden en de openstaande bedragen direct voldaan kunnen worden.
Deze automatisering in het opnieuw doen van een betaling is essentieel om een prettige gebruikers ervaring te waarborgen wanneer er SEPA word gebruikt voor het incasseren van betalingen.
Vue.js frontend
De interactive elementen in de Shopify store zijn ontwikkeld in Vue.js. Een van deze elementen is de parfum kalender, waar klanten hun keuzes kunnen slepen om de volgorden aan te passen en zo hun selectie per maand te kunnen maken.
De maatwerk betalingspagina voor Parfumado is ook compleet in Vue.js geschreven. Hierdoor wordt bijvoorbeeld autocomplete toegevoegd voor adressen. Op basis van postcode en huisnummer wordt zo het adres aangevuld om fouten tijdens invoeren te minimaliseren en daarmee te waarborgen dat de bestellingen altijd correct aankomen.
Ook de account pagina beschikt over enkele Vue componenten. Dingen zoals bijvoorbeeld het tonen van hoeveel dagen het nog duurt voor het volgende parfum binnen zal komen, welke betalingsmethode er actief is en de selectie mogelijkheid van cadeaus die je verdient hebt door vrienden aan te brengen.
