Better checkout payment fields template with new filters for it

[yunusga]

Проблемы

Не всем понятная отображённая информация метода оплаты

Базовое отображение контролов оплаты при первой покупке приводило некоторых пользователей в замешательство, из-за надписей Выберите карту для оплаты или оплатите новой: и "Оплатить другой картой"

Скриншот базового состояния

Кастомизация и мульти-язычность

Не возможности переопределять некоторые блоки и строки шаблона метода оплаты.

Решение

Изменение отображения в зависимости от наличия токенов

Теперь если у покупателя нет сохранённых токенов или покупатель не авторизован, в описании метода отображается текст:

Для оплаты заказа вы будете перенаправлены на страницу сервиса Cloud Payments.

Скриншот при отсутствии токенов

Для доступа к изменению текста добавлен фильтр cloudpayments_checkout_no_tokens_text

Требуемые контролы при этом скрываются с помощью CSS (иначе шаблон получался слишком запутанным и сложным).

---

CSS классы

Блок	С токенами	Без токенов
.cloud-payments	.cloud-payments--has-tokens	.cloud-payments--no-tokens
.cloud-payments-pay-other-card		.hide-widget_control
.cloud-payments-save-card	.hide-save_cart

---

Фильтр cloudpayments_checkout_token_choose_title_html

Позволяет изменять текст информации о выборе одной из сохранённых карт в случае их наличия.

Код cloudpayments_checkout_token_choose_title_html

echo apply_filters( // phpcs:ignore
    'cloudpayments_checkout_token_choose_title_html',
    sprintf(
        '<p class="cloud-payments__choose-title">%s</p>',
        esc_html__( 'Выберите карту для оплаты или оплатите новой:', 'cloudpayments' )
    ),
    $tokens
);

---

Фильтр cloudpayments_checkout_token_control_html

Позволяет изменять разметку контрола выбора из сохранённых карт т.к. иногда необходимо: звёздочки сделать одним цветом, последние 4 цифры другим, иконку подстроить под название карты и т.д.

Код cloudpayments_checkout_token_control_html

echo apply_filters( // phpcs:ignore
    'cloudpayments_checkout_token_control_html',
    sprintf(
        '<label class="cloud-payments-token-control"><input type="radio" onclick="saveCartBox();" name="cp_card" id="cp_card%s" value="%s" %s>%s</label>',
        esc_attr( $key ),
        esc_attr( $token->get_id() ),
        checked( 1, $key, false ),
        esc_html( $token->get_card_type() . ' ************' . $token->get_last4() )
    ),
    $key,
    $token,
    $tokens
);

---

Фильтр cloudpayments_checkout_no_tokens_text

Позволяет изменять текст информации об оплате в случае если нет сохранённых токенов.

Код cloudpayments_checkout_no_tokens_text

echo apply_filters( // phpcs:ignore
    'cloudpayments_checkout_no_tokens_text',
    '<p>' . esc_html__( 'Для оплаты заказа вы будете перенаправлены на страницу сервиса Cloud Payments.', 'cloudpayments' ) . '</p>',
    $tokens
);

---

Фильтр cloudpayments_checkout_token_control_html

Позволяет изменять разметку контрола выбора из сохранённых карт т.к. иногда необходимо: звёздочки сделать одним цветом, последние 4 цифры другим, иконку подстроить под название карты и т.д.

Код cloudpayments_checkout_token_control_html

echo apply_filters( // phpcs:ignore
    'cloudpayments_checkout_token_control_html',
    sprintf(
        '<label class="cloud-payments-token-control"><input type="radio" onclick="saveCartBox();" name="cp_card" id="cp_card%s" value="%s" %s>%s</label>',
        esc_attr( $key ),
        esc_attr( $token->get_id() ),
        checked( 1, $key, false ),
        esc_html( $token->get_card_type() . ' ************' . $token->get_last4() )
    ),
    $key,
    $token,
    $tokens
);

---

Фильтр cloudpayments_checkout_pay_other_card_label

Позволяет изменять текст контрола-переключателя для оплаты новой картой.

Код cloudpayments_checkout_pay_other_card_label

echo apply_filters( // phpcs:ignore
    'cloudpayments_checkout_pay_other_card_label',
    __( 'Оплатить другой картой', 'cloudpayments' ),
    $tokens
);

---

Фильтр cloudpayments_checkout_save_card_label

Позволяет изменять текст контрола включающего сохранение новой карты.

Код cloudpayments_checkout_save_card_label

echo apply_filters( // phpcs:ignore
    'cloudpayments_checkout_save_card_label',
    __( 'Сохранить как основную карту', 'cloudpayments' ),
    $tokens
);

[cloudpayments]

А каким инструментом (мб плагином) можно воспользоваться преимуществом этих фильтров и перевести текст или задать стиль?

[yunusga]

Для переводов необходимо добавить языковые файлы и сделать базовым языком английский, потом можно перевести весь плагин на те языки которые есть у виджет оплаты + научить виджет определять язык самостоятельно а не хардкод в через настройки. Я это делал в другом пул реквесте но там было много изменений, долго не принимали, я его закрыл.

Фильтрами может воспользоваться любой плагин или разработчик который о них знает, поэтому их необходимо включить в документацию.