Prérequis :

• Charitable Pro 1.8.17+

DonationExpress ouvre vos formulaires de don dans une feuille plein écran, indépendante du thème, lorsque quelqu'un visite sur un téléphone. Au lieu de rendre le formulaire dans votre thème (où un style de thème errant peut pousser un champ hors du bord, réduire un bouton ou casser la zone de paiement sur un petit écran), DonationExpress rend le vrai formulaire de campagne dans sa propre mise en page épurée que votre thème ne peut pas atteindre. Le résultat est un formulaire qui ressemble à tous les téléphones, se charge rapidement et évite les conflits de thème.

L'idée clé n'est pas de « rendre le formulaire réactif ». Les formulaires de Charitable sont déjà réactifs. Le problème que DonationExpress résout est l'interférence du CSS du thème avec le formulaire et la modale sur mobile. DonationExpress résout cela en rendant le vrai formulaire (vrais champs, vrais montants, vraies passerelles) dans un document séparé que le thème ne peut physiquement pas styliser.

DonationExpress est actuellement une fonctionnalité Beta et est désactivée par défaut. Vous l'activez par site dans les paramètres de votre formulaire de don.

Quand l'utiliser

• Votre thème ou constructeur de page stylise le formulaire de don ou la modale d'une manière qui semble cassée sur les téléphones.
• Vous voulez une expérience de don cohérente sur tous les appareils, quel que soit le téléphone du visiteur ou votre thème actif.
• Vous voulez que le formulaire mobile se charge rapidement, sans les scripts et styles de votre thème qui se chargent avec lui.
• Vous acceptez des dons à partir des réseaux sociaux, d'e-mails ou de publicités où la plupart du trafic est sur mobile et où les premières impressions comptent.

Où le trouver

Admin WordPress > Charitable > Paramètres > Formulaire de don

Faites défiler jusqu'aux paramètres de DonationExpress. Il y en a trois :

• DonationExpress – active la fonctionnalité et choisit quels déclencheurs de don l'utilisent.
• Style de coin DonationExpress – la forme du coin pour les boutons et les champs dans la feuille.
• Reçu DonationExpress – ce que la feuille affiche après un don réussi.

Les paramètres de Style de coin et de Reçu sont masqués jusqu'à ce que DonationExpress soit réglé sur autre chose que Désactivé, car seule la feuille les utilise.

L'activer

Le paramètre DonationExpress a trois options :

Option	Ce qu'il fait
Désactivé	DonationExpress est désactivé. Les formulaires de don s'affichent normalement sur mobile. C'est le réglage par défaut.
Boutons de don modaux uniquement	Seuls les boutons de don qui ouvrent une fenêtre contextuelle ou une modale utilisent la feuille. Les formulaires intégrés directement sur une page sont laissés tels quels.
Tous les formulaires de don	Chaque bouton de don, lien et formulaire intégré sur un téléphone utilise la feuille.

Choisissez Boutons de don modaux uniquement si vous aimez déjà l'apparence de vos formulaires intégrés sur mobile et que vous souhaitez uniquement corriger l'expérience de la fenêtre contextuelle. Choisissez Tous les formulaires de don si vous voulez que chaque don mobile, quelle que soit la façon dont il est déclenché, passe par la feuille épurée.

DonationExpress ne s'active que sur les écrans de largeur mobile. Sur les tablettes et les ordinateurs de bureau, vos formulaires s'affichent exactement comme ils le font aujourd'hui. La limite de largeur est de 768 pixels par défaut et est ajustable par un développeur (voir la référence du développeur ci-dessous).

Styliser la feuille

DonationExpress ne lit rien de votre thème, il construit donc son apparence à partir de vos paramètres Charitable existants :

• La couleur d’accentuation provient de la couleur de surbrillance de votre formulaire de don (Charitable > Paramètres > Général > Formulaire de don). Les boutons et les états sélectionnés dans la feuille l’utilisent.
• Le logo provient de votre logo d’e-mail (Charitable > Paramètres > E-mails). S’il est défini, il apparaît en haut de la feuille.
• Le style des coins provient du paramètre Style des coins DonationExpress.

Le paramètre Style des coins contrôle à quel point les boutons et les champs sont arrondis :

Style des coins	Apparence
Vifs	Coins carrés (rayon 0).
Arrondis	Coins légèrement arrondis. C’est la valeur par défaut.
Pill	Boutons et champs entièrement arrondis, en forme de pilule.

Le reçu

