Checkout
The marketplace is ready to use, but customers aren’t going to easily be able to tell which roaster sells which coffee. Let’s make a few small changes to the example templates, to make that more obvious.
Customize templates
In the Cart, you might show the roaster name as part of the line item:
{# Query the roaster associated with the product #}
{% set roaster = item.purchasable.product.roaster.one() ?? null %}
{% if roaster %}
<div class="mb-1 text-xs">{{ roaster.title }}</div>
{% endif %}
Giving you something like this:
Similarly, you might want to show the roaster name in the product grid and product detail page, too:
{% set roaster = product.roaster.one() %}
<div class="text-sm w-2/3">
{{ roaster.title|default('') }}
</div>
<div class="relative text-lg text-bold mb-2 flex items-baseline leading-tight">
<div class="w-2/3">
<a class=" text-blue-500 hover:text-blue-600" href="{{ product.url }}">
{{ product.title|title }}
</a>
</div>
<div class="w-1/3 text-right">
<span>{{ product.defaultPriceAsCurrency }}</span>
</div>
</div>
<p class="text-sm">
{{ product.description|default('This is a pretend product description, placeholdering here for you to swap with something better.')|t }}
</p>
{% set roaster = product.roaster.one() %}
<div class="text-sm w-2/3">
{{ roaster.title|default('') }}
</div>
<div class="relative text-lg text-bold mb-2 flex items-baseline leading-tight">
<div class="w-2/3">
<a class=" text-blue-500 hover:text-blue-600" href="{{ product.url }}">
{{ product.title|title }}
</a>
</div>
<div class="w-1/3 text-right">
<span>{{ product.defaultPriceAsCurrency }}</span>
</div>
</div>
<p class="text-sm">
{{ product.description|default('This is a pretend product description, placeholdering here for you to swap with something better.')|t }}
</p>
I’ve made a few other small changes to distinguish coffees: a description field, to override the placeholder description, and a colour field to give each different roaster a Tailwind colour class to use.
Checkout
Now, you have at least two different roasters onboarded, each with a different coffee. Customers can tell which roaster we are purchasing different coffees from—but can still add whichever ones they want to our cart.
If we were to checkout with both products in our cart, we’d expect the end customer would pay once for the total, we’d keep a 10% fee, and each roaster would get their remaining portion of the money—all without any manual payout management from us.
In a new private browsing window, so you aren’t already logged into Craft, visit the site, add at least two products to your cart, and checkout.
The example templates allow you to skip filling in the shipping portion of the order, by using the step headings. You can skip ahead to payment.
Choose the Stripe gateway, and complete payment using the Stripe test card number:
4242 4242 4242 4242
You can fill in any valid date and CVC.
You have successfully made a purchase from your new marketplace!
Review the transaction on Stripe
Your stint pretending to the be the customer is over—you can now return to your marketplace business-runner persona.
Let’s switch over to your platform’s Stripe dashboard, to see how this transaction appears.
You can see the payment went through on Stripe:
This transaction has the metadata that Commerce includes automatically, like the order ID and order number, making it easy to find the corresponding order in Craft Commerce.
It also includes transaction group, which indicates payment splitting has occurred.
At the time of writing, this ID isn’t a clickable link in the Stripe dashboard, but you can copy it and search it. This will take you to a different view showing all the details you need about this group of transactions:
Let’s check the payment splitting has occurred as we expect.
The original order was for one $10 coffee and one $12 coffee. The marketplace we’re building took a 10% fee on each of them. So the result should be:
| Payee | Amount |
|---|---|
| Marketplace (via fee) | $2.20 |
| Roaster 1 | $9.00 |
| Roaster 2 | $10.80 |
| Total | $22.00 |
We see that reflected in the Stripe results.
The Stripe account has kept $2.20, and a transfer has been made to one account for $9.00, and another account for $10.80. The acct_ IDs that are referenced are the same ones you’ll see if you visit the entries for Roaster 1 and Roaster 2.
We can even go back and login as Roaster 1 again—imagining we want to check on our payouts ourselves—and login to our own Stripe Express dashboard. It will show us that we have one $9.00 payout pending.