forked from magento/devdocs
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Create Customize buttons and messaging topic and add to TOC
- Loading branch information
1 parent
f0416d7
commit 1af70f5
Showing
2 changed files
with
122 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,117 @@ | ||
| --- | ||
| group: payment-services | ||
| title: Customize buttons and messaging | ||
| --- | ||
|
|
||
| You can easily customize [PayPal Smart button styling](#paypal-smart-buttons) and [PayPal PayLater messaging, styling, and layout](#paypal-paylater) on the product page, in the shopping cart, and in the mini cart for Payment Services. | ||
|
|
||
| ## PayPal Smart Buttons | ||
|
|
||
| To easily customize Smart Button styling, create a module with a dependency on `Magento_PaymentServicesPaypal`. | ||
|
|
||
| 1. In the [`di.xml` file]({{ site.baseurl }}{{ site.gdeurl }}/extension-dev-guide/build/di-xml-file.html), create a new type entitled `Magento\PaymentServicesPaypal\Block\SmartButtons`. | ||
| 1. In the `arguments` block, specify one argument entitled `componentConfig` and `xsi:type="array"`. | ||
| 1. Under this new argument, specify three items entitled `product`, `cart`, and `minicart` with `xi:type="array"`. | ||
| 1. Under each item, specify a nested item entitled `styles` with `xsi:type="array"`. | ||
| 1. Reference [PayPal's available styling](https://developer.paypal.com/docs/archive/checkout/how-to/customize-button/) and apply any desired parameters as nested items. | ||
|
|
||
| ``` xml | ||
| <type name="Magento\PaymentServicesPaypal\Block\SmartButtons"> | ||
| <arguments> | ||
| <argument name="componentConfig" xsi:type="array"> | ||
| <item name="product" xsi:type="array"> | ||
| <item name="styles" xsi:type="array"> | ||
| <item name="layout" xsi:type="string">horizontal</item> | ||
| <item name="color" xsi:type="string">gold</item> | ||
| <item name="shape" xsi:type="string">rect</item> | ||
| <item name="label" xsi:type="string">paypal</item> | ||
| <item name="tagline" xsi:type="boolean">false</item> | ||
| </item> | ||
| </item> | ||
| <item name="cart" xsi:type="array"> | ||
| <item name="styles" xsi:type="array"> | ||
| <item name="layout" xsi:type="string">vertical</item> | ||
| <item name="color" xsi:type="string">gold</item> | ||
| <item name="shape" xsi:type="string">rect</item> | ||
| <item name="label" xsi:type="string">paypal</item> | ||
| <item name="tagline" xsi:type="boolean">false</item> | ||
| </item> | ||
| </item> | ||
| <item name="minicart" xsi:type="array"> | ||
| <item name="styles" xsi:type="array"> | ||
| <item name="layout" xsi:type="string">vertical</item> | ||
| <item name="color" xsi:type="string">gold</item> | ||
| <item name="shape" xsi:type="string">rect</item> | ||
| <item name="label" xsi:type="string">paypal</item> | ||
| <item name="tagline" xsi:type="boolean">false</item> | ||
| </item> | ||
| </item> | ||
| </argument> | ||
| </arguments> | ||
| </type> | ||
| ``` | ||
| > Sample Smart Buttons customization | ||
| ## PayPal PayLater | ||
|
|
||
| To easily customize the PayPal PayLater messaging, style, and layout, create a module with a dependency on `Magento_PaymentServicesPaypal`, for the [product page, cart, minicart](#create-module-for-product-page-cart-and-minicart), or [checkout page](#create-module-for-checkout-page), and then [edit the styling of the module](#edit-the-styling). | ||
|
|
||
| ### Create module for product page, cart, and minicart | ||
|
|
||
| 1. In the `di.xml` file, create a new `type` entitled `Magento\PaymentServicesPaypal\Block\Message`. | ||
| 1. In the `arguments` block, specify one argument entitled `componentConfig` and `xsi:type="array"`. | ||
| 1. Under this new argument, specify three items entitled `product`, `cart`, and `minicart` with `xsi:type="array"`. | ||
|
|
||
| ### Create module for checkout page | ||
|
|
||
| 1. In the [`di.xml` file]({{ site.baseurl }}{{ site.gdeurl }}/extension-dev-guide/build/di-xml-file.html), create a new type entitled `Magento\PaymentServicesPaypal\Model\SmartButtonsConfigProvider`. | ||
| 1. In the `arguments` block, specify one argument entitled `messageStyles` and `xsi:type="array"`. | ||
|
|
||
| ### Edit the styling | ||
|
|
||
| 1. Under each element (for the `product`, `cart`, `minicart`, or `checkout`), specify a nested item entitled `styles` with `xsi:type="array"`. | ||
| 1. Reference [PayPal's available styling](https://developer.paypal.com/docs/business/pay-later/us/integrate/customize-messages/) and apply any desired parameters as nested items. | ||
|
|
||
| ``` xml | ||
| <type name="Magento\PaymentServicesPaypal\Block\Message"> | ||
| <arguments> | ||
| <argument name="componentConfig" xsi:type="array"> | ||
| <item name="product" xsi:type="array"> | ||
| <item name="styles" xsi:type="array"> | ||
| <item name="layout" xsi:type="string">text</item> | ||
| <item name="logo" xsi:type="array"> | ||
| <item name="type" xsi:type="string">inline</item> | ||
| </item> | ||
| </item> | ||
| </item> | ||
| <item name="cart" xsi:type="array"> | ||
| <item name="styles" xsi:type="array"> | ||
| <item name="layout" xsi:type="string">text</item> | ||
| <item name="logo" xsi:type="array"> | ||
| <item name="type" xsi:type="string">inline</item> | ||
| </item> | ||
| </item> | ||
| </item> | ||
| <item name="minicart" xsi:type="array"> | ||
| <item name="styles" xsi:type="array"> | ||
| <item name="layout" xsi:type="string">text</item> | ||
| <item name="logo" xsi:type="array"> | ||
| <item name="type" xsi:type="string">inline</item> | ||
| </item> | ||
| </item> | ||
| </item> | ||
| </argument> | ||
| </arguments> | ||
| </type> | ||
| <type name="Magento\PaymentServicesPaypal\Model\SmartButtonsConfigProvider"> | ||
| <arguments> | ||
| <argument name="messageStyles" xsi:type="array"> | ||
| <item name="layout" xsi:type="string">text</item> | ||
| <item name="logo" xsi:type="array"> | ||
| <item name="type" xsi:type="string">inline</item> | ||
| </item> | ||
| </argument> | ||
| </arguments> | ||
| </type> | ||
| ``` | ||
| > Sample PayLater customization |