Après qu’un don a été effectué, DonationExpress peut afficher l’une des trois choses suivantes. Définissez cela avec l’option Reçu DonationExpress (ajoutée dans Charitable Pro 1.8.17.1) :

Style de reçu	Ce que le donateur voit
Célébration (épuré, minimaliste)	Un écran de remerciement épuré avec une coche et une animation de confettis, plus un bouton Partager, un bouton facultatif Faire un don mensuel, un bouton facultatif Télécharger le reçu PDF et un bouton Fermer. C’est la valeur par défaut.
Détaillé (épuré, ventilation par article)	Le même écran de célébration épuré plus un tableau de ventilation par article (chaque ligne de campagne et le total), pour les donateurs qui veulent voir exactement ce qu’ils ont donné.
Page de reçu standard	La feuille se ferme et le donateur atterrit sur votre page de reçu normale, avec votre thème, exactement comme il le ferait sans DonationExpress.

Les reçus Célébration et Détaillé restent dans la feuille, de sorte que le donateur ne quitte jamais l’expérience épurée. Quelques boutons sur ces reçus n’apparaissent que lorsque la fonctionnalité correspondante est disponible :

• Partager utilise la feuille de partage native du téléphone, afin que les donateurs puissent publier sur les réseaux sociaux ou envoyer un message en un seul clic.
• Faire un don mensuel apparaît uniquement lorsque le module complémentaire Dons récurrents est actif et que le don était un don unique. Il rouvre la feuille configurée pour un don mensuel.
• Télécharger le reçu PDF apparaît uniquement lorsque le module complémentaire Reçus PDF est actif.

Aperçu sans téléphone

Vous n’avez pas besoin de prendre un téléphone pour voir la feuille. En tant qu’administrateur, ouvrez cette URL dans votre navigateur (remplacez NN par l’ID d’une campagne) :

https://yoursite.com/wp-admin/?charitable_action=preview-mobile-form&campaign_id=NN

Il rend le même document de don sans thème que DonationExpress affiche sur un téléphone, vous pouvez donc vérifier vos couleurs, votre logo et votre style de coins sur un écran pleine taille.

Conseils

• DonationExpress affiche le formulaire de campagne réel, ainsi tous les champs, montants suggérés et passerelles que vous avez configurés s'affichent automatiquement. Il n'y a rien à reconstruire.
• Si vous utilisez un plugin de mise en cache ou d'optimisation, assurez-vous que le chemin /charitable-give/ est exclu de la mise en cache. La feuille a besoin de jetons de sécurité frais à chaque chargement, tout comme vos pages de don et de reçu normales.
• Apple Pay et Google Pay fonctionnent dans la feuille. Apple Pay nécessite toujours que votre domaine soit vérifié auprès de votre passerelle de paiement, comme il le fait pour le formulaire normal.
• La fonctionnalité est en version bêta et désactivée par défaut, donc les sites existants ne sont jamais modifiés tant que vous n'avez pas choisi de l'activer.

---

Référence du développeur

DonationExpress affiche le formulaire de don réel de la campagne dans un document nu et sans thème servi depuis un point de terminaison dédié, chargé dans un iframe par une superposition plein écran sur la page parente. Un petit pont postMessage maintient le parent et le cadre synchronisés tout au long du flux de don et de reçu.

Où elle se trouve

Pièce	Emplacement
Bootstrap	Charitable_Mobile (includes/mobile/class-charitable-mobile.php), démarré à la priorité 9 de init
Fonctions d'aide	includes/mobile/charitable-mobile-functions.php
Paramètres et isolation des ressources	includes/mobile/charitable-mobile-hooks.php
Point de terminaison sans thème	Charitable_Mobile_Form_Endpoint(includes/endpoints/class-charitable-mobile-form-endpoint.php)
Modèles	templates/mobile/form-mobile.php, templates/mobile/receipt-mobile.php
Ressources	assets/css/charitable-mobile.css, assets/js/charitable-mobile-{sheet,bridge,receipt}.js

Points de terminaison et URL

Le point de terminaison enregistre deux règles de réécriture et deux variables de requête, et s'affiche sur template_redirect (priorité 0).

Objectif	Permaliens personnalisés	Permaliens simples
Formulaire de don	/charitable-give/{campaign_id}/	?charitable_mobile_form={campaign_id}
Reçu dans la feuille	/charitable-give/receipt/{donation_id}/	?charitable_mobile_receipt={donation_id}

Le document de reçu est contrôlé en accès avec charitable_user_can_access_donation() ; une requête pour un don auquel le visiteur actuel ne peut pas accéder renvoie un 403.

