Astropay Module

Enable paymentsusing [Astropay] using the [BR-DGE Redirect Payment Flow].

How Astropay payments work with BR-DGE

1. Your customer clicks the Astropay button added to your checkout using the BR-DGE Web SDK Astropay module.
2. Merchants send a payment request to BR-DGE using paymentInstrument of type astroPay
3. BR-DGE responds with a redirect action response
4. The WebSDK postAction module handles the redirect action that redirects to Astropay for payment collection
5. Astropay redirects back to the merchant provided redirect page.
6. Your client app confirms the outcome of the payment via your server
7. Your server confirms the outcome of the payment via BR-DGE

Add the Astropay Module to your App

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

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

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

Next insert a placeholder element to your page with the id of bridge-astropay-button so the astropay module can populate it with a Astropay button:

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

Finally add the Astropay 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 Astropay
  comcarde.astropay.create({
    client: clientInstance,
    onClick: async () => {
      // Call your Merchant payment endpoint
      const response = await makePayment()
      // Use the postAction module to handle the redirect action
      postAction.handleAction(response.action)
    },
  })
})

Further reading

More information can be found on using AstroPay through BR-DGE on our [AstroPay integration page].