3D / VR Checkout

Inspiration

This hackathon inspired me to brainstorm new ways that a checkout experience might be presented. After considering various unconventional methods, I remembered using three.js, a JavaScript library that allows developers to easily implement 3D capabilities in their web projects. Three.js also enables VR device support through the WebXR Device API, which means you can put on your Oculus headset or other device and experience checkout that will feel real. To my knowledge, this is the first ever project to integrate Rapyd checkout into a VR-enabled environment.

What it does

Using my band as the subject for this demo, I wanted to create an interactive cube widget. The cube can be manipulated, spun, zoomed in/zoomed out upon, etc. The demo shows a vinyl record product that can be purchased, with one side of the cube showing product details, while another contains a Rapyd checkout form.

Each side contains a distinct feature:

1) Rapyd checkout experience 2) Product info (a vinyl record available to purchase) 3) YouTube Video (you can play music and listen while you checkout!) 4) Tour dates (see the band's schedule)

The idea here is to showcase a new way that bands can present themselves. Users can quickly listen to the band, see upcoming tour dates, and buy a product (such as a vinyl album, in this example), all without ever leaving the same page. Leveraging Rapyd's easy to use checkout experience and its ability to support a wide range of currencies and payment methods, Rapyd's solution was an ideal choice to use in this project.

How we built it

This app uses Node.js to generate the checkout page using a call to the Rapyd API. The Node app generates a checkout page using a signature, which is then embedded onto the page. Next, the other piece of the app is a three.js script that generates an interactive 3D environment. Within this main 3D environment, the checkout page is placed onto one of the cube's sides.

Challenges we ran into

Writing a JS function that takes my API credentials to generate a signature took some intense troubleshooting. I combed through all the examples that I could find to piece together a function that now works perfectly to create the checkout page ID necessary for the page to render.

Accomplishments that we're proud of

I think this is a truly unique project, or at least brings together these components that I do not believe have been brought together before.

What we learned

I learned how to interact with Rapyd API, how to use my credentials to generate a signature that can be used to command the API to create checkout pages and accomplish other tasks.

What's next for 3D / VR Checkout

I'd like to take this example and make it easier for others to create their own cube widgets with embedded checkout to promote all sorts of products and services. I think this could be a hit for restaurants, clothing stores, and collectible stores.

IMPORTANT NOTES on demo

Please be sure to use a WebXR API supported browser to enjoy the demo. I have tested the app in Chrome and Brave, and both of those seem to function fine. I am told Edge should work well, but for this app, please avoid using Firefox or Safari. More info available here on supported devices: https://www.lambdatest.com/web-technologies/webxr

The demo was recorded showing the app working on the Brave browser, which supports the 3D capabilities as you can see, but does not offer full VR support. If you have a true VR device such as an Oculus headset, you will see that the VR button will be enabled.

Built With

• node.js
• rapyd
• three.js
• webxr