To create a Payment:

try {
  let response = await RNJudo.makePayment(judoOptions);
  if (response.result === "Success") {
    //Handle successful result
  } else {
    //Handle unsuccessful result
  }
} catch (e) {
    //handle error
}

To create a PreAuth:

try {
  let response = await RNJudo.makePreAuth(judoOptions);
  if (response.result === "Success") {
    //Handle successful result
  } else {
    //Handle unsuccessful result
  }
} catch (e) {
  //handle error
}

response object will contain all data contained in JPTransactionData.h the same field is exposed in Android. e - error.

All error codes found in NSError+Judo.h are the same for Android.

const paymentOptions: PaymentOptions = {
  paymentMethods: RNJudo.PAYMENT_METHOD_NONE
};

Payment method types: {
  RNJudo.PAYMENT_METHOD_NONE
  RNJudo.PAYMENT_METHOD_CARD
  RNJudo.PAYMENT_METHOD_GOOGLE_PAY
  RNJudo.PAYMENT_METHOD_APPLE_PAY
  RNJudo.PAYMENT_METHOD_ALL
}

try {
  let response = await RNJudo.showPaymentMethods(
    Object.assign({}, judoOptions, applePayOptions, googlePayOptions, paymentOptions)
  );
  if (response.result === "Success") {
    //Handle successful result
  } else {
    //Handle non-success flow
  }
} catch (e) {
    //handle error
}

try {
  let response = await RNJudo.showPaymentMethods(
    Object.assign({}, judoOptions, applePayOptions, googlePayOptions, paymentOptions)
  );
  if (response.result === "Success") {
    //Handle successful result
  } else {
    //Handle non-success flow
  }
} catch (e) {
    //handle error
}

Transaction types: {
  RNJudo.APPLE_PAY_TRANSACTION_PAYMENT
  RNJudo.APPLE_PAY_TRANSACTION_PAYMENT
}

Shipping types: {
  RNJudo.APPLE_PAYMENT_SHIPPING
  RNJudo.APPLE_PAYMENT_DELIVERY
  RNJudo.APPLE_PAYMENT_STORE_PICKUP
  RNJudo.APPLE_PAYMENT_SERVICE_PICKUP
}

Apple Pay payment summary item types: {
  RNJudo.APPLE_PAYMENT_SUMMARY_FINAL
  RNJudo.APPLE_PAYMENT_SUMMARY_PENDING
}

Apple pay button light/dark styles: {
  RNJudo.APPLE_PAY_BUTTON_THEME_LIGHT
  RNJudo.APPLE_PAY_BUTTON_THEME_DARK
}

try {
  let response = await RNJudo.makeApplePayPayment(
    Object.assign({}, judoOptions, applePayOptions)
  );
  if (response.result === "Success") {
    //Handle successful result
  } else {
    //Handle non-success flow
  }
} catch (e) {
    //handle error
}

const googlePayOptions: JudoGooglePayOptions = {
  googlePayTestEnvironment: false,
  isPayment: false, // pre-auth
  isRequestBilling: false,
  isRequestContactDetails: false,
  isRequestShipping: false
};

try {
  let response = await RNJudo.makeGooglePayPayment(
    Object.assign({}, judoOptions, googlePayOptions)
  );
  if (response.result === "Success") {
    //Handle successful result
  } else {
    //Handle unsuccess flow
  }
} catch (e) {
    //handle error
}

There are two environments for Google Pay™:

Ensure you configure the Wallet to specify your payment environment.

This is reflected by the WalletConstants enum in the android wallet package:

public static final int PAYMENTS_ENVIRONMENT = WalletConstants.ENVIRONMENT_PRODUCTION;

public static final int PAYMENTS_ENVIRONMENT = WalletConstants.ENVIRONMENT_SANDBOX;

Google Pay™ supports both tokenized and non-tokenized cards. 

Tokenised:  Google Pay™ generates a token which represents the card. Only this token is sent when making a payment. Your customer's card number does not leave Google Pay™.

For security reasons, Judopay only currently supports tokenized cards. Therefore you must configure your application to only support the tokenized card method. 

