Revolut checkout widget error "Transaction failed. Please contact the merchant to resolve this problem"

25 Views Asked by At

I have this code written with react (based on https://github.com/revolut-engineering/revolut-merchant-api-example-next-js/blob/master/db/index.js):

const rcRef = useRef(null);
const cardElementRef = useRef(null)

RevolutCheckout(order.token, 'sandbox').then(function (instance) {
  rcRef.current = instance.createCardField({
    target: cardElementRef.current,
    onSuccess() {
      finishOrder();
    },
    onError(message) {
      alert(`error: ${message}`)
    },
    locale: "en",
  })
});

function handleFormSubmit(event) {
  event.preventDefault();

  const data = new FormData(event.target);

  rcRef.current.submit({
    name: data.get("name"),
    email: '[email protected]',
    phone: '0123456789',
    billingAddress: {
      countryCode: 'LT',
      region: 'Lithuania',
      city: 'Vilnius',
      streetLine1: 'Vokieciu st. 11',
      streetLine2: '',
      postcode: '12345'
    },
    savePaymentMethodFor: 'merchant',
  });
}

return (
  <div>
    <form onSubmit={handleFormSubmit}>
      <fieldset>
        <label>
          <div>Name</div>
          <input name="name"/>
        </label>
        <label>
          <div ref={cardElementRef}></div>
        </label>
      </fieldset>

      <button>Submit</button>
    </form>
  </div>
);

If I remove the savePaymentMethodFor from submit everything works perfectly.
But with this option present (value either merchant or customer) I'm getting error RevolutCheckout: Transaction failed. Please contact the merchant to resolve this problem.

Has anyone seen this? Revolut docs aren't very useful here.

Tried different options, expecting successful checkout request and saved customer.

UPDATE: The problem was with order creation.
Server-side code before:

exports.createOrderForProduct = async (product) => {
  const payload = {
    description: `Payment for ${product.name}`,
    amount: product.price.amount,
    currency: product.price.currency,
  };

  const apiResponse = await revolutClient.post(`https://sandbox-merchant.revolut.com/api/1.0/orders`,payload);
  const payment = apiResponse.data;
  console.log('Revolut order create', payment)

  return {
    id: payment.id,
    token: payment.public_id,
  }
};

After:

exports.createOrderForProduct = async (product) => {
  const payload = {
    description: `Payment for ${product.name}`,
    amount: product.price.amount,
    currency: product.price.currency,
    customer: {
      email: '...'
    }
  };

  const apiResponse = await revolutClient.post(`https://sandbox-merchant.revolut.com/api/orders`,payload, {
    headers: {
      'Revolut-Api-Version': '2023-09-01'
    }
  });
  const payment = apiResponse.data;
  console.log('Revolut order create', payment)

  return {
    id: payment.id,
    token: payment.token,
  }
};

The example was using deprecated version of the API and my payload was missing customer details. https://developer.revolut.com/docs/merchant/create-order

0

There are 0 best solutions below