Morel Technology "Request a Friend to Pay" Feature

Paying for someone else's meal at a restaurant can be hard, especially if they're on an app. This feature uses the checkout API to provide a checkout link to another person to pay for your order.

Comment

Inspiration

Morel Technology is a platform that enables every local restaurant and coffee shop to build a great mobile app for online ordering and building customer loyalty. In every app we help create, we provide Apple Pay, Google Pay, as well as credit, debit, and gift cards.

These all work great, but have you ever ran into a situation where the person making an order isn't necessarily the person paying for the order? For example, a teen getting dinner and their parent offering to pay? How about a boss offering to buy coffee for their team before a big conference? Or even when someone is struggling to get a meal that night and needs a friend to help them out?

In these cases, a mobile ordering app is a hassle; either one person places the order, then another sends them money via Cash App, or the person placing the order relays it to the person paying for the order over the phone. These all get the job done, but the mobile ordering experience is not the convent alternative that it should be. We wished for a better way. We found that better way in the Morel "Request a Friend to Pay" feature.

What it does

The Morel "Request a Friend to Pay" feature simply appears as an alternative option for payment when checking out on a Morel app. You can select it the same way you select Apple Pay or a saved credit card.

When you submit your order, your device's share sheet pops up with a link to pay for the order. You simply send that link to another person using the messaging app of your choice.

When the other person receives and taps the link, they will be sent to a Square hosted checkout page where they can pay for the order from the comfort of their phone.

Finally, once the order is paid for, it is sent to the restaurant's POS for fulfillment.

How we built it

The core of this feature is the Square Checkout API. Specifically, we used the CreatePaymentLink endpoint to create the checkout link, then we use the native iOS and Android API's to share that link using the share sheet.

To support the rest of the app, Morel uses the Locations API to retrieve location details, the Catalog API to retrieve the menu, and draft orders in the Orders API to maintain the user's bag while they make their order. For payment options other than "Request a Friend to Pay", Morel uses the In App Payments SDK. Furthermore, Morel is built on Flutter, a mobile UI toolkit supported by Google, and runs it's own postgresql database and Dart Frog API on the Google Cloud Platform.

Challenges we ran into

The biggest technical challenge we faced was that the Checkout API is designed to create quick checkout flows and not necessarily intended to pay for orders that have already been created inside Square. For example, currently there is no way to pass an existing id of an Order to the Checkout API.

We overcame this limitation by simply copying over the data we had collected in the draft order into a new order in the CreatePaymentLink endpoint (things like the line items and fulfillments). Since the original order was never taken out of the draft state, it should never effect the merchant, and it allows us to create the checkout link.

Accomplishments that we're proud of

The biggest accomplishment we see in this project is the user experience of using the feature. Allowing a 3rd party to pay for an order is normally a complicated task, and we wanted to find a way to make it effortless the same way using other payment methods are. We went back and forth for weeks about what the end-user flow should look like to allow a friend to pay. We think what we've settled on is a super easy-to-understand flow for both parties: it follows existing app conventions for the person placing the order, and thanks to the Square Checkout API, it is quick and simple for the person paying.

What we learned

Through this process we've learned a TON about Square's Checkout API. Since we're in the business of making order-ahead mobile apps, we originally didn't think it's particular use-case would be helpful to us. Not only were we wrong, but we thought up a bunch of new ideas for future hackathons.

What's next for Morel Technology "Request a Friend to Pay" Feature

The feature is being rolled out to every Morel app as we speak as an opt-in feature for restaurants. We hope it empowers users to order more freely, which in turn will strengthen the restaurants taking advantage of this dynamic and delightful feature.

Built With

Share this project:

Updates