public static final List<Integer> SUPPORTED_METHODS = Arrays.asList(
        // PAYMENT_METHOD_TOKENIZED_CARD refers to EMV tokenized credentials stored in the
        // Google Pay app, assuming it's installed.
        WalletConstants.PAYMENT_METHOD_TOKENIZED_CARD
);

1. Set the Gateway name to judopay:

public static final String GATEWAY_TOKENIZATION_NAME = "judopay";

2. When creating a new PaymentsClient (another Android class), initialise it with the PAYMENTS_ENVIRONMENT, and the activity launching your payment:

public static PaymentsClient createPaymentsClient(Activity activity) {
    Wallet.WalletOptions walletOptions = new Wallet.WalletOptions.Builder()
            .setEnvironment(Constants.PAYMENTS_ENVIRONMENT)
            .build();
    return Wallet.getPaymentsClient(activity, walletOptions);
}

3. Set the tokenization parameters with your merchant ID (Judo ID):

public static final List<Pair<String, String>> GATEWAY_TOKENIZATION_PARAMETERS = Arrays.asList(
    Pair.create("gatewayMerchantId", "{YOUR_JUDO_ID}")
);

4. Specify the card networks to support, and the allowed shipping countries. This might vary depending on your application and product.

// The allowed networks to be requested from the API. If the user has cards from networks not
// specified here in their account, these will not be offered for them to choose in the popup.
public static final List<Integer> SUPPORTED_NETWORKS = Arrays.asList(
        WalletConstants.CARD_NETWORK_AMEX,
        WalletConstants.CARD_NETWORK_DISCOVER,
        WalletConstants.CARD_NETWORK_VISA,
        WalletConstants.CARD_NETWORK_MASTERCARD
);

// Supported countries for shipping (use ISO 3166-1 alpha-2 country codes).
// Relevant only when requesting a shipping address.
public static final List<String> SHIPPING_SUPPORTED_COUNTRIES = Arrays.asList(
        "US",
        "GB"
);

In your checkout activity:

The Google Pay sample application project has a sample view layout for a Google Pay button you can use (googlepay_button.xml) which follows the Google Pay style conventions.

// Arbitrarily-picked result code.
private static final int LOAD_PAYMENT_DATA_REQUEST_CODE = 991;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_checkout);


    mGooglePayButton = findViewById(R.id.googlepay_button);
    mGooglePayStatusText = findViewById(R.id.googlepay_status);

    mGooglePayButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            requestPayment(view);
        }
    });

    // It's recommended to create the PaymentsClient object inside the onCreate method.
    mPaymentsClient = PaymentsUtil.createPaymentsClient(this);
    checkIsReadyToPay();
}

// This method is called when the Pay with Google button is clicked.
public void requestPayment(View view) {
    // Disables the button to prevent multiple clicks.
    mGooglePayButton.setClickable(false);

    // The price provided to the API should include taxes and shipping.
    // This price is not displayed to the user.
    String price = PaymentsUtil.microsToString(YOUR_ITEM_PRICE);

    TransactionInfo transaction = PaymentsUtil.createTransaction(price);
    PaymentDataRequest request = PaymentsUtil.createPaymentDataRequest(transaction);
    Task<PaymentData> futurePaymentData = mPaymentsClient.loadPaymentData(request);

    // Since loadPaymentData may show in the UI asking the user to select a payment method, we use
    // AutoResolveHelper to wait for the user interacting with it. Once completed,
    // onActivityResult will be called with the result.
    AutoResolveHelper.resolveTask(futurePaymentData, this, LOAD_PAYMENT_DATA_REQUEST_CODE);
}

private void checkIsReadyToPay() {
    // The call to isReadyToPay is asynchronous and returns a Task. We need to provide an
    // OnCompleteListener to be triggered when the result of the call is known.
    PaymentsUtil.isReadyToPay(mPaymentsClient).addOnCompleteListener(
            new OnCompleteListener<Boolean>() {
                public void onComplete(Task<Boolean> task) {
                    try {
                        boolean result = task.getResult(ApiException.class);
                        setGooglePayAvailable(result);
                    } catch (ApiException exception) {
                        // Process error
                        Log.w("isReadyToPay failed", exception);
                    }
                }
            });
}

