💳 How to implement checkout flow to your website?

1. Get activities data

First of all you need to get activities information, for this you should get Authorization token.

For this you need:

1. Login to your account:
   POST https://api.arrange.com/controller/auth/user/login
BODY { "email": "your@email.com", "password": "password" }
RESPONSE {access_token}
2. If you have multiple organizations in your account, you need to login the organization:
   POST https://api.arrange.com/controller/auth/organization/login
BODY { "organizationId": "some organization id" }
HEADERS {"Authorization": "Bearer [access_token from previous step]"}
RESPONSE {access_token}
   Else skip this step.

After first/second step you will have access_token 🔑

Just for tests, you can use a test token:

"token": "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiJiYTAxY2E4MS1hNGE0LTQ1MmEtYWZiNi02ZDliYWQ3Y2RmNGQiLCJwZXJtaXNzaW9uSWQiOiJhOGQwOGEyNy03NWRkLTRmZjAtOGEzMy0zMDk0OGM2NmJiODYiLCJpYXQiOjE2NjEzNzMxNTAsImV4cCI6MTY5MjkzMDc1MH0.d0Gf5TzA7z1w233qtTxM7CB41YdXBv33RE529SfvjTo4TkXFWCzmCf5UwuZwuky2PO98HzntFTg0DPE3KIAuQ_4ee2E3eFE6Jt_GLoFNKcY4Y-PuXmCIQqaihXlFIXUErHIKtEJvFvpRVm3FlsP_5Ra2NAKJHNSUWK1Io3De_o8"

Now you can get data about activities, for this you should:
GET https://api.arrange.com/controller/activity/all
HEADERS {"Authorization": "Bearer [access_token]"}

Also you can get class by id: https://api.arrange.com/controller/activityClass/activityClassById?id=${classId}
HEADERS {"Authorization": "Bearer [access_token]"}

🎉🎉🎉 Congratulations, you have received the required data 🎉🎉🎉

2. Add checkout flow in your website

Project in repository its example implementation the checkout in modal window.

For implementation checkout flow you need two parameters:

activityLink: link of the activity you need
classId: id of the class you need

{
  id: "3e27c144-f4ae-423d-9b6f-410f5c0676b0",
  link: "zf2tg3dqg", /*📌 THIS activity link*/
  title: "Activity 1",
  status: "ACTIVE",
  description: "Description",
  organizationId: "c068274a-8710-4c4b-8c8b-5d029881a30c",
  activity_classes: [
      {
        id: "f0fbe1ba-87d3-43df-a975-b8b5f0ad96f6",  /*📌 THIS class id*/
        title: "Class Red",
        activityId: "3e27c144-f4ae-423d-9b6f-410f5c0676b0",
        timelines: [
            ...
        ],
        ...
      },
    ...
  ],
  ...
}

And for realization this functionality left insert link of the checkout page with parameters in the iframe

"https://app.arrange.com/checkout-page/${activityLink}?classId=${classId}&iframe=true"

And you will have 👇

After successful payment you will get message from checkout component. For messages processing you should add EventListener

window.addEventListener(
  "message",
  (ev) => {
    if (ev != null && ev.data === '{"status":"success"}') {
      console.log("Success ✔️");
    }
  },
  false
);

You can look on the realization of checkout modal window on react js in project.