# Mada for web Accept Mada payments through Apple Pay on your website with [Flow](https://www.checkout.com/docs/payments/accept-payments/accept-a-payment-on-your-website.md), our pre-built, customizable payment user interface. Flow enables you to accept payments using Checkout.com's global network of payment methods with a single integration. > **Information** > > You can only process Mada payments through Apple Pay within Saudi Arabia. Outside of Saudi Arabia you must enforce the use of the Visa or Mastercard networks instead. > > > For more information, see [Mada](https://www.checkout.com/docs/payments/add-payment-methods/mada.md#Accept_Mada_cards_outside_Saudi_Arabia). Set up your client-side and server-side configuration to integrate with Checkout.com's payment gateway and enable payments on your website. --- ## How it works 1. The customer lands on the checkout page. 2. You perform a server-side request to create a payment session. 3. You use the payment session data on the client-side to mount Flow. 4. Flow displays the card or Apple Pay payment method to the customer, where they can choose to pay with their Mada card. 5. When the customer clicks the _Pay_ option, Flow performs a payment request and handles any additional actions. For example, additional actions required for [3D Secure (3DS)](https://www.checkout.com/docs/payments/authenticate-payments/3d-secure.md) authentication, or a third-party payment page redirect. 6. You receive a webhook notifying you of the payment status. --- ## Before you start To offer Apple Pay with Flow, you must: - Contact your account manager to onboard a custom domain with Apple Pay. - Comply with the Apple Pay [payment method rules](https://www.checkout.com/legal/payment-methods-rules). Additionally, to accept Mada card payments, you must: - Obtain a merchant ID from a Saudi Arabian card acquirer. - Capture the full authorization amount after a successful authorization. Partial captures and partial authorizations are not supported. Make sure you have a [test account](https://www.checkout.com/get-test-account) with Checkout.com. Create a [public key and a secret key](https://www.checkout.com/docs/developer-resources/api/manage-api-keys/api-keys.md) from the [Dashboard](https://dashboard.checkout.com), with the following key scopes: - Public key – `payment-sessions:pay` and `vault-tokenization` - Secret key – `payment-sessions` To receive webhooks for the [payment events](https://www.checkout.com/docs/developer-resources/event-notifications/event-types.md#Gateway), [configure your webhook server](https://www.checkout.com/docs/developer-resources/event-notifications/receive-webhooks/configure-your-webhook-server.md). > **Information** > > Some operating systems may not fully support Apple Pay if you integrate Flow within a WebView. ### Content Security Policy If you have a Content Security Policy (CSP) on your website, Checkout.com requires the following directives: ``` connect-src, https://*.checkout.com frame-src, https://*.checkout.com script-src, https://*.checkout.com img-src, https://*.checkout.com ``` --- ## Step 1: Create a new Payment Session `Server side` When the customer is ready to pay, you must send a server-side request to securely create a `PaymentSession` object. The `PaymentSession` contains the information required to handle all steps of the payment flow. > **Information** > > For the full API specification, see the [API reference](https://api-reference.checkout.com/tag/Flow/#operation/CreatePaymentSession). > **Information** > > Your base URL's `{prefix}` value is unique to your account and environment. To learn how to retrieve your base URLs for the sandbox and production environments, see [API endpoints](https://www.checkout.com/docs/developer-resources/api/api-endpoints.md). **Production** `POST` `https://{prefix}.api.checkout.com/payment-sessions` **Sandbox** `POST` `https://{prefix}.api.sandbox.checkout.com/payment-sessions` ### Request example ```json { "amount": 1000, "currency": "SAR", "reference": "ORD-123A", "display_name": "Online shop", "payment_type": "Regular", "billing": { "address": { "country": "SA" } }, "customer": { "name": "Jia Tsang", "email": "jia.tsang@example.com" }, "items": [ { "reference": "0001", "name": "Gold Necklace", "quantity": 1, "unit_price": 1000 } ], "success_url": "https://example.com/payments/success", "failure_url": "https://example.com/payments/failure" } ``` ### Response example ```json { "id": "ps_2Un6I6lRpIAiIEwQIyxWVnV9CqQ", "payment_session_secret": "pss_9823241e-2cec-4c98-b23d-7b29ow4e2e34", "payment_session_token": "YmFzZTY0:eyJpZCI6InBzXzJVbjZJNmxScElBaUlFd1FJeXhXVm5WOUNxUSIsImFtb3VudCI6MTAwMCwibG9jYWxlIjoiZW4tR0IiLCJjdXJyZW5jeSI6IkdCUCIsInBheW1lbnRfbWV0aG9kcyI6W3sidHlwZSI6ImNhcmQiLCJjYXJkX3NjaGVtZXMiOlsiVmlzYSIsIk1hc3RlcmNhcmQiLCJBbWV4Il19XSwicmlzayI6eyJlbmFibGVkIjp0cnVlfSwiX2xpbmtzIjp7InNlbGYiOnsiaHJlZiI6Imh0dHBzOi8vYXBpLnNhbmRib3guY2hlY2tvdXQuY29tL3BheW1lbnQtc2Vzc2lvbnMvcHNfMlVuNkk2bFJwSUFpSUV3UUl5eFdWblY5Q3FRIn19fQ==", "_links": { "self": { "href": "https://{prefix}.api.sandbox.checkout.com/payment-sessions/ps_2Un6I6lRpIAiIEwQIyxWVnV9CqQ" } } } ``` --- ## Step 2: Initialize and mount Flow `Client side` You can install the `@checkout.com/checkout-web-components` package via npm: ```bash npm install @checkout.com/checkout-web-components --save ``` Alternatively, you can load the package directly via a script: ```html