React Native

integrating react native with judopay prerequisites you have set up your judopay account sign up for your sandbox account , to receive access to your judopay dashboard and the sandbox environment your judoids and tokens are configured and enabled as appropriate for more information on permissions, see introduction docid\ s 8hoamytkgy13t0p657 you have the development environment set up for react native, here for mobile apps, we recommend using payment session authentication the judopay sdk for react native is available as a node package and can be added to the project via npm or yarn judopay's react native examples use typescript, however you can also use javascript adding and initialising react native to add the judopay react native sdk to your app enter the following line into the terminal `npm install judokit react native` or, `yarn add judokit react native` below is an example of a package json file with the judopay sdk dependency to initialise the judopay react native sdk import the judopay class from the judokit react native package import judopay from 'judokit react native'` provide your token and secret or paymentsession `const judopay = new judopay({token "my token", secret "my secret"})` or, `const judopay = new judopay({token "my token", paymentsession "my payment session"})` you can generate a payment session using one of our server sdk integration docid\ mzcnx mb0nespjb4mjpz4 , or by making a call to our transaction api set the sdk in sandbox mode `judopay issandboxed = true` making a transaction the method for making a transaction and configuring the flow making a transaction async invoketransaction( type judotransactiontype, configuration judoconfiguration ) promise\<judoresponse> parameter description type judotransactiontype an enum value that describes the transaction type configuration judoconfiguration a configuration object that configures the payment flow the response is handled via a promise which resolves to a judoresponse to make a transaction transaction example import judopay, {judoauthorization, judoreference, judoamount, judoconfiguration, judotransactiontype} from 'judokit react native' const authorization judoauthorization = { token "my token", paymentsession "payment session", } const reference judoreference = { consumerreference 'consumer ref', } const amount judoamount = { value '0 05', currency 'gbp', } const configuration judoconfiguration = { judoid 'my judo id', amount, reference, } try { const judo = new judopay(authorization) const response = await judo invoketransaction(judotransactiontype payment, configuration) if (response != null) { console log('receipt', json stringify(response)) } else { console error('error', "invoketransaction returned null response") } } catch (error) { console error(error) } react native server to server transactions this feature is intended to allow the merchant to access cardtokens stored securely by the mobile sdk, to then use the cardtoken to make a server to server transaction using our server sdk integration docid\ mzcnx mb0nespjb4mjpz4 , or our transaction api this is typically intended for scenarios where a merchant might want to process a merchant initiated transaction using the card details stored by the consumer specify a server to server transaction set the judotransactionmode to servertoserver when calling the judo methods specify an apple pay™ server to server transaction specify a google pay™ server to server transaction token payments if you are building your own card wallet, and not using a ui you can make a /preauth or /payment using a stored card token to make a token payment or pre auth token payment use the /savecard endpoint to return a card token for details on endpoints, see transaction api reference the method signature is as follows parameter description mode judotransactionmode a value used to specify either a pre auth or payment configuration judoconfiguration an object used to configure the payment flow cardtoken string the card token used for the token transaction securitycode string the saved card token security code cardholdername string the saved card token cardholder name cardscheme string the saved card token scheme name, for example visa mastercard amex the result is a judoresponse object containing the transaction details response example try { const judo judo = new judopay('mytoken', 'mysecret') const configuration judoconfiguration = { judoid 'myjudoid', amount amount, reference reference } const response = await judo performtokentransaction( judotransactionmode payment, configuration, 'card token ', '123', 'john doe', 'visa' ) // handle response } catch (exception) { // handle exception } 3d secure 2 for react native judokit reactnative supports 3d secure 2 (emv 3ds) 3d secure 2 is available in judokit react native version 3 0 0 or higher, and is available on github 3d secure 2 payment example const uiconfiguration judouiconfiguration = { isavsenabled false, shouldpaymentmethodsverifysecuritycode false, shouldpaymentbuttondisplayamount false, shouldpaymentmethodsdisplayamount false, // sets whether the billing information screen should be presented to the consumer shouldaskforbillinginformation true } // if you don't want to present the billing info screen to the consumer, set the address instead const cardaddress judoaddress = { line1 'my house', line2 'my street' town 'my town', postcode 'tr14 8pa', countrycode 382, } const judo judoconfiguration = { judoid '123456', amount, reference, paymentmethods judopaymentmethod card, supportedcardnetworks judocardnetwork visa, uiconfiguration, cardaddress, // sets the value for challenge request indicator, // possible values // challengerequestindicator nopreference // challengerequestindicator nochallenge // challengerequestindicator challengepreferred // challengerequestindicator challengeasmandate challengerequestindicator challengerequestindicator challengeasmandate, // sets the value for sca exemption, // possible values // scaexemption lowvalue // scaexemption securecorporate // scaexemption trustedbeneficiary // scaexemption transactionriskanalysis scaexemption scaexemption lowvalue, // email address emailaddress 'email\@me com', // sets the maximum timeout for 3ds 2 0 transactions in minutes, // always use 2 characters when setting the timeout threedstwomaxtimeout 30, // sets phone number country code phonecountrycode '44', // phone number mobilenumber '0799999999', } customising the payment experience configuring the react native payment flow every transaction requires a judoconfiguration object to be passed as a parameter the judoconfiguration object sets all the required parameters for configuring the payment flow, including all optional parameters to customise the payment experience to configure the payment flow import judoconfiguration judoamount judoreference from the judokit react native package ui configuration you can customise the payment experience for the consumer by configuring the following ui behaviour properties in the judouiconfiguration object the judouiconfiguration object allows you to enable | disable the address verification service enable | disable consumers entering the cvv/cv2 code show | hide the amount in the payment button show | hide the amount in the payments widget enable | disable consumers entering their billing information set a custom theme to create the judouiconfiguration object parameter description isavsenabled boolean required required enable | disable the address verification service when making card transactions default = false shouldpaymentmethodsverifysecuritycode boolean required required enable | disable the merchant entering the cv2 code for every token payment | pre auth transaction in the payment method selection screen default = true shouldpaymentbuttondisplayamount boolean required required show | hide the transaction amount on the payment | pre auth button default = false shouldpaymentmethodsdisplayamount boolean required required show | hide the transaction amount from the payments widget default = true shouldaskforbillinginformation boolean optional optional show | hide the billing information screen default = false theme object optional optional customise various elements of the payment screen for example bodyfont bodysize buttoncolor buttontitlecolor setting up an incremental authorisation the incremental authorisation feature allows you to increment the value of your original pre authorisation for scenarios where you need to charge your customer a higher total amount by incrementing the pre authorisation value, you will be able to capture the total amount that you wish to charge your customer when you are ready this feature is not available with all acquirers check with our customer service team, or your account manager for your eligibility to use this the isallowincrement flag is a part of the main judo configuration config object, and can be set directly in the configuration object set the isallowincrement flag to true if present = it is automatically applied for preauth requests if no value is provided = then false is set by default example setting up the transaction amount to set up the transaction amount setting up transaction amount example //from the imported judoamount interface interface judoamount { value string, currency string, } //create a new variable that implements the judoamount interface //add the variable to the configuration object const amount judoamount = { value '999 99', currency 'gbp' } setting the primary account details to set the primary account details when using an alternative payment method, see react native /#adding payment methods it is mandatory for merchants who have an mcc code of 6012 , 6051 and 7299 to submit additional information about the primary account holder in primaryaccountdetails property for payment pre authorisation to set the primary account details to be sent with the transaction the above properties are optional , so set only the ones you need changing default supported card networks to change the default supported card networks set your own supportedcardnetworks value for the purpose of this exercise, visa and mastercard are set as the only supported card networks const cardnetworks = judocardnetwork visa | judocardnetwork mastercard to explicitly set all card networks to be supported, instead of using the | operator to combine all the card networks, set const cardnetworks = judocardnetwork all setting a card address to set the card address when using an alternative payment method, see react native /#adding payment methods to send additional card address details with the transaction set the cardaddress parameter in the judoconfiguration object changing the default payment methods by default, all payment methods are displayed in the payments widget (as long as the required parameters are set) as a merchant, you have flexibility over which payment methods to support change the paymentmethods property to the judopaymentmethod value in the judoconfiguration instance an example of the judopaymentmethod you can set multiple values using the | operator for the purpose of this exercise, card and apple pay™ are set as available payment methods const mypaymentmethods = judopaymentmethod card | judopaymentmethod applepay to explicitly state all payment methods are to be displayed, instead of using the | operator to combine all the payment methods, set const mypaymentmethods = judopaymentmethod all adding a new language you can add any language you need override some or all of the translations of an existing language the judokit react native sdk supports en (default), fr, es for your react native project (the wrapper for the android and ios sdks), language translations can override the strings using the standard android and ios localisation processes use existing translations to use or test one of judopay's default language transalations, simply change the language on your android settings → system → language & input → languages ios settings → general → language & region → iphone language the translation will be applied automatically override existing translations to override existing translations, follow the android or ios localisation modifying steps below identify the sdk string keys the sdk uses string resources defined in its strings xml file you can find the list of all string keys below to modify the value of an existing string, add a new one with the same key to the strings xml file in your android project you will find this located in the "res/values directory" this will override the sdk value of this string if your app supports multiple languages , ensure you add translations for the overridden string in the appropriate values \<language code> folders for example values fr for french or values es for spanish identify the sdk string keys the sdk uses string resources defined in its localizable strings file you can find the list of all string keys below to modify the value of an existing string, add a new one with the same key to the localizable strings file in your ios project this will override the sdk value of this string, if your app supports multiple languages , ensure you add translations for the overridden string in the corresponding lproj directories for example fr lproj for french, es lproj for spanish also, remember to declare any new language in " project > info > localizations " this will ensure the translation is recognised by the framework to add a new language to add a new language, follow the android or ios steps below identify the sdk string keys and prepare the translations for all values in the language you wish to add or override you can find the list of all string keys below in your app’s "res/values directory", create a new folder for the language you want to add make sure you use the correct language and region codes, for example ‘ values es ’ for spanish ‘ values zh rcn ’ for simplified chinese inside the new language folder, create a strings xml file if one does not already exist within the newly created strings xml ensure you provide the translations for all string keys used by the sdk, otherwise the translation may end up incomplete when overriding or adding new string keys, be careful to avoid string key conflicts between the sdk and your app any matching key will cause your app’s value to override the sdk's default value, which could potentially lead to unintended behaviour, or mismatched translations identify the sdk string keys and prepare the translations for all values in the language you wish to add or override you can find the list of all string keys below in your app’s project directory, create a new lproj folder for the language you want to add ensure you use the correct language and region codes for example es lproj for spanish zh hans lproj for simplified chinese inside the new language folder, create a localizable strings file if one does not already exist within the newly created localizable strings file ensure you provide the translations for all string keys used by the sdk, otherwise the translation may end up incomplete declare the new language in " project > info > localizations " this will ensure the translation is recognised by the framework when overriding or adding new string keys, be careful to avoid string key conflicts between the sdk and your app any matching key will cause your app’s value to override the sdk's default value, which could potentially lead to unintended behaviour, or mismatched translations string keys react native styles and themes to make custom fonts work, they must be added to your client app first styling the judotheme property handles the font families font sizes font colors please note this will only apply styles and themes to the ios platform custom fonts an example of a complete custom theme payments widget to set up the payments widget for react native set up the judoconfiguration instance setting up the transaction reference setting up the transaction reference enables you to also set up your consumerreference and paymentreference which are included within the transaction these references help you to identify your consumer and transaction to set up the transaction reference from the imported judoreference interface 2 use the interface to set your consumerreference a unique reference to identify your consumer 3 you can also set optional fields, for example paymentreference a unique payment reference for the transaction metadata any additional organisation or system details to be included in the transaction for example a consumerreference is set for the purpose of this exercise, the amount reference judoid are set in the judoconfiguration instance all the required parameters are now set up, and ready to make a transaction a complete judoconfiguration example adding payment methods before you can process apple pay™ payments with judopay, you will need to set up apple pay™ apple pay™ is not supported on all apple devices prerequisite you have set up your apple pay™ developer account to get your merchant ids for more details, see ios docid 09p1cru0cbxjkzea 0zpi before invoking any apple pay™ functionality within your app, test if it is supported on the device by performing these checks use pkpaymentauthorizationviewcontroller canmakepayments checks if the device supports apple pay™ and has it enabled queries both the device hardware and whether apple pay™ is enabled in the user’s region use pkpaymentauthorizationviewcontroller canmakepaymentsusingnetworks a more detailed check to query whether a user has a registered card with particular card schemes useful if you do not accept all card types both methods are explained in the apple developer documentation here integrating apple pay™ for react native step one configure apple pay™ create an applepayconfiguration instance parameter description merchantid string required required your apple pay™ merchant id this confirms you are able to accept payments countrycode string required required an iso 3166 1 alpha 2 country code paymentsummaryitems string required required the list of items requiredbillingcontactfields judocontactfield optional optional select between one or more billing contact fields for example email phone name requiredshippingcontactfields judocontactfield optional optional select between one or more shipping contact fields for example email phone name shippingmethods judoshippingmethod\[] optional optional describe some of the shipping methods that you provide although this parameter is optional, if you set shipping contact fields as required, you must also provide the shipping type and shipping methods shippingtype judoshippingtype optional optional select a shipping type delivery shipping store pickup service pickup although this parameter is optional, if you set shipping contact fields as required, you must also provide the shipping type and shipping methods returnedinfo judoreturnedinfo optional optional select to receive some of the billing and/or shipping details as a response property recurringpaymentrequest optional optional enables the apple pay™ recurring payment functionality step two check availability and make an apple pay™ transaction displaying apple pay™ as a payment method to display apple pay™ in the payments widget add the applepayconfiguration property to the judoconfiguration instance call the applepay method and handle the response use the judotransactionmode property for payments or pre auths with apple pay™ making an apple pay™ transaction an example of an apple pay™ transaction the last item in the judopaymentsummaryitem list must always represent the total amount of the previous items apple pay™ recurring payments judopay provides support for apple pay™ recurring payments this feature enables merchants to utilise the apple pay™ recurring payment token , by also being able to use the token for merchant initiated transactions (mits) the apple pay™ recurring payment token is generated by apple pay's servers and sent to judopay, where it is securely stored in return, you will receive a judopay token that is linked to the stored apple pay™ token this judopay token can then be used for future mits for more information on mits, see merchant initiated transactions docid\ ek1dldo8cgr9di226zlyf you are responsible for initiating merchant initiated transactions setting up the apple pay™ transaction for recurring payments to use the apple pay™ recurring payments feature, begin with an initial apple pay™ transaction with these additional steps attach the recurring payment configuration object recurringpaymentrequest to your applepayconfiguration set in step one recurring payment request // create a regular billing item const regularbilling judorecurringpaymentsummaryitem = { label "premium music subscription", amount "9 99", intervalunit judocalendarunit month, intervalcount 1 }; // create the recurring payment request configuration object const managementurl = "https //example com/manage subscription"; const request judorecurringpaymentrequest = { paymentdescription "monthly subscription for premium music service", &#x9;managementurl managementurl, regularbilling regularbilling, billingagreement "by subscribing, you agree to monthly billing of £9 99 for the music service until canceled " }; // assign the recurring payment request to the apple pay configuration (if not done already on apple pay configuration initialization) applepayconfiguration recurringpaymentrequest = request; judorecurringpaymentrequest name type description paymentdescription string (non null / required) provide a description of the recurring payment this will be displayed in the payment sheet to the consumer regularbilling judorecurringpaymentsummaryitem (non null / required) the regular billing cycle for the recurring payment includes start date end date an interval an interval count managementurl string (non null / required) a url to a web page where the consumer can update or delete the payment method for the recurring payment note it is best practice to use a universal link for this url the same link can direct the consumer to either a page in the app (if the app is installed), or to a page on the merchant’s website for more information on adopting universal links, see universal links billingagreement string (nullable / optional) maximum string length = 500 characters a localised billing agreement this agreement is displayed via the payment sheet to the consumer before they authorise the payment note this string can include information on the recurring payment amount recurring intervals other payment conditions information on how the consumer can cancel payments this string is not intended to replace any payment terms that you provide outside of the apple pay™ payment sheet the apple pay™ payment sheet displays the text of the billingagreement string for long billingagreement strings that can not fit on the payment sheet, these will appear truncated with an ellipsis consumers can select the billing details on the payment sheet to read the full text judorecurringpaymentsummaryitem name type description label string (non null / required) a short, localised description of the item note provide the label in title case for example vat tax gift wrap and card discount ensure you omit any punctuation and whitespace after the label the label is formatted for display by the framework amount string (non null / required) the amount of the summary item to specify the currency, set a value for the currency property on the apple pay configuration object intervalunit judocalendarunit (nullable / optional) the amount of time in calendar units that represents a fraction of the total payment interval the supported judocalendarunit intervalunits are minute hour day month year intervalcount number (nullable / optional) the number of interval units that make up the total payment interval note the default value for the interval count is 1 startdate string (nullable / optional) the date of the first payment formatted as iso 8601 string "2025 01 17t14 35 22 123z the default value is nil which requests the first payment as part of the initial transaction enddate string (nullable / optional) the date of the final payment the default value is nil which specifies no end date the above configuration object property descriptions are extracts from the apple developer documentation for a full description on all the object properties, see the apple pay documentation 2 to initiate a series of scheduled / recurring payments, set the initialrecurringpayment flag in the judopay configuration object to true initialrecurringpayment true let configuration = {} as judoconfiguration; ( ) configuration = { configuration, isinitialrecurringpayment true, }; if you plan to use the judopay token for unscheduled / ad hoc mit transaction(s) in the future, leave the initialrecurringpayment flag = false (default) integrating google pay™ for react native prerequisite you have set up your google pay™ payments profile for more details, see create a payments profile to make a google pay™ transaction, or add google pay™ as a payment method in the payment method selection screen provide a judogooglepayconfiguration property example of a googlepayconfiguration property field description countrycode string required required an iso 3166 1 alpha 2 country code environment judogooglepayenvironment enum required required sets the google pay™ environment to either test production in order to go live you will need to have set up your google pay™ api merchant live account isemailrequired boolean optional optional specifies if the user is required to add their email address isbillingaddressrequired boolean optional optional specifies if the user is required to add their billing information billingaddressparameters judobillingaddressparameters optional optional describes the full or minimum billing requirements phone number although this parameter is optional, if you set billing / shipping fields as required, you must also provide the billing / shipping parameters isshippingaddressrequired boolean optional optional specifies if the user is required to add their shipping information shippingaddressparameters judobillingaddressparameters optional optional describes the allowed country codes and phone number requirements although this parameter is optional, if you set billing / shipping fields as required, you must also provide the billing / shipping parameters displaying google pay™ as a payment method to display google pay™ in the payments widget add the googlepayconfiguration property to the judoconfiguration instance invoke the googlepay method and handle the response use the judotransactionmode property for payments or preauths with google pay making a google pay™ transaction example of a google pay™ transaction