Skip to main content

checkout

Step 3: Redirect Users to Checkout​

After receiving the response, extract the checkoutUrl from data.checkoutUrl and redirect your users to this URL.

Implementation Examples​

HTML Link:

<a href="https://checkout.wepay.com.sa?token=...">Pay with WePay</a>

JavaScript Redirect:

// After receiving the API response
const checkoutUrl = response.data.checkoutUrl;
window.location.href = checkoutUrl;

React/Next.js:

// After receiving the API response
const checkoutUrl = response.data.checkoutUrl;
<Link href={checkoutUrl}>Pay with WePay</Link>

// Or redirect programmatically
router.push(checkoutUrl);

PHP:

// After receiving the API response
$checkoutUrl = $response['data']['checkoutUrl'];
header("Location: " . $checkoutUrl);
exit;

Python (Flask/Django):

# Flask
from flask import redirect
checkout_url = response['data']['checkoutUrl']
return redirect(checkout_url)

# Django
from django.shortcuts import redirect
checkout_url = response['data']['checkoutUrl']
return redirect(checkout_url)

Embedding Checkout in an iFrame​

In addition to redirecting users, you can embed the checkout page directly into your website using an HTML iframe.

Example​

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WePay Checkout</title>

    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      html,
      body {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }

      iframe {
        width: 100%;
        height: 100%;
        border: none;
        display: block;
      }
    </style>
  </head>
  <body>
    <iframe
      src="https://checkout.wepay.com.sa/checkout?token=YOUR_CHECKOUT_TOKEN"
      allowfullscreen
    >
    </iframe>
  </body>
</html>

Dynamic JavaScript Example​

// After receiving the API response
const checkoutUrl = response.data.checkoutUrl

document.getElementById("checkout-frame").src = checkoutUrl
<iframe
  id="checkout-frame"
  allowfullscreen
  style="width:100%;height:100vh;border:none"
>
</iframe>

Notes​

  • The checkout URL returned by the API can be used either for a full-page redirect or within an iframe.
  • Ensure the iframe has sufficient height and width to provide the best user experience.
  • Always use the checkoutUrl returned by the API response and do not construct the URL manually.

Step 4: Request a New Checkout Token (If Expired)

If the original checkout token has expired, you must request a new checkout token before proceeding with the payment.

POST apps/api/contracts/checkout

Headers:

  • Authorization: Bearer {access_token} — Replace {access_token} with the token obtained from Step 1.
  • Content-Type: application/json
{
  "buyerPhoneNumber": "966583944460",
  "externalContractId": "CNT-2604-00100000"
}

Field Descriptions​

Field NameTypeDescriptionRequired / Notes / Example
phoneNumberstringUser phone numberRequired
externalContractIdstringContract idRequired

Example Request (cURL)​

curl --location 'https://api.wepay.com.sa/apps/api/contracts/checkout' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer YOUR_ACCESS_TOKEN' \
--data '{
    "buyerPhoneNumber": "966583944460",
    "externalContractId": "CNT-2604-00100000"
}'

Example Response​

{
  "data": {
    "checkout":
    {
        "url": "https://integration.wepay-sa.com/checkout?token=encodedToken",
        "token": "encodedToken",
        "expiresAt": "2024-04-26T12:00:00Z"
    }
  },
  "message": "ContractCheckoutStartedSuccessfully",
  "status": 200,
  "validationErrors": []
}