Position the card icons beside the label instead of beneath the fields on the checkout form.

This commit is contained in:
inpsyde-maticluznar 2024-10-10 07:22:22 +02:00
parent fcddaa1204
commit 7c111906ab
No known key found for this signature in database
GPG key ID: D005973F231309F6
2 changed files with 28 additions and 23 deletions

View file

@ -1,19 +1,30 @@
import { registerPaymentMethod } from '@woocommerce/blocks-registry';
import { CardFields } from './Components/card-fields';
import {registerPaymentMethod} from '@woocommerce/blocks-registry';
import {CardFields} from './Components/card-fields';
const config = wc.wcSettings.getSetting( 'ppcp-credit-card-gateway_data' );
const config = wc.wcSettings.getSetting('ppcp-credit-card-gateway_data');
registerPaymentMethod( {
name: config.id,
label: <div dangerouslySetInnerHTML={ { __html: config.title } } />,
content: <CardFields config={ config } />,
edit: <CardFields config={ config } />,
ariaLabel: config.title,
canMakePayment: () => {
return true;
},
supports: {
showSavedCards: true,
features: config.supports,
},
} );
const Label = ({components, config}) => {
const {PaymentMethodIcons} = components;
return <>
<span dangerouslySetInnerHTML={{__html: config.title}}/>
<PaymentMethodIcons
icons={ config.card_icons }
align="right"
/>
</>
}
registerPaymentMethod({
name: config.id,
label: <Label config={config}/>,
content: <CardFields config={config}/>,
edit: <CardFields config={config}/>,
ariaLabel: config.title,
canMakePayment: () => {
return true;
},
supports: {
showSavedCards: true,
features: config.supports,
},
});