Content Relationships guide, Orchard Core Commerce Stripe Payment - This week in Orchard (09/09/2022)
It's time to publish the results of the Orchard Core Commerce survey and the topics that made it into the MVP as the short-term goals. And we have just added Stripe payment integration to the checkout process! Check out our post for the details!
Orchard Core updates
Content Relationships guide
How can you relate (connect) content items to other content items in Orchard Core? When would you use each built-in option? This new guide aims to clear up the available options by detailing:
- Bag Part (BagPart) for Embedding Content Items within a Parent Item
- Content Picker Field for Many-to-Many Relationships of Specific Items
- Flow Part (FlowPart) for Building Structured, Responsive Layouts
- List Part for One-To-Many Hierarchical Relationships
- Taxonomies for Categorization and Tagging
Demos
Orchard Core Commerce Stripe Payment
Orchard Core Commerce will be an Orchard Core port and partial rewrite of the open-source Nwazet Commerce module that was built for Orchard CMS 1.x. Nwazet Commerce was initially built in 2012 by Bertrand Le Roy, loosely based on a commerce sample by Sipke Shoorstra. The initial goal of Nwazet Commerce was to power the website of the hardware startup Nwazet. While Nwazet is no longer operating, the Nwazet Commerce project went on and was further developed by a group of passionate contributors who are using the platform for their own, and their customer's websites.
Like Orchard, Nwazet Commerce was built with extensibility in mind, and as such, it has its own extensions (typical examples include local tax and shipping modules). It's also pure, idiomatic Orchard.
Orchard Core represents a major evolution of the Orchard design principles and is sufficiently different that running Nwazet Commerce on it will necessitate significant work. As such, the community decided that starting from a blank slate was the best way to go, so they will port Nwazet Commerce piece by piece, being careful to accurately apply Orchard Core's new design principles. The community also decided to adopt a new name that gets rid of the now obsolete origins and establishes our ambition for the module to become the go-to commerce module for Orchard Core.
And at the beginning of May, we published a demo where you could see the current state of the module. This time we will see a demo about the basic implementation of Stripe Payment integration (without taxation, shipping, etc.). Stripe is a payment service provider that business owners can use to accept dozens of payment methods, from credit cards to buy now, pay later services. Stripe Payments handles the steps between a customer providing their card information and learning that their payment has been accepted.
You can try out the Orchard Core Commerce solution just by cloning the repository from GitHub, or you can download it as a NuGet package as well from NuGet.org.
For this demo, we will set up our site by using the OrchardCore Commerce - Development recipe, which adds some built-in content to our site that we can use during development (and during our demo of course).
After, we can head to Configuration -> Features and enable the three commerce-related modules:
- Orchard Core Commerce: Registers the core components used by the Commerce features.
- Orchard Core Commerce Session Cart Storage: Registers session-based shopping cart persistence.
- Orchard Core Commerce Settings Currency Selector: Currency selector that uses display currency configured in settings. Useful for Dev/Test scenarios.
Now we can set up the Stripe API (Configuration -> Settings -> Stripe AP) by providing the publishable and the secret key.
These keys are publicly available test keys, so feel free to use them for testing and development. The Readme.md file of the Commerce module also contains these keys.
Now let's navigate to Content -> Content Items to check our predefined content items. The Product is a content type that can be added to the cart, and users can pay the price of the products. We have one, called TestProduct, let's add another one called Cheese.
Here you can see we can set up the name, the SKU, and the base price of the product with the currency used as well. Let's say this Cheese will cost 4.50 USD. Now it's time to add the predefined product and the Cheese to the shopping cart! You can do that by navigating the details page of a product, and after setting up the quantity, you can click on the Add to cart button.
Let's say we would like to add one Cheese and one TestProduct to our shopping cart. The shopping cart is available under the /cart URL, but the site will redirect you to this URL too, if you click on the Add to cart button. As you can see here, our cart contains two items: one TestProduct with a price of $5.00 and one Cheese with a price of $4.50, which costs $9.50. It's time to pay by clicking on the Checkout button!
On the checkout page, you can set up your billing address and shipping address but let's focus on the credit card field right now, which comes from the Stripe API. You can find some credit cards in the Stripe documentation and in the Orchard Core Commerce Readme that can be used for testing different scenarios. Like handling a card that has insufficient funds or which has expired. But you can also use a card that requires 3D Secure 2 authentication.
The 3D Secure standard - often known by its branded names like Visa Secure, Mastercard Identity Check, or American Express SafeKey - aims to reduce fraud and provide added security to online payments. 3D Secure 2 (3DS2) introduces "frictionless authentication" and improves the purchase experience compared to 3D Secure 1. It is the main card authentication method used to meet Strong Customer Authentication (SCA) requirements in Europe and a key mechanism for businesses to request exemptions to SCA.
It means you cannot pay right away because you will see Stripe's own 3DS2 authentication panel. In live mode, you can see the bank's authentication panel here. If you click on the Complete button here, you can imitate that the purchase was successful. And in that case, the module will redirect you to a "Thank you for your purchase" page.
And after a successful payment, a new Order content item will be created, which you can see on the content items list. Right now, the Order content item contains an automatically generated Order Id, a list with the charges (kind, amount, charge text, etc.), and the status of the order. The order contains the billing address and the shipping address as well.
And that's not everything! If you want to know more regarding the current state of the Orchard Core Commerce module, don't hesitate to check out this recording on YouTube!
News from the community
Orchard Core Commerce survey results and MVP
As you may know, Lombiq provides stewardship for the Orchard Core Commerce module. That actually means that we will do code reviews and work on features and fixes. To have that, we started this thread and added an Orchard Core Commerce MVC planning survey. This was about asking the community what the most essential features for you would be in an Orchard Core-based e-commerce solution.
And now, we have the results and published an announcement of what will be in the MVP and the short-term vision of the project. Thanks to your feedback, we have a more straightforward impression of the community's priorities, and some new developments are already coming in. Feel free to check it out and join the discussion especially related to the bigger issues like taxation or discounts.
Orchard Dojo Newsletter
Lombiq's Orchard Dojo Newsletter has 345 subscribers! We have started this newsletter to inform the community around Orchard of the latest news about the platform. By subscribing to this newsletter, you will get an e-mail whenever a new post is published to Orchard Dojo, including This week in Orchard of course.
Do you know of other Orchard enthusiasts who you think would like to read our weekly articles? Tell them to subscribe here!