--- title: "Checkout Page" description: "Integrate the Checkout Page, the Fabrick hosted payment page: the buyer chooses the payment method on a page managed by Fabrick, with direct redirect to card or APM and outcome URLs configurable for each transaction." url: "https://docs.fabrick.com/en/payment-hub-and-orchestra/ecommerce/integration-methods/checkout-page/" language: "en" --- # Checkout Page The **Checkout Page** integration allows the merchant to request a payment using the **Fabrick payment page**, where the buyer can select one of the payment methods enabled for the shopLogin. Alternatively, you can perform a **direct redirect** to a specific payment method (APM) or display the **page dedicated to entering the card details**, without going through the selection page. This approach allows a quick implementation with minimal impact on the merchant's infrastructure. Customisation options are more limited than with more advanced integrations, since the interface, the authentication flows and the redirects to other payment methods (APMs) are handled directly by Fabrick. ![Checkout Page](https://docs.fabrick.com/en/assets/images/checkout-page-2-f4ea9b17b6e8cb5ea5c0944888b5f0ad.png) Below is the card details form: ![Checkout Page](https://docs.fabrick.com/en/assets/images/checkout-page-card-cb8953d95f49f1f405aeab13a3d51e6e.png) > **Checkout Page** > > The Checkout Page integration is particularly suited to merchants who need an immediate solution, with no advanced customisation or integration requirements. > **Compatibility** > > The Checkout Page is optimised for use in a browser and does not guarantee compatibility with channels such as WebViews or native applications.\ > For these scenarios you can perform an **external redirect** from the app to the payment link, allowing the customer to complete the payment outside the app context; alternatively, the **API Only** integration offers greater control over the authentication flows and the handling of payment methods. ## Payment initialisation To initialise a payment request you need to use the **`payment/create`** call on the server side. This approach ensures a higher level of security in generating the payload and handling the API key, avoiding the exposure of sensitive information in the front end. The **`payment/create`** call is the basis of the payment request and can be extended by integrating the services provided by Fabrick, such as: - the [**fraud prevention**](https://docs.fabrick.com/en/payment-hub-and-orchestra/ecommerce/features/fraud-prevention/fabrick-guaranteed-payments/) service - the [**Tokenization**](https://docs.fabrick.com/en/payment-hub-and-orchestra/ecommerce/features/token/) features - the **dedicated objects** of the individual payment methods This flexibility allows the merchant to build a complete, customisable payment request in line with their operational needs. The following sections go into detail on how to use the integration and on the parameters to include in the call to customise the payment request. ### Redirect to the payment page To show the **payment page** you need to redirect the buyer to the link generated by Fabrick. The link for the payment request is generated with the **`payment/create`** call, by including in the request the **`channelType`** object populated with **`LINK`**. The system returns in the **`payload.userRedirect.href`** object the payment URL to be used for the redirect. > **Using the link** > > The returned link can be used to redirect the buyer, integrated into the front end (for example behind a button), or included in custom communications such as emails or other messaging channels. Below is an example of a payment request: **Request** ```http POST /api/v1/payment/create Host (sandbox): sandbox.gestpay.net Host (production): ecomms2s.sella.it Authorization: apikey **************** Content-Type: application/json ``` ```json { "shopLogin": "GESPAY12345", "amount": "100", "currency": "EUR", "shopTransactionID": "FBK_OrderID", "paymentChannel": { "channelType": [ "LINK" ] } } ``` **Response** ```json { "error": { "code": "0", "description": "request correctly processed" }, "payload": { "paymentToken": "f0419188-8a78-4918-913c-a491e4e78084", "paymentID": "1881129911957", "userRedirect": { "href": "https://sandbox-web.axerve.com/orchestra/checkout/pbl/a/GESPAY12345/b/1881129911957/c/f0419188-8a78-4918-913c-a491e4e78084" }, "qrCode": null } } ``` ### Direct redirect to the card details page or to a payment method (APM) When creating the request, if the `shopLogin` is enabled for more than one payment method (APM), you can use the **`paymentType`** field in the **`payment/create`** call to specify which methods to present to the buyer and whether to show the selection page. | `paymentType` | Behaviour | | ----------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Not populated | Shows the selection page with all the methods enabled for the `shopLogin` in the Gestpay back office that do not require mandatory fields | | More than one method, for example `["FABRICKPASS", "CREDITCARD"]` | Shows the selection page limited to the methods specified | | `["CREDITCARD"]` only | Skips the selection page and shows the Fabrick card details page, with the enabled wallets, such as Apple Pay, Google Pay and Click to Pay | | A single APM, for example `["FABRICKPASS"]` | Skips the selection page: if the method requires a redirect, the buyer is taken straight to the service; if not, they complete the payment on the Fabrick page | > **Methods with mandatory fields** > > Some payment methods require mandatory fields in the **`payment/create`** call. These methods are presented to the buyer only if the call includes the required fields; otherwise they do not appear on the selection page. The fields required by each method are listed on the method's page. > **Full list of paymentType values** > > The possible **`paymentType`** values are listed in the [payment type codes](https://api.paymentorchestra.fabrick.com/#payment-type-codes) section. Alternatively, you can use the **`GET shop/paymentMethods`** endpoint to check in real time the payment methods enabled for the `shopLogin` used, filtering the response by `payload.paymentMethod.paymentType`. Below is an example request for each case. **Not populated** The `paymentType` field is omitted: the buyer sees the selection page with all the methods enabled for the `shopLogin` that do not require mandatory fields. **Request** ```http POST /api/v1/payment/create Host (sandbox): sandbox.gestpay.net Host (production): ecomms2s.sella.it Authorization: apikey **************** Content-Type: application/json ``` ```json { "shopLogin": "GESPAY12345", "amount": "100", "currency": "EUR", "shopTransactionID": "FBK_OrderID", "paymentChannel": { "channelType": ["LINK"] } } ``` **More than one method** More than one payment method is specified, for example `CREDITCARD` and `FABRICKPASS`: the buyer sees the selection page limited to the methods specified. **Request** ```http POST /api/v1/payment/create Host (sandbox): sandbox.gestpay.net Host (production): ecomms2s.sella.it Authorization: apikey **************** Content-Type: application/json ``` ```json { "shopLogin": "GESPAY12345", "amount": "100", "currency": "EUR", "shopTransactionID": "FBK_OrderID", "paymentType": ["CREDITCARD", "FABRICKPASS"], "paymentChannel": { "channelType": ["LINK"] } } ``` **Card only** Only `CREDITCARD` is specified: the buyer skips the selection page and goes straight to the Fabrick card details page, with the enabled wallets, such as Apple Pay, Google Pay and Click to Pay. **Request** ```http POST /api/v1/payment/create Host (sandbox): sandbox.gestpay.net Host (production): ecomms2s.sella.it Authorization: apikey **************** Content-Type: application/json ``` ```json { "shopLogin": "GESPAY12345", "amount": "100", "currency": "EUR", "shopTransactionID": "FBK_OrderID", "paymentType": ["CREDITCARD"], "paymentChannel": { "channelType": ["LINK"] } } ``` **A single APM** A single alternative payment method is specified, for example `FABRICKPASS`: the buyer skips the selection page. If the method requires a redirect, they are taken straight to the service page; otherwise, they complete the payment on the Fabrick page. **Request** ```http POST /api/v1/payment/create Host (sandbox): sandbox.gestpay.net Host (production): ecomms2s.sella.it Authorization: apikey **************** Content-Type: application/json ``` ```json { "shopLogin": "GESPAY12345", "amount": "100", "currency": "EUR", "shopTransactionID": "FBK_OrderID", "paymentType": ["FABRICKPASS"], "paymentChannel": { "channelType": ["LINK"] } } ``` ### Order confirmation page and server-to-server notification When creating the request you can use the **`responseURLs`** object to dynamically define the redirect URLs and the server-to-server notification URL that the system will use at the end of the transaction, for both positive and negative outcomes. When the **`responseURLs`** object is included in the call, **for this transaction only**, the system does not use the URLs configured in the Gestpay back office but applies those specified in the request. If the object is not present, the back office settings are used. You can also specify only some of the parameters. For example, if only the server-to-server notification URL or only one of the redirect URLs is set, the system overrides only the values provided and keeps using the other URLs configured in the Gestpay back office. Below is an example of a request defining all the redirect URLs and the server-to-server notification URL. **Request** ```http POST /api/v1/payment/create Host (sandbox): sandbox.gestpay.net Host (production): ecomms2s.sella.it Authorization: apikey **************** Content-Type: application/json ``` ```json { "shopLogin": "GESPAY12345", "amount": "100", "currency": "EUR", "shopTransactionID": "FBK_OrderID", "paymentChannel": { "channelType": ["LINK"] }, "responseURLs": { "buyerOK": "https://merchant-url-ok.com", "buyerKO": "https://merchant-url-ko.com", "serverNotificationURL": "https://merchant-url-s2s.com" } } ``` ## Transaction detail and payment notification At the end of the payment, the buyer is redirected to the positive or negative outcome URL. At the same time, the system also sends a server-to-server (S2S) notification with the outcome of the transaction. Example of redirect URL and S2S notification: - `https://merchant-url.com?a=GESPAY12345&Status=OK&paymentID=1360119538182&paymentToken=8a901523-67a5-4aca-bbd2-c7c412934289` The redirect URL and the S2S notification contain the **`Status`** parameter, which immediately identifies the status of the payment. The possible values are: - **`OK`**: payment completed with a positive outcome - **`KO`**: payment completed with a negative outcome - **`XX`**: payment on hold, awaiting the final outcome. > **Suspended status (XX)** > > The **`XX`** status is used only by some alternative payment methods (APMs) and is returned when the outcome is asynchronous. In this scenario Fabrick redirects the customer to the positive outcome URL, but the status is **not yet final**: you need to wait for a subsequent S2S notification communicating the final outcome (**OK** or **KO**). > > - If you receive the XX status, do not ship the goods or deliver the service. > - Wait for the S2S notification communicating the final outcome of the payment. To check the outcome or the updated status of the transaction you can use the **`GET payment/detail`** endpoint, passing as a parameter the **`paymentID`** returned by the **`payment/create`** call or obtained from the redirect URL or S2S notification. The response contains the **`transactionResult`** parameter, which indicates the status of the payment. The possible values are: - **`AUTHENTICATED`**: payment authenticated (OK) - **`APPROVED`**: payment approved (OK) - **`DECLINED`**: payment declined (KO) - **`PENDING`**: payment awaiting confirmation (XX) - **`WAITING`**: payment in progress (XX) - **`UNSUBMITTED`**: the payment has not started yet (XX) Example of a call to check the status of the transaction through the paymentID. **Request** ```http GET /api/v1/payment/detail/{paymentID} Host (sandbox): sandbox.gestpay.net Host (production): ecomms2s.sella.it Authorization: apikey **************** Content-Type: application/json ``` **Response** ```json { "error": { "code": "0", "description": "request correctly processed" }, "payload": { "transactionType": "detail", "transactionResult": "APPROVED", "transactionState": "AUT", "transactionErrorCode": "0", "transactionErrorDescription": "Transaction correctly processed", "bankTransactionID": "1825", "shopTransactionID": "FBK_OrderID", "shopTransactionID_2": "", "authorizationCode": "794183", "paymentID": "1610469726440", "currency": "EUR", "country": "ITALIA", "company": "VISA", "tdLevel": "FULL", "threeDS": { "authenticationResult": { "authenticationLevel": "2C", "authenticationStatus": "Y", "authStatusReason": "", "challengeResultTransStatus": "", "XID": "1dd3cf75-92a7-4487-abb5-b1f3cdd68f3b", "AV": "MTIzNDU2Nzu5MDA5ODc2NTQzMjE=", "ECI": "05", "AVAlgorithm": "", "threeDsVersion": "2.2.0" }, "transDetails": { "authData": "", "authMethod": "02", "authTimeStamp": "202505131259", "acsID": "f688e45c-ff27-4ba6-a631-4b68df2dbf99" } }, "events": [ { "event": { "eventtype": "AUT", "eventamount": "0.00", "eventdate": "13/05/25 13:01:52", "eventARN": "", "eventID": "", "eventReferred": "" } } ], "buyer": { "name": "", "email": "" }, "risk": { "riskResponseCode": "", "riskResponseDescription": "" }, "customInfo": null, "alertCode": "", "alertDescription": "", "cvvPresent": "TRUE", "dcc": null, "maskedPAN": "", "paymentMethod": "VISA", "productType": "Credit", "token": "40G5LMXUQQ613101", "tokenExpiryMonth": "05", "tokenExpiryYear": "27", "tokenDetails": { "TokenValue": "40G5LMXUQQ613101", "TokenExpiryMonth": "05", "TokenExpiryYear": "27", "TokenProvider": "AXERVE", "CardDetails": { "CardSuffix": "3101", "CardExpiryMonth": "05", "CardExpiryYear": "27", "CardHolderName": null }, "CardAssets": { "CardArt": { "Type": null, "MediaContents": null, "Height": null, "Width": null }, "BrandLogo": { "Type": null, "MediaContents": null, "Height": null, "Width": null } } }, "fraudPrevention": { "check": "FALSE", "state": "", "description": "", "order": "" }, "automaticOperation": { "type": "CAN", "date": "07/06/25 00:00:00", "amount": "0.00" } } } ```