private void setGooglePayAvailable(boolean available) {
    // If isReadyToPay returns true, show the button and hide the "checking" text. Otherwise,
    // notify the user that Pay with Google is not available.
    // Please adjust to fit in with your current user flow. You are not required to explicitly
    // let the user know if isReadyToPay returns false.
    if (available) {
        mGooglePayStatusText.setVisibility(View.GONE);
        mGooglePayButton.setVisibility(View.VISIBLE);
    } else {
        mGooglePayStatusText.setText(R.string.googlepay_status_unavailable);
    }
}

Create the PaymentDataRequest, passing in the gateway name and parameters set earlier.

Ensure to set the tokenization type as: WalletConstants.PAYMENT_METHOD_TOKENIZATION_TYPE_PAYMENT_GATEWAY:

public static PaymentDataRequest createPaymentDataRequest(TransactionInfo transactionInfo) {
    PaymentMethodTokenizationParameters.Builder paramsBuilder =
            PaymentMethodTokenizationParameters.newBuilder()
                    .setPaymentMethodTokenizationType(
                            WalletConstants.PAYMENT_METHOD_TOKENIZATION_TYPE_PAYMENT_GATEWAY)
                    .addParameter("gateway", Constants.GATEWAY_TOKENIZATION_NAME);
    for (Pair<String, String> param : Constants.GATEWAY_TOKENIZATION_PARAMETERS) {
        paramsBuilder.addParameter(param.first, param.second);
    }

    return createPaymentDataRequest(transactionInfo, paramsBuilder.build());
}

private static PaymentDataRequest createPaymentDataRequest(TransactionInfo transactionInfo, PaymentMethodTokenizationParameters params) {
    PaymentDataRequest request =
            PaymentDataRequest.newBuilder()
                    .setPhoneNumberRequired(false)
                    .setEmailRequired(true)
                    .setShippingAddressRequired(true)

                    // Omitting ShippingAddressRequirements altogether means all countries are
                    // supported.
                    .setShippingAddressRequirements(
                            ShippingAddressRequirements.newBuilder()
                                    .addAllowedCountryCodes(Constants.SHIPPING_SUPPORTED_COUNTRIES)
                                    .build())

                    .setTransactionInfo(transactionInfo)
                    .addAllowedPaymentMethods(Constants.SUPPORTED_METHODS)
                    .setCardRequirements(
                            CardRequirements.newBuilder()
                                    .addAllowedCardNetworks(Constants.SUPPORTED_NETWORKS)
                                    .setAllowPrepaidCards(true)
                                    .setBillingAddressRequired(true)

                                    // Omitting this parameter will result in the API returning
                                    // only a "minimal" billing address (post code only).
                                    .setBillingAddressFormat(WalletConstants.BILLING_ADDRESS_FORMAT_FULL)
                                    .build())
                    .setPaymentMethodTokenizationParameters(params)

                    // If the UI is not required, a returning user will not be asked to select
                    // a card. Instead, the card they previously used will be returned
                    // automatically (if still available).
                    // Prior whitelisting is required to use this feature.
                    .setUiRequired(true)
                    .build();

    return request;
}

Catch the payment result in your checkout activity:

public void onActivityResult(int requestCode, int resultCode, Intent data) {
    switch (requestCode) {
        case LOAD_PAYMENT_DATA_REQUEST_CODE:
            switch (resultCode) {
                case Activity.RESULT_OK:
                    PaymentData paymentData = PaymentData.getFromIntent(data);
                    handlePaymentSuccess(paymentData);
                    break;
                case Activity.RESULT_CANCELED:
                    // Nothing to here normally - the user simply cancelled without selecting a
                    // payment method.
                    break;
                case AutoResolveHelper.RESULT_ERROR:
                    Status status = AutoResolveHelper.getStatusFromIntent(data);
                    handleError(status.getStatusCode());
                    break;
            }

            // Re-enables the Pay with Google button.
            mGooglePayButton.setClickable(true);
            break;
    }
}

