Checkout: Display Ebanx processing errors (#48971)

* Convert createEbanxToken to use async/await

* If an Ebanx token error has a message, display it

This will also cause it to be logged.

client/lib/checkout/processor-specific.js

@@ -140,19 +140,20 @@ export function countrySpecificFieldRules( country ) {
 }
 
 export function translatedEbanxError( error ) {
-	let errorMessage = i18n.translate(
-		'Your payment was not processed this time due to an error, please try to submit it again.'
-	);
-
+	// It's unclear if this property still exists
 	switch ( error.status_code ) {
 		case 'BP-DR-55':
-			errorMessage = { message: { cvv: i18n.translate( 'Invalid credit card CVV number' ) } };
-			break;
+			return i18n.translate( 'Invalid credit card CVV number' );
 		case 'BP-DR-51':
 		case 'BP-DR-95':
-			errorMessage = { message: { name: i18n.translate( 'Please enter your name.' ) } };
-			break;
+			return i18n.translate( 'Please enter your name.' );
 	}
 
-	return errorMessage;
+	if ( error.message ) {
+		return error.message;
+	}
+
+	return i18n.translate(
+		'Your payment was not processed this time due to an error, please try to submit it again.'
+	);
 }

client/lib/store-transactions/index.js

@@ -13,49 +13,59 @@ import { translatedEbanxError } from 'calypso/lib/checkout/processor-specific';
 const debug = debugFactory( 'calypso:store-transactions' );
 const wpcom = wp.undocumented();
 
+const promisifiedEbanxConfiguration = ( data ) => {
+	return new Promise( ( resolve, reject ) => {
+		wpcom.ebanxConfiguration( data, ( configError, configuration ) => {
+			if ( configError ) {
+				return reject( configError );
+			}
+			resolve( configuration );
+		} );
+	} );
+};
+
+const promisifiedCreateEbanxToken = ( ebanx, parameters ) => {
+	return new Promise( ( resolve ) => {
+		ebanx.card.createToken( parameters, function ( ebanxResponse ) {
+			resolve( ebanxResponse );
+		} );
+	} );
+};
+
+const promisifiedEbanxDeviceFingerprint = ( ebanx ) => {
+	return new Promise( ( resolve ) => {
+		ebanx.deviceFingerprint.setup( function ( deviceId ) {
+			resolve( deviceId );
+		} );
+	} );
+};
+
 export async function createEbanxToken( requestType, cardDetails ) {
 	debug( 'creating token with ebanx' );
 
-	return new Promise( function ( resolve, reject ) {
-		wpcom.ebanxConfiguration(
-			{
-				request_type: requestType,
-			},
-			function ( configError, configuration ) {
-				if ( configError ) {
-					reject( configError );
-				}
+	const configuration = await promisifiedEbanxConfiguration( { request_type: requestType } );
+	const ebanx = await paymentGatewayLoader.ready( configuration.js_url, 'EBANX', false );
 
-				return paymentGatewayLoader
-					.ready( configuration.js_url, 'EBANX', false )
-					.then( ( Ebanx ) => {
-						Ebanx.config.setMode( configuration.environment );
-						Ebanx.config.setPublishableKey( configuration.public_key );
-						Ebanx.config.setCountry( cardDetails.country.toLowerCase() );
+	ebanx.config.setMode( configuration.environment );
+	ebanx.config.setPublishableKey( configuration.public_key );
+	ebanx.config.setCountry( cardDetails.country.toLowerCase() );
 
-						const parameters = getEbanxParameters( cardDetails );
-						Ebanx.card.createToken( parameters, function ( ebanxResponse ) {
-							Ebanx.deviceFingerprint.setup( function ( deviceId ) {
-								ebanxResponse.data.deviceId = deviceId;
-								return createTokenCallback( ebanxResponse, resolve, reject );
-							} );
-						} );
-					} )
-					.catch( ( loaderError ) => {
-						reject( loaderError );
-					} );
-			}
-		);
-	} );
+	const parameters = getEbanxParameters( cardDetails );
+	const ebanxResponse = await promisifiedCreateEbanxToken( ebanx, parameters );
+	debug( 'ebanx token creation response', ebanxResponse );
 
-	function createTokenCallback( ebanxResponse, resolve, reject ) {
-		if ( ebanxResponse.error.hasOwnProperty( 'err' ) ) {
-			return reject( translatedEbanxError( ebanxResponse.error.err ) );
-		}
+	const deviceId = await promisifiedEbanxDeviceFingerprint( ebanx );
+	ebanxResponse.data.deviceId = deviceId;
+	const validatedData = await validateAndNormalizeEbanxResponse( ebanxResponse );
+	return validatedData;
+}
 
-		ebanxResponse.data.paymentMethod = 'WPCOM_Billing_Ebanx';
-		return resolve( ebanxResponse.data );
+async function validateAndNormalizeEbanxResponse( ebanxResponse ) {
+	if ( ebanxResponse.error.hasOwnProperty( 'err' ) ) {
+		throw new Error( translatedEbanxError( ebanxResponse.error.err ) );
 	}
+	ebanxResponse.data.paymentMethod = 'WPCOM_Billing_Ebanx';
+	return ebanxResponse.data;
 }
 
 function getEbanxParameters( cardDetails ) {