Fonctions d'aide

Fonction	Retours
charitable_mobile_get_mode()	Le mode résolu : off, modal, ou always.
charitable_mobile_is_enabled()	Indique si la feuille est activée ou non (false lorsque le mode est off).
charitable_mobile_get_breakpoint()	Le point d'interruption mobile en pixels (768 par défaut).
charitable_mobile_get_form_url( $campaign_id, $args )	L'URL du formulaire sans thème. $args accepte amount et period.
charitable_mobile_get_receipt_url( $donation_id )	L'URL du reçu dans la feuille sans thème.
charitable_mobile_get_brand_tokens( $campaign_id )	array{ accent, logo, radius } résolu à partir des paramètres de Charitable.
charitable_mobile_get_receipt_style( $campaign_id )	Le style de reçu résolu : confetti, detailed, ou redirect.

Filtres

Filtre	Défaut	Objectif
charitable_mobile_mode	Paramètre enregistré	Force le mode dans le code, par exemple par page ou par campagne. Retourne off, modal, ou always.
charitable_mobile_is_enabled	Dérivé du mode	Porte d'activation/désactivation finale. Retourne false pour désactiver la feuille quel que soit le mode.
charitable_mobile_form_breakpoint	768	Le point d'interruption de largeur maximale, en pixels, qui est considéré comme mobile.
charitable_mobile_brand_tokens	Jetons résolus	Remplace l'accent, le logo, et le radius utilisés pour styliser la feuille.
charitable_mobile_asset_is_allowed	true pour les actifs de Charitable et de passerelle	Liste blanche ou exclure un identifiant de style ou de script spécifique dans le document nu.
charitable_mobile_receipt_style	Paramètre enregistré	Varie le style du reçu par campagne. Retourne confetti, detailed, ou redirect.
charitable_mobile_receipt_pdf_url	URL des reçus PDF ou ''	Remplacez l'URL du bouton PDF, ou renvoyez '' pour le masquer.
charitable_mobile_receipt_monthly_url	URL du formulaire mensuel ou ''	Remplacez l'URL "En faire un mensuel", ou renvoyez ''pour la masquer.
charitable_mobile_receipt_check_icon	Marquage de la coche par défaut	Échangez l'icône de succès affichée sur le reçu.

Actions

Action	Fires
charitable_mobile_form_head	Dans l' <head> du document nu, où les ressources d'en-tête de Charitable et de la passerelle sont imprimées.
charitable_mobile_form_footer	Avant la fermeture </body> du document nu, où les scripts de pied de page sont imprimés.

Aperçu administrateur

?charitable_action=preview-mobile-form&campaign_id=NN redirige un administrateur (manage_options) vers l'URL du formulaire sans thème pour une campagne, afin que la feuille puisse être examinée sur n'importe quelle taille d'écran.

Exemples de personnalisation

Forcer DonationExpress pour une seule page de destination :

add_filter(
    'charitable_mobile_mode',
    function ( $mode ) {
        if ( is_page( 'give-now' ) ) {
            return 'always';
        }
        return $mode;
    }
);

Augmentez le point de rupture pour que les petites tablettes utilisent également la feuille :

add_filter( 'charitable_mobile_form_breakpoint', fn() => 900 );

Remplacez la couleur d'accentuation et le rayon des coins de la feuille :

add_filter(
    'charitable_mobile_brand_tokens',
    function ( $tokens, $campaign_id ) {
        $tokens['accent'] = '#1e88e5';
        $tokens['radius'] = '4px';
        return $tokens;
    },
    10,
    2
);

Affichez le reçu détaillé pour une campagne, célébration partout ailleurs :

add_filter(
    'charitable_mobile_receipt_style',
    function ( $style, $campaign_id ) {
        return 1234 === (int) $campaign_id ? 'detailed' : $style;
    },
    10,
    2
);

Autorisez un gestionnaire de script supplémentaire dans le document sans thème (par exemple, un chargeur de polices personnalisé) :

add_filter(
    'charitable_mobile_asset_is_allowed',
    function ( $allowed, $handle ) {
        if ( 'my-font-loader' === $handle ) {
            return true;
        }
        return $allowed;
    },
    10,
    2
);

Connexes

• Personnalisation du CSS du formulaire de don – style du formulaire de don standard, dans le thème
• Reçus PDF – alimente le bouton Télécharger le reçu PDF sur la feuille
• Dons récurrents – alimente le bouton "En faire un mensuel" sur la feuille