Paper iconPaper logo

CheckoutWithCard


import "@paperxyz/react-client-sdk/dist/index.css"; <PaperSDKProvider appName='Paper Checkout'> <CheckoutWithCard sdkClientSecret='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJjb250cmFjdElkIjoiOTE0ZDZjM2ItMWY2Ny00NWU1LTk2OTQtYzQxNzBiMmM4NjhiIiwid2FsbGV0QWRkcmVzcyI6IjB4YzgxODZhMzA0NEQzMTFlZWMxQzFiNTczNDJBYWEyOTBGNmQ5MEFhNSIsImVtYWlsIjoibm8tcmVwbHlAcGFwZXIueHl6IiwicXVhbnRpdHkiOjEsInVzZVBhcGVyS2V5IjpmYWxzZSwibWV0YWRhdGEiOnt9LCJleHBpcmVzSW5NaW51dGVzIjoxNSwiaGlkZUFwcGxlUGF5R29vZ2xlUGF5IjpmYWxzZSwidXNlQ2hlY2tvdXREb3RDb20iOmZhbHNlLCJ0aXRsZSI6IkhlbGxvIFdvcmxkIiwiY2FwdHVyZVBheW1lbnRMYXRlciI6ZmFsc2UsIm1pbnRNZXRob2QiOnsibmFtZSI6ImNsYWltVG8iLCJhcmdzIjp7Il90byI6IiRXQUxMRVQiLCJfcXVhbnRpdHkiOiIkUVVBTlRJVFkiLCJfdG9rZW5JZCI6MH0sImNhbGxPcHRpb25zIjp7Imdhc1ByaW9yaXR5IjoibWVkaXVtIn0sInBheW1lbnQiOnsiY3VycmVuY3kiOiJNQVRJQyIsInZhbHVlIjoiMC4wMDAxICAqICRRVUFOVElUWSJ9fSwicHJpY2luZ0RldGFpbHMiOnsiY2hhaW5OYW1lIjoiTXVtYmFpIiwiY3VycmVuY3lBZGRyZXNzIjoiMHgwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwIiwiY3VycmVuY3lTeW1ib2wiOiJNQVRJQyIsInJlYWRhYmxlUHJpY2UiOiIwLjAwMDEiLCJwcmljZUluV2VpIjp7InR5cGUiOiJCaWdOdW1iZXIiLCJoZXgiOiIweDVhZjMxMDdhNDAwMCJ9LCJsb2NrZWRQcmljZVVzZENlbnRzIjowfSwidHJhbnNhY3Rpb25JZCI6IjJkZjliM2JkLWE2OGYtNGRmYi04NjZhLWQxYTcyY2NlMmM1ZSIsImlhdCI6MTY2OTcwOTY3NCwiZXhwIjoxNjY5NzEwNTc0LCJpc3MiOiJwYXBlci54eXoifQ.rSIApOvg7L16DU71sPI-tUZqE1LRddnwRHbHUw-Rm20' onPaymentSuccess={(result) => ...} onReview={(result) => ...} onError={(error) => ...} options={{ colorBackground: '#ffffff', colorPrimary: '#7300a8', colorText: '#232323', borderRadius: 6, }} /> </PaperSDKProvider>

<CheckoutWithCard> React snippet