\n <\/div>\n","url":"https:\/\/docs.adyen.com\/payment-methods\/afterpaytouch\/react-native-component","articleFields":{"description":"Add Afterpay to your Components integration.","never_cache_twig":true,"parameters":{"tx_variant":"afterpaytouch","component_class_name":"None","pm_directory":"afterpaytouch","payment_method":"Afterpay","action_type":"redirect"},"filters_component":true,"filters_config_folder":"payment-methods\/afterpaytouch\/react-native\/component"},"algolia":[{"url":"https:\/\/docs.adyen.com\/payment-methods\/afterpaytouch\/react-native-component","title":"Afterpay React Native Component","content":"\nReact Native Components do not support Sessions flow.\n","type":"page","locale":"en","boost":17,"hierarchy":{"lvl0":"Home","lvl1":"Payment methods","lvl2":"Afterpay","lvl3":"Afterpay React Native Component"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/","lvl1":"https:\/\/docs.adyen.com\/payment-methods","lvl2":"https:\/\/docs.adyen.com\/payment-methods\/afterpaytouch","lvl3":"\/payment-methods\/afterpaytouch\/react-native-component"},"levels":4,"category":"Payment method","category_color":"green","tags":["Afterpay","React","Native","Component"]},{"url":"https:\/\/docs.adyen.com\/payment-methods\/afterpaytouch\/react-native-component?flow=Sessions flow&integration=Component","title":"Sessions flow Component","content":"\nReact Native Components do not support Sessions flow.\n","type":"page","locale":"en","boost":17,"hierarchy":{"lvl0":"Home","lvl1":"Payment methods","lvl2":"Afterpay","lvl3":"Afterpay React Native Component"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/","lvl1":"https:\/\/docs.adyen.com\/payment-methods","lvl2":"https:\/\/docs.adyen.com\/payment-methods\/afterpaytouch","lvl3":"\/payment-methods\/afterpaytouch\/react-native-component"},"levels":4,"category":"Payment method","category_color":"green","tags":["Sessions flow","Component"]},{"url":"https:\/\/docs.adyen.com\/payment-methods\/afterpaytouch\/react-native-component?flow=Advanced flow&integration=Component","title":"Advanced flow Component","content":"Requirements\n\n\n\nRequirement\nDescription\n\n\n\n\nIntegration type\nMake sure that you have an existing Advanced flow React Native Components integration.\n \n\n\nRedirect handling\nMake sure that your existing integration is set up to handle the redirect. action.type: redirect\n\n\n\nSetup steps\nBefore you begin, add Afterpay in your Customer Area.\n\n\n\nAdd additional configuration for Afterpay\nYou do not need to add any configuration parameters for Afterpay.\nAdd additional parameters to your \/payments request\nWhen you make a payment, add the following parameters to the \/payments request:\n\n\n\nParameter\nRequired\nDescription\n\n\n\n\n paymentMethod\n\nafterpaytouch\n\n\n shopperName\n\nThe shopper's full name.\n\n\n shopperEmail\n\nThe shopper's email address.\n\n\n shopperReference\n\nA unique reference to identify the shopper. Minimum length: three characters.\n\n\n countryCode\n\nThe shopper's country\/region.\n\n\n billingAddress\n\nThe postal address to be included on the invoice.\n\n\n deliveryAddress\n\nThe postal address where the goods will be shipped.\n\n\n lineItems\n\nPrice and product information about the purchased items.\n\n\n telephoneNumber\n\nThe shopper's telephone number, if provided.\n\n\n\n\n \n\nThe response includes action.type: redirect.\n\n \n\nCapture the payment\nDepending on your merchant account configuration, Afterpay payments are captured automatically after authorisation, or manually captured. If you prefer to capture the payment after the goods have been sent, you need to set up a capture delay or use manual capture. To partially capture a payment, you also need to use manual capture.\nAfterpay payments have to be captured within 13 days after authorisation.\nDuring authorisation, the shopper is charged for the first installment. If the payment is not captured within 13 days, before the second installment, Afterpay cancels the payment and refunds the first installment to the shopper.\n\nFor testing purposes, Afterpay authorisations expire in one day. When you use manual capture, you need to capture test Afterpay payments within one day after authorisation.\n\nFull or partial manual captures\nWhen you use manual capture, in your \/payments\/{paymentPspReference}\/captures request specify:\n\n amount.value: the full or partial amount that the shopper should pay.\n lineItems: (optional) price and product information for the items that the shopper should pay for.\n\nAny unclaimed amount that is left over after partially capturing a payment is automatically cancelled. When your account is enabled for multiple partial captures, the unclaimed amount after an initial capture is not automatically cancelled.\n\nTo set up multiple partial captures, contact our Support Team. Multiple partial captures will create a new invoice for each capture.\nTest and go live\nTo test Afterpay payments, you need a test shopper account in the Afterpay sandbox environment. If you are testing in multiple countries or regions, create a different test account for each.\nTo create a test account:\n\nGo to https:\/\/portal.sandbox.afterpay.com\/.\nEnter a real email address and select Continue. You'll get confirmations of payments and refunds like any other shopper on this email address.\nFrom the drop-down menu, select the country\/region for which you want to create a test shopper account. Select Australia, New Zealand, US, or Canada.\nEnter a unique mobile number in the correct format and select Continue. Ensure the number is not associated with an existing account to avoid being redirected to a login page.\nWhen you are prompted to enter your SMS verification code, enter 111111.\nFollow the instructions on your screen to complete your profile, accept the terms and conditions, and select Continue.\n\n \nTo test payments, add a test card to your Afterpay test shopper account.\nYou can use the card details provided in the Afterpay developer documentation, or use one of the Adyen test cards. Use CVV 000 to simulate authorised payments, or CVV 051 to simulate refused payments.\n \nYou can check the status of test payments in your\u00a0Customer Area\u00a0>\u00a0Transactions\u00a0>\u00a0Payments.\n \nBefore you can accept live Afterpay payments, you need to submit a request for Afterpay in your live Customer Area.","type":"page","locale":"en","boost":17,"hierarchy":{"lvl0":"Home","lvl1":"Payment methods","lvl2":"Afterpay","lvl3":"Afterpay React Native Component"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/","lvl1":"https:\/\/docs.adyen.com\/payment-methods","lvl2":"https:\/\/docs.adyen.com\/payment-methods\/afterpaytouch","lvl3":"\/payment-methods\/afterpaytouch\/react-native-component"},"levels":4,"category":"Payment method","category_color":"green","tags":["Advanced flow","Component"]}],"articleFiles":{"payments-request.js":"
payments-request.js<\/p>","payments-response.json":"
payments-response.json<\/p>","sessions-request.js":"
sessions-request.js<\/p>"}}