Here is an excerpt from our step-by-step guide "Creating a custom checkout pane for Drupal Commerce in Drupal 8". The rest can be found here: https://ws.agency/blog/creating-custom-checkout-pane-drupal-commerce-drupal-8
"In this article, I'll show how you can create a custom checkout pane for Drupal Commerce in Drupal 8. For this purpose, we'll create a checkout pane with a configuration form and the ability for users to add coupons to their order.
Checkout pane needs to be created with the correct annotation and in the correct namespace. We'll create CommerceCoupons class in module_name/src/Plugin/Commerce/CheckoutPane directory with annotation like in code below.
namespace Drupal\module_name\Plugin\Commerce\CheckoutPane;
use Drupal\commerce_checkout\Plugin\Commerce\CheckoutFlow\CheckoutFlowInterface;
use Drupal\commerce_checkout\Plugin\Commerce\CheckoutPane\CheckoutPaneBase;
use Drupal\commerce_checkout\Plugin\Commerce\CheckoutPane\CheckoutPaneInterface;
use Drupal\Core\Entity\EntityTypeManagerInterface;
use Drupal\Core\Form\FormStateInterface;
/**
* Provides the coupons pane.
*
* @CommerceCheckoutPane(
* id = "coupons",
* label = @Translation("Redeem Coupon"),
* default_step = "order_information",
* )
*/
class CommerceCoupons extends CheckoutPaneBase implements CheckoutPaneInterface {
/**
* {@inheritdoc}
*/
public function __construct(array $configuration, $plugin_id, $plugin_definition, CheckoutFlowInterface $checkout_flow, EntityTypeManagerInterface $entity_type_manager) {
parent::__construct($configuration, $plugin_id, $plugin_definition, $checkout_flow, $entity_type_manager);
}
This means that our custom checkout pane will have an id 'coupons' and will be labelled as Redeem Coupon and will be set on order information step by default.
First, we'll create the settings (configuration) form for our pane. For this purpose, we'll have settings if we, for example, want to set up that user has the ability to redeem only one coupon on order. For this, we'll have to implement four functions.
First, we'll setup our default configuration.
/**
* {@inheritdoc}
*/
public function defaultConfiguration() {
return [
'single_coupon' => FALSE,
] + parent::defaultConfiguration();
}
Then we'll implement summary for our configuration form.
/**
* {@inheritdoc}
*/
public function buildConfigurationSummary() {
$summary = !empty($this->configuration['single_coupon']) ? $this->t('Single Coupon Usage on Order: Yes') : $this->t('Single Coupon Usage on Order: No');
return $summary;
}
Next, we'll build our configuration form..." Continue reading...
