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:

const redirectToCustomResultPage = () => {
  window.location.href = '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 4 cases:

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

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

  // Modern (Hub) objects
  const epmsPaymentInfo = widget.epmsPaymentInfo;
  const epmsSubscriptionInfo = widget.epmsSubscriptionInfo;
  const epmsPaymentSource = widget.epmsPaymentSource;

  // 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)
  }

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

  // 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)
  }

  // Modern (Hub) subscription
  // prettier-ignore
  if (epmsSubscriptionInfo && epmsPaymentSource) {
    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', epmsPaymentSource.last_status)
  }

  window.location.href = newUrl.href;
};

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

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 drawbacks, so it's recommended to use the latest Tamaro Core version and use this new config option instead.