The function below demonstrates how to handle the payment request returned from the intent, and send on the necessary tokenized card details to the Judopay API to be processed:

private void handlePaymentSuccess(PaymentData paymentData) {
    // PaymentMethodToken contains the payment information, as well as any additional
    // requested information, such as billing and shipping address.
    PaymentMethodToken token = paymentData.getPaymentMethodToken();

    // getPaymentMethodToken will only return null if PaymentMethodTokenizationParameters was
    // not set in the PaymentRequest.
    if (token != null) {
        String encryptedToken = token.getToken();
        String cardNetwork = paymentData.getCardInfo().getCardNetwork();
        String cardDetails = paymentData.getCardInfo().getCardDetails();

        JudoApiService apiService = getJudo().getApiService(getApplicationContext());
        GooglePayRequest request = getGooglePayRequest(encryptedToken, cardNetwork, cardDetails);
        apiService.googlePayPreAuth(request);
    }
}

private GooglePayRequest getGooglePayRequest(String encryptedToken, String cardNetwork, string cardDetails) {
    return new GooglePayRequest.Builder()
            .setJudoId("YOUR_JUDO_ID")
            .setGooglePayWallet(new GooglePayWallet.Builder()
                    .setCardNetwork(cardNetwork)
                    .setCardDetails(cardDetails)
                    .setToken(encryptedToken)
                    .build())
            .setAmount(YOUR_PRICE)
            .setCurrency(Currency.GBP)
            .setConsumerReference(UNIQUE_GUID)
            .build();
}

Judopay's Web SDK requires some additional processing steps, in order to achieve a successful 3D Secure version 1.0 transaction.

This guide assumes the following prerequisites:   

To customise and create the Judopay Web SDK iframe:

<script>var configMinimum = {
iframe: {
language: "en",
    	errorFieldId: 'judopay-errors',
    	showCardTypeIcons: true,
    	cardTypeIconRight: "10px",
    	cardTypeIconTop: "-2px",
    	backgroundColor: "#FFFFFF",
    	layout: "compact",
    	enabledPaymentMethods: ['CARD'],
    	isCountryAndPostcodeVisible: false,
    	errorsDisplay: "HIDE_UNDER_FIELDS",
    	disableUnderline: false,
    }
}
</script>

For the purpose of this exercise, this sample config sets the following options for the iframe:

var judo = new JudoPay("yourAPIToken", true);
var payment = judo.createCardDetails('payment-iframe',configMinimum);

Complete customisation of the iframe settings and styles can be found here.

Once you have an established Judopay Web SDK iframe and after the consumer has entered valid card details (the iframe handles the validation and errors of this entry), on clicking the Pay Now button (submit-payment-button) you will obtain a promise from Judopay's servers which will return a oneUseToken for use within 30 minutes to transact the payment.

The following script:

To setup a payment promise on the Pay Now button:

