Payment Flow

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

Step 1: Tokenize

Your server calls the Tokenize endpoint 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.

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.

{
  "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.

Step 3: Confirm

The customer submits the form. If the card uses 3DS, 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 to your server. Verify the transaction before you fulfill the order. Read the transaction from the Transactions API, 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.
• Wrap the server calls with an SDK.
• Handle results with Webhooks.