Payment module

This topic covers the payment module and explains how to configure it in Microsoft Dynamics 365 Commerce.

The payment module lets customers pay for orders by using credit or debit cards. Payment integration for this module is provided by the Dynamics 365 Payment Connector for Adyen. For more information about how to set up and configure the payment connector, see Dynamics 365 Payment Connector for Adyen.

As of Commerce release 10.0.14, the payment module has also been integrated with the Dynamics 365 Payment Connector for PayPal to allow customers to pay for orders using PayPal. For more information on how to set up and configure the Dynamics 365 Payment Connector for PayPal, see Dynamics 365 Payment Connector for PayPal.

Dynamics 365 Payment Connector for Adyen

The payment module hosts the payment information that is served via Adyen in an HTML inline frame (iframe). The payment module interacts with the Commerce Scale Unit to retrieve the Adyen payment information. As part of the Commerce Scale Unit interaction, the payment module can allow billing address information to be served either in the iframe via Adyen or as a separate module. In the Fabrikam theme, the billing address is enabled as a separate module. This approach allows for more formatting flexibility, because the address lines can be rendered so that they resemble the lines of the shipping address.

The payment module also lets signed-in customers save their payment information. The payment information and billing address are saved and managed via the Adyen payment connector.

The payment module covers any order charges that aren't already covered by loyalty points or a gift card. If the total for an order is fully covered by loyalty points or gift card credits, the payment module will be hidden, and the customer will be able to place the order without it.

The Adyen payment connector also supports strong customer authentication (SCA). Part of the European Union (EU) Revised Payment Services Directive (PSD2) requires that online shoppers be authenticated outside of their online shopping experience when they use an electronic payment method. During the checkout flow, customers are redirected to their banking site, and then after authentication they are redirected back to the Commerce checkout flow. During this redirection, the information that a customer has entered during the checkout flow (for example, shipping address, delivery options, gift card information, and loyalty information) will persist. Before you can turn on the Adyen payment connector feature, the payment connector must be configured for SCA in Commerce headquarters. For more information, see Strong Customer Authentication using Adyen. This feature was enabled in Commerce release 10.0.12.

Note

For the Adyen payment connector, the iframe module in the payment module can be rendered only if you add the Adyen URL to your site's allow list. To complete this step, add *.adyen.com to the child-src, connect-src, img-src, script-src, and style-src directives of your site's content security policy. For more information, see Manage Content Security Policy.

The following illustration shows an example of gift card, loyalty, and Adyen payment modules on a checkout page.

Example of gift card, loyalty, and Adyen payment modules on a checkout page

Dynamics 365 Payment Connector for PayPal

As of Commerce release 10.0.14, the payment module is also integrated with the Dynamics 365 Payment Connector for PayPal. For more information about how to set up and configure this payment connector, see Dynamics 365 Payment Connector for PayPal.

On the checkout page, you can have both Adyen and the PayPal connectors configured. The payment module has been enhanced with additional properties to help identify which connector it should work with. For details, see the Supported tender types and Is primary payment module properties in the followingt table.

When the payment module is configured to use the PayPal payment connector, a PayPal button appears on the checkout page. When invoked by the customer, the payment module renders an iframe containing PayPal information. The customer can sign in and provide their PayPal information within this iframe to complete their transaction. When a customer chooses to pay with PayPal, the remaining balance on the order will be charged via PayPal.

The PayPal payment connector does not require a billing address module because all billing-related information is handled by PayPal within its iframe. However, the shipping address and delivery options modules are required.

The following illustration shows an example of two payment modules on a checkout page, one configured with the Adyen payment connector and the other with the PayPal payment connector. Example of Adyen payment and PayPal modules on a checkout page

The following illustration shows an example of the PayPal iframe invoked using the PayPal button. Example of Paypal iframe on a checkout page

Payment module properties

Property name Values Description
Heading Heading text An optional heading for the payment module.
Height of the iframe Pixels The iframe height, in pixels. The height can be adjusted as required.
Show billing address True or False If this property is set to True, the billing address will be served by Adyen inside the payment module iframe. If set to False, the billing address won't be served by Adyen, and a Commerce user will have to configure a module to show the billing address on the checkout page. For the PayPal payment connector, this field has no impact, as the billing address is fully handled within PayPal.
Payment style override Cascading Style Sheets (CSS) code Because the payment module is hosted in an iframe, there is limited styling capability. You can achieve some styling by using this property. To override site styles, you must paste the CSS code as the value of this property. Site builder CSS overrides and styles don't apply to this module.
Supported tender types String If multiple payment connectors are configured, you should provide the supported tender type string as defined in the Commerce headquarters payment connector configuration (see the followin image). If blank, it defaults to the Adyen payment connector. Added in Commerce release 10.0.14.
Is primary payment True or False If True, any error messages will be generated from the primary payment connector on the checkout page. If both Adyen and PayPal payment connectors are configured, set Adyen to True, which was added in Commerce release 10.0.14.

The following illustration shows an example of the Supported Tender Types value set to "PayPal" in the payment connector configuration in Commerce headquarters. Example of supported tender types in Commerce headquarters

Billing address

A billing address module can be used on the checkout page if the Adyen payment connector billing address lines do not sufficiently match the appearance of the rest of the site.

To use a billing address module on the checkout page when the payment module is integrated with the Adyen payment connector, set the Show billing address property to False so that a dedicated billing address module can be used instead of the default Adyen billing address. In this case, the site author should include a billing address module on the checkout page. The Adyen payment connector also allows the ability to use the shipping address as the billing address to minimize the number of steps for the site user.

Similar to payment modules, a Supported tender types property has been added to the billing address module in Commerce release 10.0.14. The value of this property should be identical to the value provided in the payment module to ensure that they work together. For the Adyen payment connector, both the payment module and the billing address module should leave this value blank (the default state). For the PayPal connector, a dedicated billing address module is not required. For other types of payment connectors, the string should be provided as configured in Commerce headquarters.

Add a payment module to a checkout page and set the required properties

A payment module can be added only to a checkout module. For more information about how to configure a payment module for a checkout page, see Checkout module.

If both Adyen and PayPal payment connectors are needed, add both modules to the payment section. Ensure that the Supported tender types property value is configured for PayPal, and leave it blank for Adyen. Also, set the Is primary payment property to True for Adyen.

Additional resources

Cart module

Cart icon module

Checkout module

Shipping address module

Delivery options module

Pickup information module

Order details module

Gift card module

Dynamics 365 Payment Connector for Adyen

Dynamics 365 Payment Connector for PayPal

Strong Customer Authentication using Adyen