var paymentPromise = "";
$("#submit-payment-button").click(function(){
   if (judo.getPaymentMethod()=="CARD") {
  	var paymentPromise = judo.createToken(payment);
  	paymentPromise.then(function(result) {
     	if (typeof result.error !== 'undefined') {
        	if (typeof result.oneUseToken !== 'undefined') {
 
            	  	// This is where the token is sent to your back office for payment
         	// request (expanded example below)
 
        	}
     	} 
  	}
   }
}

This example expands on Step 2: Obtain the Payment Promise above, with the source code to handle the oneUseToken and then submit this to the merchant’s server.

$.get("handle3.php",{myToken : result.oneUseToken}, function(data) {

// Code in here to handle the result from the oneUseToken Request will be inserted
// Here and handled in Step 5: Handle the Response from Judopay's Servers
}
);

This example should be called handle3.php and is the receiving handler from the Step 3: A oneUseToken is sent to Merchant's Server section above.

This example:

<?php
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');
 
$OneUseToken = $_GET["myToken"];
 
$userEncode = base64_encode("yourAPIToken:yourAPISecret");
$data=json_encode(
array(
'oneUseToken' =>$OneUseToken,
'yourConsumerReference' =>substr(md5(rand()), 0, 7),
'yourPaymentReference' => substr(md5(rand()), 0, 7), 	
'judoId' => 'yourJudoId',
'amount' => 1.0,
'currency' => "GBP"
));
$headers = array(
Content-Type:application/json',
'Authorization: Basic '.$userEncode,
'API-Version: 5.7.1',
);
$ch = curl_init("https://gw1.judopay-sandbox.com/transactions/payments");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");
curl_setopt($ch, CURLOPT_POSTFIELDS,$data);
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
$response = curl_exec($ch);
 
echo $response;
 
?>

This simple example just alerts a Success or Failure response:

$.get("handle3.php",{myToken : result.oneUseToken}, function(data) {
 
   if (data.result=="SUCCESS") {
 	// Handle a Success Result
 	var receiptId = data['receiptId'];
 	// Handle a Failure, you can look the data result for further detail
 	// To add other actions
 	alert(‘Payment Success’ + receiptId);
   } else {
 	alert(‘Payment Failed’);
   }
}
);

{"receiptId":"615495218204119040",
"yourPaymentReference":"bbd5067",
"type":"Payment",
"createdAt":"2020-08-25T11:38:06.7811+01:00",
"result":"Success",
"message":"AuthCode: 058967",
"judoId":100183086,
"merchantName":"testmerchant",
"appearsOnStatementAs":"APL*/testmerchant ",
"originalAmount":"1.00",
"netAmount":"1.00",
"amount":"1.00",
"currency":"GBP",
"cardDetails":
{"cardLastfour":"6891",
   "endDate":"1220",
   "cardToken":"DgoimaGqpm8ngRKnAl7xgXvFS0zuf3JQ",
   "cardType":1,
   "cardScheme":"Visa",
   "cardFunding":"Credit",
   "cardCategory":"",
   "cardQualifier":0,
   "cardCountry":"FR",
   "bank":"Credit Industriel Et Commercial"},
"consumer":
{"consumerToken":"dQxfNBY5cddXeMhe",
   "yourConsumerReference":"3190912"
},
"riskScore":0,
"threeDSecure":
{"attempted":true,
   "result":"PASSED"},
"externalBankResponseCode":"",
"billingAddress":{}
}

The source code from Step 5: Handle the Response from Judopay's Servers, will automatically submit the 3D Secure parameters to the required Issuer Service.Step 5: Handle the Response from Judopay's Servers

The consumer will be re-directed to the Issuer Service 3D Secure Challenge Screen:

If the consumer completes the 3D Secure challenge screen:

If the consumer chooses to abandon at this stage, you will receive a no reply POST.

This example is the return3ds.php file as declared in the sample code from Step 5: Handle the Response from Judopay's Servers.Step 5: Handle the Response from Judopay's Servers

The following sample POSTs the returned 3D Secure response back to Judopay via an API call to the /transactions endpoint, with the given receiptId.

<?php

$receiptId = $_GET['receiptId'];1

if (empty($receiptId))  {
  echo '<BR> Sorry there was an error - missing receiptId';2
} else {
  $MD = $_POST['MD'];
  $PaRes = $_POST['PaRes'];
  $data = json_encode(array('Md' =>$MD,'PaRes' =>$PaRes));3
  $userEncode = base64_encode("yourAPIToken:yourAPISecret");4
  $headers = array(
  'Content-Type:application/json',
  'Authorization: Basic '.$userEncode,
  'API-Version: 5.7.1',
  );
  $ch = curl_init("https://gw1.judopay-sandbox.com/transactions/".$receiptId);5
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);6
  curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");
  curl_setopt($ch, CURLOPT_POSTFIELDS,$data);
  curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
  $response = curl_exec($ch);
  echo $response;7
}
?>

As a result of the receiptObject received in Step 5: Handle the Response from Judopay's Servers, you should redirect the consumer accordingly.Step 5: Handle the Response from Judopay's Servers

For example, if the result = SUCCESS redirect the consumer to the Success Page, else ERROR.

You could store the:

Using those tokens bypasses the need to enter any card details if required.