---
url: https://docs.youcan.shop/youcan-pay/payment-flow.md
---
# Payment Flow

A payment moves through four steps. Your server does two of them. The customer's browser does the other two.

```mermaid
sequenceDiagram
    participant B as Browser (yp.js)
    participant S as Your server
    participant Y as YouCan Pay

    S->>Y: 1. Tokenize (amount, currency, order)
    Y-->>S: Payment token
    S-->>B: Payment token
    B->>Y: 2. Collect card details
    B->>Y: 3. Confirm payment (+ 3DS)
    Y-->>B: Result (success / error)
    Y->>S: 4. Webhook (transaction.paid)
    S->>Y: Verify transaction
```

## Step 1: Tokenize

Your server calls the [Tokenize endpoint](/youcan-pay/payment/tokenize) with the amount, currency, and order ID. YouCan Pay returns a payment token that holds the order data. Do this step on the server, so your private key stays secret.

```bash
curl --location --request POST 'https://youcanpay.com/api/tokenize' \
  --header 'Accept: application/json' \
  --form 'amount="2500"' \
  --form 'currency="MAD"' \
  --form 'pri_key="pri_xxx"' \
  --form 'order_id="order-123"' \
  --form 'success_url="https://yourdomain.com/success"' \
  --form 'error_url="https://yourdomain.com/error"'
```

The response holds the token. Send `token.id` to the browser.

```json
{
  "transaction_id": "840f1c8a-6554-45d5-a1ad-f8a48f928dcf",
  "token": { "id": "token_xxx" }
}
```

> **Note:** Send amounts in the smallest currency unit. `2500` means 25.00 MAD.

## Step 2: Collect

The browser shows the payment form and the customer enters their details. Render the form with [yp.js](/youcan-pay/yp-js/getting-started).

## Step 3: Confirm

The customer submits the form. If the card uses [3DS](https://en.wikipedia.org/wiki/3-D_Secure), the bank asks for extra verification. YouCan Pay then processes the payment and returns the result to the browser.

## Step 4: Verify

YouCan Pay sends a [webhook](/youcan-pay/webhooks) to your server. Verify the transaction before you fulfill the order. Read the transaction from the [Transactions API](/youcan-pay/transactions/list), then check the amount and order ID.

> **Note:** When a Moroccan card pays in another currency, YouCan Pay converts the amount to MAD. Read the original amount from `base_amount` and `base_currency`.

## Next Steps

* Render the form with [yp.js](/youcan-pay/yp-js/getting-started).
* Wrap the server calls with an [SDK](/youcan-pay/integrations).
* Handle results with [Webhooks](/youcan-pay/webhooks).