Skip to main content

Payment Overview Cards

Add a custom payment method overview card in settings

Starting with Shopware 6.4.14.0, you can render a custom card in the new payment method overview. With that, you can replace the default card, where you can toggle the active state of a payment method, with your own component. This allows you, for example, to require an onboarding to your payment provider before activating the payment method.

Parameters

NameRequiredDefaultDescription
positionIdtrueThe position id that is created in the payment overview, where you can add a component section to
paymentMethodHandlerstrueA list of formatted payment method handlers, which are handled by your component and where the default card should not be rendered.
componentfalseThe component name of you custom payment overview card. Only useful, if you have a plugin with a registered component

Extension example

import { ui } from '@shopware-ag/meteor-admin-sdk';

if (sw.location.is(sw.location.MAIN_HIDDEN)) {
// create the position
ui.module.payment.overviewCard.add({
positionId: 'my-custom-payment-overview-position',
paymentMethodHandlers: [
'handler_my_custom_payment_method_one',
'handler_my_custom_payment_method_two',
// ...
],
});

// add your component to that position
ui.componentSection.add({
component: 'card',
positionId: 'my-custom-payment-overview-position',
props: {
title: 'My payment provider',
subtitle: 'We have all the methods that exist',
locationId: 'my-custom-payment-overview-position-before'
}
})
}

// render your view to that location
if (sw.location.is('my-custom-payment-overview-position-before')) {
// your content here
}

Custom plugin component example

import { ui } from '@shopware-ag/meteor-admin-sdk';

// register a custom component
Component.register('my-custom-payment-overview-card', {
template: ``,// your template here
props: {
paymentMethods: {
type: Array,
required: true,
},
},
methods: {
async changePaymentMethodActive(paymentMethod) {
paymentMethod.active = !paymentMethod.active;

this.$emit('set-payment-active', paymentMethod);
},
},
});

// add that component to the payment overview
ui.module.payment.overviewCard.add({
component: 'my-custom-payment-overview-card',
positionId: 'my-custom-payment-overview-position',
paymentMethodHandlers: [
'handler_my_custom_payment_method_one',
'handler_my_custom_payment_method_two',
// ...
],
});