Yoursafe

Implement Flowguard

Flowguard embeds card fields on your page. The server starts the payment and passes a session id to the SDK. The product docs are the source for endpoints and element options. If this skill and a product page disagree, follow the product page.

Read first

  1. Flowguard SDK, in this order: before you start, domain approval, backend setup, frontend setup, testing card
  2. Flowguard API for /purchase/start and /subscription/start

Implement in this order

  1. Create the website in the Control Center and submit it for authorization.
  2. Register every origin that will load the SDK. localhost is allowed without registration.
  3. From the backend, start a purchase with /purchase/start or a subscription with /subscription/start.
  4. Pass the returned sessionId into the SDK when you initialize Elements. The browser does not create the session.
  5. Mount Elements into your own targets, then submit from your checkout.
  6. In testing mode, pay with the testing card from the Control Center.

Credentials

  • A Flowguard website in the Control Center, authorized for the domains you use.
  • API credentials for the merchant Flowguard API. Keep them on the server.

Traps

  • Elements load only on an approved domain. www.example.com and example.com are different registrations. Register each subdomain you actually use.
  • A CORS error, "bad request", or "failed to fetch" while loading Elements means the domain is missing or not approved. localhost is the exception and does not need to be registered.
  • A website in testing mode needs the testing card from the Control Center. Open Setup Websites, the Flowguard website, then TESTING CARD on the website detail page.
  • The SDK needs a sessionId from /purchase/start or /subscription/start. Create that session on the server before initializing Elements.

Done when

A test payment on an approved domain, or on localhost, completes with the Control Center testing card, and the session id in the browser came from your backend.

Reference