# Storefront Flow
This section showcases how Inbank payment methods work at checkout.
Note that the following screenshots are only demonstrational. The actual way the Inbank payment methods appear in your WooCommerce store depends on the storefront theme, plugin settings, the Inbank branch with which you have concluded the contract and the locale of your store.
1. On the product page, the Inbank installment calculator is displayed as a JS calculator highlighting the estimated monthly payment.
When the customer clicks on the calculator, a calculator modal opens, allowing the customer to explore the available financing options interactively, especially for Hire Purchase type payment options.
The modal also displays detailed information about the financing terms, including contract fee, administration fee, and the annual percentage rate (APR).
This allows the customer to clearly understand the financing conditions and choose the payment plan that best fits their needs before proceeding to checkout.

<p align="left">
<img src="/static/modules/woocommerce/product.jpg" class="frame" border="1px"/>
</p>
Pictured below: pop-up window for the Inbank Hire Purchase / Inbank Split into parts payment product.
<p align="left">
<img src="/static/modules/woocommerce/product-popup.jpg" class="frame" border="1px"/>
</p>
Pictured below: pop-up window for the Inbank Moki / Inbank HP Flex payment product.
<p align="left">
<img src="/static/modules/woocommerce/product-popup2.jpg" class="frame" border="1px" title="value"/>
</p>
1. At checkout, the available Inbank payment products (based on the delivery country) appear as payment methods.
When the customer selects an Inbank payment method, the respective payment details are displayed.
Clicking on these payment option details opens the calculator modal, where the customer can review the financing details just as on the product page, but reflecting the total cart value instead of a single product price.

<p align="left">
<img src="/static/modules/woocommerce/checkout.jpg" class="frame" border="1px"/>
</p>
<p align="left">
<img src="/static/modules/woocommerce/checkout-popup.jpg" class="frame" border="1px"/>
</p>
1. Once customers choose Inbank products as their payment method and click <b>Place order</b>, they are redirected to the Inbank e-POS environment. Here customers go through a number of dialogs to complete the financing of the purchase.
2. After completing the procedure in Inbank e-POS, customers are redirected back to the shop.

If the purchase has been financed by Inbank, the customer will be redirected to the page configured in your WooCommerce instance as the payment success page. Otherwise, the customer will be redirected back to the cart where they can choose an alternative payment method.
<p align="left">
<img src="/static/modules/woocommerce/order-received.jpeg" class="frame" border="1px"/>
</p>
Payment transactions can be viewed at <b>WooCommerce</b> > <b>Orders</b>.
Until the credit contract has been signed by the customer and approved by Inbank for financing, it remains in status <b>Pending payment</b>.
Orders which have been successfully financed by Inbank receive status <b>Processing</b>.
If the flow is configured to require merchant approval prior to concluding the credit contract, the order which has been approved by Inbank for financing receives status <b>On hold</b>. In this state the order awaits the merchant's approval or cancellation. If the merchant approves the contract, the order receives status <b>Processing</b>. Contracts are approved and cancelled through the Inbank Partner Portal.
</p></p></p>