Personnaliser les boutons sur la page de paiement

In MemberMouse’s default checkout page template we include a SmartTag that automatically renders a button for each active payment method. Here’s the SmartTag responsible for this:

[MM_Form_Button type='all']

In order to provide this functionality it’s necessary for us to control the styles of the buttons. There is some minor customization you can do via SmartTag attributes. For example, you can change the color and the button text as follows:

[MM_Form_Button type='all' label='Buy Now' color='green']

Avoir 2 boutons séparés sur une page de paiement

Souvent, vous voudrez avoir un bouton unique sur votre site pour votre passerelle de paiement sur site et votre passerelle de paiement hors site. Pour ce faire, vous devez supprimer le bouton [MM_Form_Button type='all'] de votre code, et ajoutez un bouton spécifique pour chaque passerelle de paiement.

Vous pouvez utiliser ce code pour la passerelle de paiement sur site :

<a href="/fr/[MM_Form_Button type='submit' paymentMethod='default']/" 

class="mm-button blue large rounded">S'inscrire avec Stripe</a>

Et ceci pour la passerelle de paiement hors site :

<a href="/fr/[MM_Form_Button type='submit' paymentMethod='paypal']/"

class="mm-button green large">S'inscrire avec PayPal</a>

Vous pouvez également utiliser une image pour le bouton, en utilisant un code comme celui-ci :

<a href="/fr/[MM_Form_Button type='submit' paymentMethod='paypal']/">

<img src="http://www.paypalobjects.com/en_US/i/btn/x-click-but5.gif"></a>

Utilisez ces snippets si vous souhaitez que vos deux boutons soient placés à des endroits différents sur la page de paiement, ou si vous souhaitez simplement mieux contrôler l'aspect et la position des boutons.

Contrôle total des styles de boutons

Si vous souhaitez avoir un contrôle total sur les styles et la disposition des boutons, vous pouvez utiliser la configuration SmartTag suivante :

[MM_Form_Button type='submit' paymentMethod='paypal']

Il s'agit simplement d'un lien qui soumet le formulaire à la méthode de paiement que vous avez spécifiée dans l'attribut paymentMethod. Comme il ne s'agit que d'un lien, il vous incombe de déterminer comment il sera affiché à l'écran en utilisant la balise intelligente avec un attribut <a> ou <button> (étiquette). Par exemple, vous pouvez faire ce qui suit :

<a href="/fr/[MM_Form_Button type='submit' paymentMethod='paypal']/">Paiement avec PayPal</a>

Remarque : Une fois que vous avez cessé d'utiliser le [MM_Form_Button type='all'] SmartTag which automatically creates a button for each active payment method, you’re responsible for creating each button you want included on the checkout page by using the [MM_Form_Button type='submit' paymentMethod=''] Configuration du SmartTag.

Lire cet article pour documentation complète sur la balise SmartTag Form_Button.

Cet article détaille les attributs que vous pouvez utiliser pour style des boutons sur la page de paiement.