diff --git a/CHANGELOG.md b/CHANGELOG.md index 6e212a1e36a..7af8b81afde 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/__tests__/util/paymentTypeIcons.test.ts b/src/__tests__/util/paymentTypeIcons.test.ts index 3cbee4da46c..00b9173e70f 100644 --- a/src/__tests__/util/paymentTypeIcons.test.ts +++ b/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', () => { diff --git a/src/__tests__/util/paymentTypeUtils.test.ts b/src/__tests__/util/paymentTypeUtils.test.ts index 71d12e1338c..c2a872b50d3 100644 --- a/src/__tests__/util/paymentTypeUtils.test.ts +++ b/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', () => { diff --git a/src/assets/images/paymentTypes/paymentTypeLogoKlarna.png b/src/assets/images/paymentTypes/paymentTypeLogoKlarna.png new file mode 100644 index 00000000000..5b3c587f52d Binary files /dev/null and b/src/assets/images/paymentTypes/paymentTypeLogoKlarna.png differ diff --git a/src/components/scenes/RampCreateScene.tsx b/src/components/scenes/RampCreateScene.tsx index fed4a86f85e..82bb7394f08 100644 --- a/src/components/scenes/RampCreateScene.tsx +++ b/src/components/scenes/RampCreateScene.tsx @@ -811,7 +811,10 @@ export const RampCreateScene: React.FC = (props: Props) => { {/* Amount Inputs */} {/* Top Input (Fiat) */} - + {selectedFiatFlagUri !== '' ? ( = { DLOCALPIX: 'pix', DLOCALZAIO: 'iobank', IDEAL: 'ideal', + KLARNACKO: 'klarna', MANUALPAYMENT: 'turkishbank', MONOOVAPAYID: 'payid', PRIMERAP: 'applepay', PRIMERCC: 'credit', PRIMERGP: 'googlepay', + PRIMERPAYPAL: 'paypal', WORLDPAYGOOGLE: 'googlepay', ZHACHSELL: 'ach' } diff --git a/src/plugins/ramps/utils/getSettlementRange.ts b/src/plugins/ramps/utils/getSettlementRange.ts index 9cf73b64916..0e8fc2c58b8 100644 --- a/src/plugins/ramps/utils/getSettlementRange.ts +++ b/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': diff --git a/src/theme/variables/edgeDark.ts b/src/theme/variables/edgeDark.ts index 5b06f9dd8c3..ff7a8c5bcc1 100644 --- a/src/theme/variables/edgeDark.ts +++ b/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, diff --git a/src/theme/variables/edgeLight.ts b/src/theme/variables/edgeLight.ts index e732cd2afb5..61aff924873 100644 --- a/src/theme/variables/edgeLight.ts +++ b/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, diff --git a/src/theme/variables/testDark.ts b/src/theme/variables/testDark.ts index f8734f1ea07..ab63f036fbf 100644 --- a/src/theme/variables/testDark.ts +++ b/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, diff --git a/src/theme/variables/testLight.ts b/src/theme/variables/testLight.ts index 1569ed6e91a..9f9339ea578 100644 --- a/src/theme/variables/testLight.ts +++ b/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, diff --git a/src/types/Theme.ts b/src/types/Theme.ts index 310663e0a24..5f321079a37 100644 --- a/src/types/Theme.ts +++ b/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 diff --git a/src/util/paymentTypeIcons.ts b/src/util/paymentTypeIcons.ts index 2903be071cc..def69280f92 100644 --- a/src/util/paymentTypeIcons.ts +++ b/src/util/paymentTypeIcons.ts @@ -17,6 +17,7 @@ const paymentTypeToThemeKey: Record = { ideal: 'paymentTypeLogoIdeal', interac: 'paymentTypeLogoInterac', iobank: 'paymentTypeLogoBankTransfer', // Using bank transfer as fallback + klarna: 'paymentTypeLogoKlarna', mexicobank: 'paymentTypeLogoBankTransfer', // Using bank transfer as fallback payid: 'paymentTypeLogoPayid', paypal: 'paymentTypeLogoPaypal', diff --git a/src/util/paymentTypeUtils.ts b/src/util/paymentTypeUtils.ts index dceb23a72e7..f6798078f24 100644 --- a/src/util/paymentTypeUtils.ts +++ b/src/util/paymentTypeUtils.ts @@ -16,6 +16,7 @@ const paymentTypeDisplayNames: Record = { 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,