Redirect to custom result page

Tamaro allows users to be redirected to a custom result page after the transaction/subscription has been processed.

Redirect happens after the payment/subscription is processed and the widget received the payment/subscription data. Having this data makes it easy to configure a redirect to different custom result pages depending on the payment/subscription status, type, etc.

Some payment flows require additional redirects in order to complete the payment.

One example: the customer can be redirected to the bank's website to complete a 3D Secure card payment.

Another example: to complete a TWINT payment the customer will be redirected to the TWINT checkout page.

In these examples the customer is redirected back to the initial page after the payment is done.

As a result, several redirects occur:

Initial page → Checkout page → Initial page → Custom Result page

Here is the most basic example of how to configure redirect to custom result page:

// Define a function which will handle the redirect
const redirectToCustomResultPage = () => {
  window.location.replace('https://example.com?foo=bar');
};

window.rnw.tamaro.runWidget('.rnw-tamaro-widget', {
  redirectToCustomResultPage,
});

If you want to add some additional query parameters to the page (for example payment/subscription ID, its status etc.), check the example below, which handles all the cases:

• Legacy (Manager) one-off payment
• Legacy (Manager) subscription
• Modern (Hub) one-off payment
• Modern (Hub) one-off payment agreement*
• Modern (Hub) subscription

* For recurring payment agreements, you can use the "Modern (Hub) subscription" flow.

const redirectToCustomResultPage = (widget) => {
  // Legacy (Manager) objects
  const transactionInfo = widget.transactionInfo;
  const subscriptionInfo = widget.subscriptionInfo;

  // Modern (Hub) objects
  const epmsPaymentInfo = widget.epmsPaymentInfo;
  const epmsPaymentAgreementInfo = widget.epmsPaymentAgreementInfo;
  const epmsSubscriptionInfo = widget.epmsSubscriptionInfo;
  const epmsPaymentSourceInfo = widget.epmsPaymentSourceInfo;
  const epmsSupporterInfo = widget.epmsSupporterInfo;

  // Define a base custom result page URL
  const newUrl = new URL('https://example.com?foo=bar');

  // Feel free do dynamically add any additional params to the URL
  // like in the example below

  // Legacy (Manager) one-off payment
  // prettier-ignore
  if (transactionInfo && !subscriptionInfo) {
    newUrl.searchParams.set('epp_payment_id', transactionInfo.epp_transaction_id);
    newUrl.searchParams.set('epp_payment_status', transactionInfo.epayment_status);
    newUrl.searchParams.set('supporter_first_name', transactionInfo.stored_customer_firstname);
  }

  // Legacy (Manager) subscription
  // prettier-ignore
  if (subscriptionInfo) {
    newUrl.searchParams.set('epp_subscription_token', subscriptionInfo.subscription_token);
    newUrl.searchParams.set('epp_subscription_status', subscriptionInfo.status);
    newUrl.searchParams.set('supporter_first_name', subscriptionInfo.stored_customer_firstname);
  }

  // Modern (Hub) one-off payment
  // prettier-ignore
  if (epmsPaymentInfo) {
    newUrl.searchParams.set('epms_payment_uuid', epmsPaymentInfo.uuid);
    newUrl.searchParams.set('epms_payment_status', epmsPaymentInfo.last_status);

    if (epmsPaymentInfo.supporter_snapshot) {
      newUrl.searchParams.set('supporter_first_name', epmsPaymentInfo.supporter_snapshot.first_name);
    }
  }

  // Modern (Hub) one-off payment agreement
  // prettier-ignore
  if (epmsPaymentAgreementInfo) {
    newUrl.searchParams.set('epms_payment_agreement_uuid', epmsPaymentAgreementInfo.uuid);
    newUrl.searchParams.set('epms_payment_agreement_status', epmsPaymentAgreementInfo.last_status);

    if (epmsPaymentAgreementInfo.supporter_snapshot) {
      newUrl.searchParams.set('supporter_first_name', epmsPaymentAgreementInfo.supporter_snapshot.first_name);
    }
  }

  // Modern (Hub) subscription
  // prettier-ignore
  if (epmsSubscriptionInfo && epmsPaymentSourceInfo) {
    newUrl.searchParams.set('epms_subscription_uuid', epmsSubscriptionInfo.uuid);
    newUrl.searchParams.set('epms_subscription_status', epmsSubscriptionInfo.status);
    newUrl.searchParams.set('epms_payment_source_uuid', epmsSubscriptionInfo.payment_source_uuid);
    newUrl.searchParams.set('epms_payment_source_status', epmsPaymentSourceInfo.last_status);
  }

  // Modern (Hub) supporter
  // prettier-ignore
  if (epmsSupporterInfo) {
    newUrl.searchParams.set('supporter_first_name', epmsSupporterInfo.first_name);
  }

  window.location.replace(newUrl.href);
};

// Pass the function to the widget config during its initialization
window.rnw.tamaro.runWidget('.rnw-tamaro-widget', {
  language: 'en',
  redirectToCustomResultPage,
});

// Alternatively, you can use the event `afterCreate`
// to extend the widget config after its creation
window.rnw.tamaro.events.afterCreate.subscribe((event) => {
  const widget = event.data.api;

  widget.extendConfig({redirectToCustomResultPage});
});

warning

Please pay attention that dedicated config option redirectToCustomResultPage was added in Tamaro Core v2.11.0.

In older versions, you could use events paymentComplete or fetchPaymentDataEnd, but both these approaches had some significant drawbacks, so it's highly discouraged to use it. Instead, please upgrade to the latest Tamaro Core version and use new redirectToCustomResultPage config option.