|
| 1 | +import PropTypes from 'prop-types'; |
| 2 | + |
| 3 | +interface LightboxProps { |
| 4 | + production: boolean; |
| 5 | + transactionId: string; |
| 6 | + onLoaded?: () => void; |
| 7 | + onOpened?: () => void; |
| 8 | + onCancelled?: () => void; |
| 9 | + onError?: () => void; |
| 10 | +} |
| 11 | +declare const Lightbox: { |
| 12 | + (props: LightboxProps): null; |
| 13 | + propTypes: { |
| 14 | + transactionId: PropTypes.Validator<string>; |
| 15 | + production: PropTypes.Requireable<boolean>; |
| 16 | + onLoaded: PropTypes.Requireable<(...args: any[]) => any>; |
| 17 | + onOpened: PropTypes.Requireable<(...args: any[]) => any>; |
| 18 | + onCancelled: PropTypes.Requireable<(...args: any[]) => any>; |
| 19 | + onError: PropTypes.Requireable<(...args: any[]) => any>; |
| 20 | + }; |
| 21 | + defaultProps: { |
| 22 | + onLoaded(): void; |
| 23 | + onOpened(): void; |
| 24 | + onCancelled(): void; |
| 25 | + onError(): void; |
| 26 | + production: boolean; |
| 27 | + }; |
| 28 | +}; |
| 29 | + |
| 30 | +/** |
| 31 | + * The config to open a Datatrans Lightbox. |
| 32 | + * |
| 33 | + * @see https://docs.datatrans.ch/docs/redirect-lightbox |
| 34 | + * @see https://api-reference.datatrans.ch/ |
| 35 | + */ |
| 36 | +interface DatatransLightboxConfig { |
| 37 | + closed?: () => void; |
| 38 | + error?: () => void; |
| 39 | + form?: unknown; |
| 40 | + loaded?: () => void; |
| 41 | + opened?: () => void; |
| 42 | + params?: IDatatransConfigParams; |
| 43 | +} |
| 44 | +/** |
| 45 | + * The parameters that can be passed to the Datatrans API. |
| 46 | + * |
| 47 | + * @see https://docs.datatrans.ch/docs/redirect-lightbox |
| 48 | + * @see https://api-reference.datatrans.ch/ |
| 49 | + */ |
| 50 | +interface IDatatransConfigParams { |
| 51 | + /** |
| 52 | + * The aliasCC received with a Payment or Registration. |
| 53 | + * @see https://docs.datatrans.ch/v1.0.1/docs/payment-process-alias |
| 54 | + * e.g.: "70119122433810042" |
| 55 | + */ |
| 56 | + aliasCC?: string; |
| 57 | + /** |
| 58 | + * The amount of the transaction in the currency’s smallest unit. |
| 59 | + * For example use "1000" for CHF 10.00. |
| 60 | + */ |
| 61 | + amount?: string; |
| 62 | + /** |
| 63 | + * This parameter represents the URL of the merchant’s web shop, application, |
| 64 | + * where the consumer should be redirected to after cancelling the transaction. |
| 65 | + */ |
| 66 | + cancelUrl: string; |
| 67 | + /** |
| 68 | + * 3 letter ISO-4217 character code. |
| 69 | + * For example "CHF", "USD" |
| 70 | + */ |
| 71 | + currency?: string; |
| 72 | + /** |
| 73 | + * This parameter represents the URL of the merchant’s web shop, application, where the consumer should be redirected to after a failed transaction |
| 74 | + */ |
| 75 | + errorUrl: string; |
| 76 | + /** Expiry month of the card. For example "1" or "01" for January. */ |
| 77 | + expm?: string; |
| 78 | + /** |
| 79 | + * Expiry year of the card |
| 80 | + * e.g.: "25" |
| 81 | + */ |
| 82 | + expy?: string; |
| 83 | + /** |
| 84 | + * This parameter specifies the language (language code) in which the payment page should be presented to the cardholder. |
| 85 | + * The following ISO-639-1 two letter language codes are supported: |
| 86 | + * |
| 87 | + * - de (German) |
| 88 | + * - en (English) |
| 89 | + * - fr (French) |
| 90 | + * - it (Italian) |
| 91 | + * - es (Spanish) |
| 92 | + * - el (Greek) |
| 93 | + * - no (Norwegian) |
| 94 | + * - da (Danish) |
| 95 | + * - pl (Polish) |
| 96 | + * - pt (Portuguese) |
| 97 | + */ |
| 98 | + language?: 'de' | 'en' | 'fr' | 'it' | 'es' | 'el' | 'no' | 'da' | 'pl' | 'pt'; |
| 99 | + /** |
| 100 | + * Unique Merchant Identifier (assigned by Datatrans during signup). |
| 101 | + * Depending on your integration you might receive multiple merchantIds. |
| 102 | + * For example: One for your mobile application and one for your web shop |
| 103 | + */ |
| 104 | + merchantId?: string; |
| 105 | + /** e.g.: "VIS" */ |
| 106 | + paymentmethod?: string; |
| 107 | + /** e.g.: "77666134" */ |
| 108 | + refno?: string; |
| 109 | + /** |
| 110 | + * The reqtype (request type) parameter is used to specify which type of action should be performed on Datatrans side. |
| 111 | + * The different API endpoints support different reqtypes. For Authorizations (Server to Server or by using the Payment page) the following reqtypes are possible: |
| 112 | + * |
| 113 | + * - NOA |
| 114 | + * Only authorization should be done. The amount will be blocked and a separate settlement needs to follow in order to actually charge the customer. |
| 115 | + * Not all payment methods support splitting authorization and settlement. Refer to the documentation of the corresponding payment method if Deferred Settlement is possible. |
| 116 | + * - CAA |
| 117 | + * Direct debit. Authorization with immediate settlement. |
| 118 | + * - SCN |
| 119 | + * Only a pre-screening request should be done. Not all payment methods support pre-screening requests. |
| 120 | + * Refer to the reqtype request parameter documentation for the particular payment method to see if pre-screening requests are supported. |
| 121 | + */ |
| 122 | + reqtype?: 'NOA' | 'CAA' | 'SCN'; |
| 123 | + /** |
| 124 | + * The sign parameter to be submitted with each request. |
| 125 | + * @see https://api-reference.datatrans.ch/xml/#request-signing |
| 126 | + * |
| 127 | + * e.g.: "1902B412B9DDBFF2623ADB4F101F2141" */ |
| 128 | + sign?: string; |
| 129 | + /** |
| 130 | + * This parameter represents the URL of the merchant’s web shop, |
| 131 | + * where the consumer should be redirected to after a successful transaction. |
| 132 | + * |
| 133 | + * e.g.: "https://www.example.com/datatrans/paymentresult/77966133" |
| 134 | + */ |
| 135 | + successUrl: string; |
| 136 | + themeConfiguration?: IDatatransConfigThemeConfiguration; |
| 137 | +} |
| 138 | +/** |
| 139 | + * https://docs.datatrans.ch/docs/redirect-lightbox#styling-the-payment-pages |
| 140 | + */ |
| 141 | +interface IDatatransConfigThemeConfiguration { |
| 142 | + /** e.g. "true" */ |
| 143 | + brandButton?: boolean | string; |
| 144 | + /** e.g. "#444" */ |
| 145 | + brandColor?: string; |
| 146 | + /** |
| 147 | + * Wheter the payment page shows the payment method selection as list (default) or as a grid. |
| 148 | + */ |
| 149 | + initialView?: 'list' | 'grid'; |
| 150 | + /** |
| 151 | + * Decides whether the logo shall be styled with a border around it, |
| 152 | + * if the value is true the default background color is chosen, |
| 153 | + * else the provided string is used as color value. |
| 154 | + */ |
| 155 | + logoBorderColor?: boolean | string; |
| 156 | + /** |
| 157 | + * An SVG image provided by the merchant. |
| 158 | + * The image needs to be uploaded by using the Datatrans Web Administration Tool. |
| 159 | + */ |
| 160 | + logoSrc?: string; |
| 161 | + /** |
| 162 | + * The header logo's display style. |
| 163 | + */ |
| 164 | + logoType?: 'circle' | 'rectangle' | 'none'; |
| 165 | + /** |
| 166 | + * Hides the title from header |
| 167 | + * (Only required if no logo is used) |
| 168 | + */ |
| 169 | + brandTitle?: 'false'; |
| 170 | + /** |
| 171 | + * Color for the title [white|black] |
| 172 | + * (Only required if no logo is used) |
| 173 | + */ |
| 174 | + textColor: 'black' | 'white'; |
| 175 | +} |
| 176 | + |
| 177 | +export { DatatransLightboxConfig, Lightbox as default }; |
0 commit comments