Overview

Create a Checkout Session (Server-Side)

Code
 
curl https://api.payonify.com/v1/checkout/sessions \
  -u "pk_test_abc123...:sk_test_xyz789..." \
  -H "Content-Type: application/json" \
  -d '{
    "line_items": [
      {
        "unit_amount": 2500,
        "name": "Product Name",
        "quantity": 1
      }
    ],
    "mode": "payment",
    "success_url": "https://yoursite.com/success?session_id={CHECKOUT_SESSION_ID}",
    "cancel_url": "https://yoursite.com/cancel",
    "currency": "usd"
  }'

Response:

Response
 
{
  "id": "cs_f66c6vqvbbhqxe35gbq7",
  "object": "checkout_session",
  "status": "requires_payment_method",
  "mode": "payment",
  "amount": {
    "value": 2500,
    "currency": "usd"
  },
  "line_items": [
    {
      "unit_amount": 2500,
      "name": "Product Name",
      "quantity": 1
    }
  ],
  "url": "https://checkout.payonify.com/c/cs_f66c6vqvbbhqxe35gbq7",
  "success_url": "https://yoursite.com/success?session_id={CHECKOUT_SESSION_ID}",
  "cancel_url": "https://yoursite.com/cancel",
  "customer_email": null,
  "metadata": null,
  "client_secret": "cs_f66c6vqvbbhqxe35gbq7_secret_gv4vr5e5qcfbfv6w53fp7jn3g7qp62eh",
  "submit_type": null,
  "livemode": false,
  "created": 1732437738,
  "expires_at": 1732524138
}

Pass the client_secret from the response above to your frontend.

Add the Payonify SDK

Code
 
<script src="https://js.payonify.com/payonify.umd.js"></script>

Initialize and Mount

The mount method gives you complete flexibility to display the checkout on any HTML element in your page:

Code
 
const payonify = new Payonify({
  publishableKey: "pk_test_abc123...",
});

payonify.onSuccess = (data) => {
  console.log("Payment successful!", data);
  window.location.href = "/success";
};

payonify.onError = (error) => {
  console.error("Payment error:", error);
};

payonify.onClose = () => {
  console.log("Payment modal closed");
};

// Mount the checkout on any HTML element you choose
payonify.mount({
  container: document.getElementById("checkout-container"),
  clientSecret: "cs_xxx_secret_yyy",
});

Handle Webhooks (Server-Side)

Same as hosted checkout - use webhooks for reliable order fulfillment. See the Webhooks Guide.