Skip to main content

Listening to order campaign success event

Adding the following service function success listener will return the response sent by HAPI Backend in response to POST /campaigns/order HAPI API endpoint.

window.hapi.campaign.service.orderCampaign.onSuccess((response) => {
    console.log('[HAPI Elements]: orderCampaign onSuccess response', response)

    if (response.draftCampaignId) {
        // save draftCampaignId in your DB if you want
        // please check the note below for Direct Charge payments
    } else {
        // save response.campaignId in your DB if you want
    }
})

orderCampaign.onSuccess callback caveats for direct charge payments​

When user pays with Direct Charge, orderCampaign function is called to create a draft campaign before user clicks "Pay Now" button, so that we can use draftCampaignId to associate with that payment transaction after payment is made. Upon successful payment, campaign is converted into a non-draft campaign.


In the case of direct charge, depending on the payment method user chooses on Stripe's payment form, it may take time for payment transaction to complete thus until then campaign will be in draft status.


If you are saving the draftCampaignId in your DB for example, for auditing purposes, you will most likely also want to track if that draft campaign has been actually paid.


With version 2.2, we have added the ability to track when the payment is successful (requires a backend endpoint). Please refer to Listening to Payment Success Event recipe to learn more.

Notes​

When you query the HAPI API to get the details of the campaign via GET /campaigns/{campaignId}, they will get HTTP 404. To get the details of the draft campaign, window.hapi.campaign.service.getCampaign.run(campaignId or draftCampaignId) should be used.


If you use Campaign Detail Card widget then you can pass campaignId or draftCampaignId to the widget <he-campaign-id campaign-id="replace with campaignId or draftCampaignId"></he-campaign-id>

These events may also come in handy:

  • window.hapi.campaign.service.orderCampaign.onStart(CALLBACK). Please note that you can throw an error inside the callback to halt execution of orderCampaign function. This may come in handy for example if your FN to save to DB fails
  • window.hapi.campaign.service.orderCampaign.onFailure(CALLBACK)
  • window.hapi.campaign.service.orderCampaign.onFinish(CALLBACK). May come in handy in cases like showing loading spinners until order is finished