Quickstart

This guide takes you from zero to a working checkout. You need:

• Your API token (your secret server credential). An admin of your account generates it in the platform: see Users & access.
• The product ID of what you are selling (one-time or subscription), provided by CreditCore.
• A web page on a domain you control, e.g. shop.example.com.

1. Create a session on your server

   Every checkout starts with a session. Sessions are tied to the domain where the checkout will be displayed and expire after 5 minutes, so create one each time you render the payment page.

   cURL

   curl -X POST "https://api.creditcore.io/api/session?domain=shop.example.com" \
     -H "Authorization: Bearer $CREDITCORE_API_TOKEN"

   Node.js

   const res = await fetch(
     'https://api.creditcore.io/api/session?domain=shop.example.com',
     {
       method: 'POST',
       headers: { Authorization: `Bearer ${process.env.CREDITCORE_API_TOKEN}` },
     },
   );
   const sessionId = await res.text(); // plain-text UUID

   Java (Spring)

   String sessionId = RestClient.create("https://api.creditcore.io")
       .post()
       .uri("/api/session?domain={domain}", "shop.example.com")
       .headers(h -> h.setBearerAuth(apiToken))
       .retrieve()
       .body(String.class); // plain-text UUID

   The response body is the session ID as plain text:

   3f6c2b8e-1d2a-4c55-9a3e-7b1f0c9d2e41

   Caution

   Never call this endpoint from the browser: it needs your API token. Create the session on your server and pass only the session ID to the page.

2. Add a container and load the SDK

   checkout.html

   <div id="checkout"></div>
   <script src="https://embed.creditcore.io/v1/js/loader.js" defer></script>

3. Mount the checkout

   Call PaymentSDK.mount() once the loader is ready, with the session ID from step 1:

   Module script

   <script type="module">
     PaymentSDK.mount('checkout', {
       sessionId: '{{ sessionId }}', // from step 1
       productId: 12,
       domain: 'shop.example.com', // same domain used to create the session
       fields: [
         { type: 'email', label: 'Email', placeholder: 'you@example.com' },
         { type: 'name', label: 'First name', size: 'half' },
         { type: 'lastName', label: 'Last name', size: 'half' },
       ],
       payButton: { text: 'Pay now' },
       onReady: () => console.log('Checkout ready'),
       onError: (err) => console.error('Checkout error', err.message),
       onMessage: handleMessage,
     });
   
     function handleMessage(message) {
       switch (message.type) {
         case 'success':
           if (message.detail.code === 'OK') {
             window.location.href = '/thank-you?customer=' + message.detail.customerId;
           } else if (message.detail.code === 'ALREADY_SUBSCRIBED') {
             showNotice('You already have an active subscription.');
           }
           break;
         case 'error':
           showNotice(message.message);
           break;
         // 3-D Secure progress events: informational only
         case 'PAYMENT_3DS_START':
         case 'PAYMENT_3DS_SUCCESS':
         case 'PAYMENT_3DS_FAILURE':
           break;
       }
     }
   </script>

   PaymentSDKReady event

   <script>
     window.addEventListener('PaymentSDKReady', () => {
       PaymentSDK.mount('checkout', {
         sessionId: '{{ sessionId }}',
         productId: 12,
         domain: 'shop.example.com',
         values: { email: 'jane.doe@example.com' }, // email collected earlier
         onMessage: (m) => console.log(m),
       });
     });
   </script>

   The SDK renders a secure card form inside an iframe. Card data is encrypted in the browser and never touches your servers. mount() returns a Promise<HTMLIFrameElement> that rejects if the container isn’t found, the configuration is invalid or the iframe doesn’t initialize within 10 seconds.

4. Pay with a test card

   With a sandbox account, use a test card such as 4111 1111 1111 1111, any future expiry date and any CVC. See Testing & going live.

5. Receive the webhooks

   Register your webhook URL in the platform, under Webhook configuration. You’ll receive a CONVERSION event for the new customer and a TRANSACTION event for the charge:

   {
     "customer_id": 5812,
     "email": "jane.doe@example.com",
     "success": true,
     "amount": 9.99,
     "product_id": 12,
     "transaction_id": 99101,
     "response_text": "SUCCESS"
   }

   See Webhooks for every event and field.

Common pitfalls

• domain is required in practice. It must match the domain used to create the session, or the payment fails.
• Email is mandatory. Add an { type: 'email' } field or pass values.email.
• Sessions expire after 5 minutes. Create the session when the page is rendered, not earlier.
• mount() runs once per container. Calling it again on the same element is ignored.

Next steps

• How a payment works: what happens between “Pay” and the webhook.
• Configuration reference: every option of PaymentSDK.mount().
• Events & callbacks: handle every checkout result.
• Styling & custom fields: match the checkout to your brand.
• API reference: look up customers and transactions, refund and cancel.