Enable Klarna and PayPal on the Banxa buy path

CHANGELOG.md

@@ -7,6 +7,7 @@
 - added: Changelly swap provider
 - added: NYM swap provider (`nymswap`)
 - added: Optional Bridgeless swap referral id via the `BRIDGELESS_INIT` env config, passed through to the swap plugin.
+- added: Klarna and PayPal payment options on the Banxa buy path.
 - changed: Route maestro test builds to a dedicated Zealot channel so they no longer appear in the production release list.
 - changed: Hide the wallet "Get Raw Keys" option behind Developer Mode, while still showing it for wallets that fail to load.
 - fixed: Share button referral link now uses the dl.edge.app deep-link domain so appreferred attribution is tracked

src/__tests__/util/paymentTypeIcons.test.ts

@@ -12,6 +12,7 @@ describe('paymentTypeIcons', () => {
     paymentTypeLogoGooglePay: { uri: 'google-pay-icon.png' },
     paymentTypeLogoIdeal: { uri: 'ideal-icon.png' },
     paymentTypeLogoInterac: { uri: 'interac-icon.png' },
+    paymentTypeLogoKlarna: { uri: 'klarna-icon.png' },
     paymentTypeLogoPayid: { uri: 'payid-icon.png' },
     paymentTypeLogoPaypal: { uri: 'paypal-icon.png' },
     paymentTypeLogoPix: { uri: 'pix-icon.png' },
@@ -24,6 +25,7 @@ describe('paymentTypeIcons', () => {
       expect(getPaymentTypeThemeKey('applepay')).toBe('paymentTypeLogoApplePay')
       expect(getPaymentTypeThemeKey('credit')).toBe('paymentTypeLogoCreditCard')
       expect(getPaymentTypeThemeKey('paypal')).toBe('paymentTypeLogoPaypal')
+      expect(getPaymentTypeThemeKey('klarna')).toBe('paymentTypeLogoKlarna')
     })
 
     it('should return bank transfer key for fallback payment types', () => {
@@ -41,6 +43,9 @@ describe('paymentTypeIcons', () => {
       expect(getPaymentTypeIcon('credit', mockTheme)).toEqual({
         uri: 'credit-card-icon.png'
       })
+      expect(getPaymentTypeIcon('klarna', mockTheme)).toEqual({
+        uri: 'klarna-icon.png'
+      })
     })
 
     it('should return bank transfer icon for fallback payment types', () => {

src/__tests__/util/paymentTypeUtils.test.ts

@@ -10,6 +10,8 @@ describe('paymentTypeUtils', () => {
       expect(getPaymentTypeDisplayName('credit')).toBe('Credit and Debit Card')
       expect(getPaymentTypeDisplayName('venmo')).toBe('Venmo')
       expect(getPaymentTypeDisplayName('sepa')).toBe('SEPA Bank Transfer')
+      expect(getPaymentTypeDisplayName('klarna')).toBe('Klarna')
+      expect(getPaymentTypeDisplayName('paypal')).toBe('Paypal')
     })
 
     it('should return original value for unknown payment types', () => {

src/components/scenes/RampCreateScene.tsx

@@ -811,7 +811,10 @@ export const RampCreateScene: React.FC<Props> = (props: Props) => {
         {/* Amount Inputs */}
         {/* Top Input (Fiat) */}
         <View style={styles.inputRowView}>
-          <DropdownInputButton onPress={handleFiatDropdown}>
+          <DropdownInputButton
+            onPress={handleFiatDropdown}
+            testID="rampFiatDropdown"
+          >
             {selectedFiatFlagUri !== '' ? (
               <ShadowedView style={styles.shadowedIcon}>
                 <FastImage

src/locales/en_US.ts

@@ -2167,6 +2167,7 @@ const strings = {
   instant_ach_bank_transfer: 'Instant ACH Bank Transfer',
   ideal: 'iDEAL',
   interac_e_transfer: 'Interac e-Transfer',
+  klarna: 'Klarna',
   mexico_bank_transfer: 'Mexico Bank Transfer',
   payid: 'PayID',
   paypal: 'Paypal',

src/locales/strings/enUS.json

@@ -1664,6 +1664,7 @@
   "instant_ach_bank_transfer": "Instant ACH Bank Transfer",
   "ideal": "iDEAL",
   "interac_e_transfer": "Interac e-Transfer",
+  "klarna": "Klarna",
   "mexico_bank_transfer": "Mexico Bank Transfer",
   "payid": "PayID",
   "paypal": "Paypal",

src/plugins/gui/fiatPluginTypes.ts

@@ -57,6 +57,7 @@ export const asFiatPaymentType = asValue(
   'ideal',
   'interac',
   'iobank',
+  'klarna',
   'mexicobank',
   'payid',
   'paypal',

src/plugins/ramps/banxa/banxaRampPlugin.ts

@@ -92,7 +92,9 @@ const allowedPaymentTypes: AllowedPaymentTypes = {
     ideal: true,
     interac: true,
     iobank: true,
+    klarna: true,
     payid: true,
+    paypal: true,
     pix: true,
     sepa: false, // Leave this to Bity for now
     turkishbank: true
@@ -153,11 +155,13 @@ const asBanxaPaymentType = asValue(
   'DLOCALPIX',
   'DLOCALZAIO',
   'IDEAL',
+  'KLARNACKO',
   'MANUALPAYMENT',
   'MONOOVAPAYID',
   'PRIMERAP',
   'PRIMERCC',
   'PRIMERGP',
+  'PRIMERPAYPAL',
   'WORLDPAYGOOGLE',
   'ZHACHSELL'
 )
@@ -335,11 +339,13 @@ const typeMap: Record<BanxaPaymentType, FiatPaymentType> = {
   DLOCALPIX: 'pix',
   DLOCALZAIO: 'iobank',
   IDEAL: 'ideal',
+  KLARNACKO: 'klarna',
   MANUALPAYMENT: 'turkishbank',
   MONOOVAPAYID: 'payid',
   PRIMERAP: 'applepay',
   PRIMERCC: 'credit',
   PRIMERGP: 'googlepay',
+  PRIMERPAYPAL: 'paypal',
   WORLDPAYGOOGLE: 'googlepay',
   ZHACHSELL: 'ach'
 }

src/plugins/ramps/utils/getSettlementRange.ts

@@ -61,6 +61,8 @@ export function getBuySettlementRange(
     case 'iobank':
       // Not listed in GUI plugin lists; assume typical window
       return RANGE(5, 'minutes', 24, 'hours')
+    case 'klarna':
+      return RANGE(5, 'minutes', 24, 'hours')
     case 'mexicobank':
       return RANGE(5, 'minutes', 24, 'hours')
     case 'payid':
@@ -116,6 +118,8 @@ export function getSellSettlementRange(
     case 'iobank':
       // Not listed in GUI plugin lists; assume typical window
       return RANGE(5, 'minutes', 24, 'hours')
+    case 'klarna':
+      return RANGE(5, 'minutes', 24, 'hours')
     case 'mexicobank':
       return RANGE(5, 'minutes', 24, 'hours')
     case 'payid':

src/theme/variables/edgeDark.ts

@@ -15,6 +15,7 @@ import paymentTypeLogoGiftCard from '../../assets/images/paymentTypes/paymentTyp
 import paymentTypeLogoGooglePay from '../../assets/images/paymentTypes/paymentTypeLogoGooglePay.png'
 import paymentTypeLogoIdeal from '../../assets/images/paymentTypes/paymentTypeLogoIdeal.png'
 import paymentTypeLogoInterac from '../../assets/images/paymentTypes/paymentTypeLogoInterac.png'
+import paymentTypeLogoKlarna from '../../assets/images/paymentTypes/paymentTypeLogoKlarna.png'
 import paymentTypeLogoPayid from '../../assets/images/paymentTypes/paymentTypeLogoPayid.png'
 import paymentTypeLogoPaynow from '../../assets/images/paymentTypes/paymentTypeLogoPaynow.png'
 import paymentTypeLogoPaypal from '../../assets/images/paymentTypes/paymentTypeLogoPaypal.png'
@@ -477,6 +478,7 @@ export const edgeDark: Theme = {
   paymentTypeLogoGooglePay,
   paymentTypeLogoIdeal,
   paymentTypeLogoInterac,
+  paymentTypeLogoKlarna,
   paymentTypeLogoPayid,
   paymentTypeLogoPaynow,
   paymentTypeLogoPaypal,

src/theme/variables/edgeLight.ts

@@ -15,6 +15,7 @@ import paymentTypeLogoGiftCard from '../../assets/images/paymentTypes/paymentTyp
 import paymentTypeLogoGooglePay from '../../assets/images/paymentTypes/paymentTypeLogoGooglePay.png'
 import paymentTypeLogoIdeal from '../../assets/images/paymentTypes/paymentTypeLogoIdeal.png'
 import paymentTypeLogoInterac from '../../assets/images/paymentTypes/paymentTypeLogoInterac.png'
+import paymentTypeLogoKlarna from '../../assets/images/paymentTypes/paymentTypeLogoKlarna.png'
 import paymentTypeLogoPayid from '../../assets/images/paymentTypes/paymentTypeLogoPayid.png'
 import paymentTypeLogoPaynow from '../../assets/images/paymentTypes/paymentTypeLogoPaynow.png'
 import paymentTypeLogoPaypal from '../../assets/images/paymentTypes/paymentTypeLogoPaypal.png'
@@ -480,6 +481,7 @@ export const edgeLight: Theme = {
   paymentTypeLogoGooglePay,
   paymentTypeLogoIdeal,
   paymentTypeLogoInterac,
+  paymentTypeLogoKlarna,
   paymentTypeLogoPayid,
   paymentTypeLogoPaynow,
   paymentTypeLogoPaypal,

src/theme/variables/testDark.ts

@@ -15,6 +15,7 @@ import paymentTypeLogoGiftCard from '../../assets/images/paymentTypes/paymentTyp
 import paymentTypeLogoGooglePay from '../../assets/images/paymentTypes/paymentTypeLogoGooglePay.png'
 import paymentTypeLogoIdeal from '../../assets/images/paymentTypes/paymentTypeLogoIdeal.png'
 import paymentTypeLogoInterac from '../../assets/images/paymentTypes/paymentTypeLogoInterac.png'
+import paymentTypeLogoKlarna from '../../assets/images/paymentTypes/paymentTypeLogoKlarna.png'
 import paymentTypeLogoPayid from '../../assets/images/paymentTypes/paymentTypeLogoPayid.png'
 import paymentTypeLogoPaynow from '../../assets/images/paymentTypes/paymentTypeLogoPaynow.png'
 import paymentTypeLogoPaypal from '../../assets/images/paymentTypes/paymentTypeLogoPaypal.png'
@@ -477,6 +478,7 @@ export const testDark: Theme = {
   paymentTypeLogoGooglePay,
   paymentTypeLogoIdeal,
   paymentTypeLogoInterac,
+  paymentTypeLogoKlarna,
   paymentTypeLogoPayid,
   paymentTypeLogoPaynow,
   paymentTypeLogoPaypal,

src/theme/variables/testLight.ts

@@ -15,6 +15,7 @@ import paymentTypeLogoGiftCard from '../../assets/images/paymentTypes/paymentTyp
 import paymentTypeLogoGooglePay from '../../assets/images/paymentTypes/paymentTypeLogoGooglePay.png'
 import paymentTypeLogoIdeal from '../../assets/images/paymentTypes/paymentTypeLogoIdeal.png'
 import paymentTypeLogoInterac from '../../assets/images/paymentTypes/paymentTypeLogoInterac.png'
+import paymentTypeLogoKlarna from '../../assets/images/paymentTypes/paymentTypeLogoKlarna.png'
 import paymentTypeLogoPayid from '../../assets/images/paymentTypes/paymentTypeLogoPayid.png'
 import paymentTypeLogoPaynow from '../../assets/images/paymentTypes/paymentTypeLogoPaynow.png'
 import paymentTypeLogoPaypal from '../../assets/images/paymentTypes/paymentTypeLogoPaypal.png'
@@ -480,6 +481,7 @@ export const testLight: Theme = {
   paymentTypeLogoGooglePay,
   paymentTypeLogoIdeal,
   paymentTypeLogoInterac,
+  paymentTypeLogoKlarna,
   paymentTypeLogoPayid,
   paymentTypeLogoPaynow,
   paymentTypeLogoPaypal,

src/types/Theme.ts

@@ -433,6 +433,7 @@ export interface Theme {
   paymentTypeLogoGooglePay: ImageProp
   paymentTypeLogoIdeal: ImageProp
   paymentTypeLogoInterac: ImageProp
+  paymentTypeLogoKlarna: ImageProp
   paymentTypeLogoPayid: ImageProp
   paymentTypeLogoPaynow: ImageProp
   paymentTypeLogoPaypal: ImageProp

src/util/paymentTypeIcons.ts

@@ -17,6 +17,7 @@ const paymentTypeToThemeKey: Record<FiatPaymentType, keyof Theme | null> = {
   ideal: 'paymentTypeLogoIdeal',
   interac: 'paymentTypeLogoInterac',
   iobank: 'paymentTypeLogoBankTransfer', // Using bank transfer as fallback
+  klarna: 'paymentTypeLogoKlarna',
   mexicobank: 'paymentTypeLogoBankTransfer', // Using bank transfer as fallback
   payid: 'paymentTypeLogoPayid',
   paypal: 'paymentTypeLogoPaypal',

src/util/paymentTypeUtils.ts

@@ -16,6 +16,7 @@ const paymentTypeDisplayNames: Record<string, string> = {
   ideal: lstrings.ideal,
   interac: lstrings.interac_e_transfer,
   iobank: lstrings.bank_transfer,
+  klarna: lstrings.klarna,
   mexicobank: lstrings.mexico_bank_transfer,
   payid: lstrings.payid,
   paypal: lstrings.paypal,