PaysafeCard Module

Enable payments using PaysafeCard using the BR-DGE Redirect Payment Flow.

How PaysafeCard Payments Work With BR-DGE

Your customer clicks the PaysafeCard payment method button added to your checkout using the BR-DGE Web SDK Redirect module.
Merchants send a payment request to BR-DGE using paymentInstrument of type paysafecard
BR-DGE responds with a redirect action response
The WebSDK postAction module handles the redirect action that redirects to PaysafeCard for payment collection
Your client app confirms the outcome of the payment via your server
Your server confirms the outcome of the payment via BR-DGE

Add Redirect Module to Your App

After you have set up the Comcarde JavaScript Client, you can add the redirect module to your website source.

<script src="https://sandbox-assets.comcarde.com/web/v2/js/redirect.min.js"></script>

<script src="https://assets.comcarde.com/web/v2/js/redirect.min.js"></script>

Next insert the placeholder element to your page:

<div id="bridge-paysafecard-button"></div>

Finally add the redirect configuration to the Comcarde JavaScript Client

const authorization = clientApiKey; // your client API Key
comcarde.client.create({ authorization }, function (clientErr, clientInstance) {
  // optionally configure other plugin modules...

  // Initialise redirect module and PaysafeCard payment method
  comcarde.redirect.create({
    client: clientInstance,
    // optional providerId is passed from the redirect module if required
    paysafecard: async (providerId) => handleRedirectPayment(providerId),
  });
});

// Example of the PaysafeCard paymentInstrument payload with the providerId passed from the redirect module
function createPaymentPayload(providerId) {
  return {
    amount: "1099",
    paymentInstrument: {
      customerId: "123456",
      type: providerId,
      successUrl:
        "http://localhost:3000/web-sdk-test-harness/redirect/success.html",
      errorUrl:
        "http://localhost:3000/web-sdk-test-harness/redirect/error.html",
    },
    //... other payload fields ...
  };
}

async function handleRedirectPayment(providerId) {
  const paymentPayload = createPaymentPayload(providerId);
  // Call your Merchant payment endpoint
  const response = await makePayment(paymentPayload);
  // Use the postAction module to handle the redirect action
  postAction.handleAction(response.action);
}