Quick Start

export default function App() {
  return (
    <VolumeProvider
      applicationId="123456789"
      volumeEnvironment="sandbox"
      onEvent={handleEvent}
    >
      <App />
    </VolumeProvider>
  )
}

export default function Product() {
  return (
    <>
      ...
      <View style={{ marginLeft: '10%' }}>
        <Text style={{ fontSize: 35 }}>Mens Nike Trainers</Text>
        <Text style={{ fontSize: 20 }}>Price: £50</Text>
      </View>
      <Image source={require('./nike-1.png')} />
      <View style={{ marginTop: 'auto' }}>
        <Volume
          paymentMeta={{
            amount: 50,
            currency: 'GBP',
            country: 'GB',
            reference: 'Example Reference', // Generate new reference value each time PAYMENT_AUTHORIZED_SDP event is emitted
            merchantPaymentId: '123456', // Generate new value each time PAYMENT_AUTHORIZED_SDP event is emitted
            metadata: {
              type: 'shirt',
              color: 'black',
              owner: {
                position: 'CTO',
                description: 'Very handsome man',
                details: {
                  name: 'John',
                  surname: 'Doe',
                },
                relatedItems: [
                  { itemName: 'trousers', color: 'blue' },
                  { itemName: 'shoes', color: 'white' },
                ],
              },
            },
          }}
          onButtonEvent={(event) => {
            switch (event.type) {
              case 'GENERIC_ERROR':
                console.log('GENERIC_ERROR: ')
                // Meta does not exist
                // console.log('GENERIC_ERROR: ', event.meta);
                break
              case 'PAYMENT_AMOUNT_TOO_LARGE':
              case 'PAYMENT_AMOUNT_TOO_SMALL':
              case 'PAYMENT_AUTHORIZED_SDP':
              case 'PAYMENT_INITIATED':
                console.log(`${event.type}: ${event.meta?.merchantPaymentId}`)
                break
              case 'PAYMENT_ERROR':
                console.log(
                  `PAYMENT_ERROR: ${event.meta?.merchantPaymentId} | ${event.meta?.error}`
                )
                break
              default:
                break
            }
          }}
          buttonContainerStyles={{ marginBottom: 50 }}
          isButtonEnabled={true}
        />
      </View>
    </>
  )
}

metadata: 1
metadata: 'test'
metadata: [1, 2, 3]

    metadata: {
        "id": "0001",
        "type": "donut",
        "name": "Cake",
        "batters":
            {
                "batter":
                    [
                        { "id": "1001", "type": "Regular" }
                    ]
            },
    }

<key>LSApplicationQueriesSchemes</key>
	<array>
		<string>BMBGB</string>
		<string>revolut</string>
		<string>natwestbank</string>
		<string>monzo</string>
		<string>santanderuk</string>
		<string>rbs</string>
		<string>lloyds-retail</string>
		<string>ukcomhsbcmobilebanking</string>
		<string>zappcfi437759</string>
		<string>hsbc-pwnwguti5z</string>
		<string>zapp</string>
		<string>launchAIB</string>
		<string>ie.aib.mobilebanking</string>
		<string>BOIOneAPP</string>
		<string>halifax-retail</string>
		<string>starlingbank</string>
		<string>tescobank</string>
		<string>tsbmobile</string>
		<string>sparda-app</string>
		<string>bankingappspardaproduktion</string>
		<string>secureappspardaproduktion</string>
		<string>sapp-pushtan</string>
		<string>sapp-invest</string>
		<string>de.sparda.securego</string>
		<string>bos-retail</string>
		<string>launchbca</string>
		<string>comfirstdirectbankingonthego</string>
		<string>cs-com.virginmoney.uk.mobile.ios</string>
		<string>transferwise</string>
		<string>ybssavings</string>
		<string>chase-international</string>
	</array>