From 9f99f3955dc523faf4d77b9e8ee50b9e605bc391 Mon Sep 17 00:00:00 2001 From: Isaac Dubuque Date: Wed, 3 Jan 2024 11:01:54 -0800 Subject: [PATCH] updating checkout-with-card docs --- .../1 CheckoutWithCard.mdx | 92 ++++++++++++------- 1 file changed, 60 insertions(+), 32 deletions(-) diff --git a/docs/onboarding/22 NFT Checkouts/1b Advanced Guides/0 Embedded Elements/1 CheckoutWithCard.mdx b/docs/onboarding/22 NFT Checkouts/1b Advanced Guides/0 Embedded Elements/1 CheckoutWithCard.mdx index b37d6fa5b..9769cb573 100644 --- a/docs/onboarding/22 NFT Checkouts/1b Advanced Guides/0 Embedded Elements/1 CheckoutWithCard.mdx +++ b/docs/onboarding/22 NFT Checkouts/1b Advanced Guides/0 Embedded Elements/1 CheckoutWithCard.mdx @@ -54,7 +54,7 @@ import { CheckoutWithCard } from "@thirdweb-dev/react"; currency: "ETH", }, }, - // contractArgs (for thirdweb contracts) + // contractArgs (for prebuilt contracts) contractArgs: { tokenId: 0, }, @@ -67,22 +67,29 @@ import { CheckoutWithCard } from "@thirdweb-dev/react"; ### `CheckoutWithCard` props -| Name | Type | Description | -| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| clientId **\*** | string | thirdweb client ID (Obtained from an API key which you can generate on the [Dashboard](https://thirdweb.com/dashboard)) | -| configs **\*** | object | A list of configs to create your card checkout element. Fields are the same as the ones found in the [Create Checkout Elements Client Secret](https://docs.withpaper.com/reference/create-checkout-elements-client-secret) API. | -| onPaymentSuccess **\*** | ({ transactionId: string; }) => void | This method is called after the payment has been submitted for processing. This payment may still be rejected by the cardholder's bank. | -| onError | (PaymentsSDKError) => void | This method is called when an error is encountered. | -| onPriceUpdate | ({ quantity: number; unitPrice: PriceDetail; networkFees: PriceDetail; serviceFees: PriceDetail; total: PriceDetail; }) => void | This method is called when the price is updated or loaded for the first time. This summary is helpful to show a granular price breakdown. Where PriceDetail is { display: string; valueInSubunits: number; currency: string; } | -| locale | enum Valid values: `en`, `fr`, `es`, `it`, `de`, `ja`, `ko`, `zh` | The language to show text in. Defaults to `en`. | -| options | object | Customize component styling. See [Customization](#customization). | +| Name | Type | Description | +| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| clientId **\*** | string | thirdweb client ID (Obtained from an API key which you can generate on the [Dashboard](https://thirdweb.com/dashboard)) | +| configs **\*** | object | A list of configs to create your card checkout element. Fields correspond to those in the [Create Checkout Elements Client Secret](https://docs.withpaper.com/reference/create-checkout-elements-client-secret) API. | +| | | **Additional Contract Resources:** | +| | | - _Custom Contracts:_ Refer to [Custom Contracts Guide](/checkouts/custom-contracts) for integration details. | +| | | - _Pre-built Contracts:_ For using pre-built contracts, see [Pre-built Contracts Information](/checkouts/pre-built-contracts). | +| onPaymentSuccess **\*** | ({ transactionId: string; }) => void | This method is called after the payment has been submitted for processing. This payment may still be rejected by the cardholder's bank. | +| onError | (PaymentsSDKError) => void | This method is called when an error is encountered. | +| onPriceUpdate | ({ quantity: number; unitPrice: PriceDetail; networkFees: PriceDetail; serviceFees: PriceDetail; total: PriceDetail; }) => void | This method is called when the price is updated or loaded for the first time. This summary is helpful to show a granular price breakdown. Where PriceDetail is { display: string; valueInSubunits: number; currency: string; } | +| locale | enum Valid values: `en`, `fr`, `es`, `it`, `de`, `ja`, `ko`, `zh` | The language to show text in. Defaults to `en`. | +| options | object | Customize component styling. See [Customization](#customization). | ## Javascript Integration -1. Install the Javascript SDK with your preferred package manager. - - `npm install @thirdweb-dev/payments` - - `yarn add @thirdweb-dev/payments` -2. Call `createCheckoutWithCardElement` to insert the iframe on your page. Pass the `configs` to this component. +1. Install the Javascript SDK: + ```Text npm + npm install @thirdweb-dev/payments + ``` + ```Text yarn + yarn add @thirdweb-dev/payments + ``` +2. Call `createCheckoutWithCardElement` with `configs` to insert the iframe on your page into a new or existing element. 1. If you don't provide `elementOrId`, this call returns an iframe element for you to insert into your page. ### Example code @@ -99,10 +106,29 @@ createCheckoutWithCardElement({ configs: { contractId: "YOUR_CONTRACT_ID", walletAddress: "0x...", - } + // Mint method (for custom contracts only) + mintMethod: { + name: "claimTo", + args: { + _to: "$WALLET", + _quantity: "$QUANTITY", + _tokenId: 0, + }, + payment: { + value: "0.1 * $QUANTITY", + currency: "ETH", + }, + }, + // contractArgs (for prebuilt contracts) + contractArgs: { + tokenId: 0, + }, + }, elementOrId: "paper-checkout-container", appName: "My Web3 App", - options, + options: { + colorPrimary: "#cf3781", + }, onError(error) { console.error("Payment error:", error); }, @@ -115,23 +141,25 @@ createCheckoutWithCardElement({ // // const iframe = createCheckoutWithCardElement(...) // document.getElementById('paper-checkout-container').appendChild(iframe); - ``` -### Props - -| Name | Type | Description | -| ---------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| clientId **\*** | string | thirdweb client ID (Obtained from an API key which you can generate on the [Dashboard](https://thirdweb.com/dashboard)) | -| configs **\*** | object | A list of configs to create your card checkout element. Fields are the same as the ones found in the [Create Checkout Elements Client Secret](https://docs.withpaper.com/reference/create-checkout-elements-client-secret) API. | -| elementOrId | string \| HTMLElement | If provided, the iframe will be appended to this element. You can pass in the DOM element or the `id` associated with the element. A minimum width of 380px is recommended. | -| appName | string | If provided, the wallet card will display your `appName`. | -| locale | enum (Valid values: `en`, `fr`, `es`, `it`, `de`, `ja`, `ko`, `zh`) | The language to show text in. Defaults to `en`. | -| options | object | Customize component styling. See [Customization](#customization). | -| onLoad | () => void | This method is called when the iframe loads. | -| onError | (error: PaymentsSDKError) => void | This method is called when an error occurs during the payment process. | -| onPaymentSuccess | (props: { transactionId: string }) => void | This method is called when the buyer has successfully paid. | -| onReview | (props: { cardholderName: string, id: string }) => void | This method is called after the user enters their card details. | +### `createCheckoutWithCardElement` Parameters + +| Name | Type | Description | +| ---------------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| clientId **\*** | string | thirdweb client ID (Obtained from an API key which you can generate on the [Dashboard](https://thirdweb.com/dashboard)) | +| configs **\*** | object | A list of configs to create your card checkout element. Fields correspond to those in the [Create Checkout Elements Client Secret](https://docs.withpaper.com/reference/create-checkout-elements-client-secret) API. | +| | | **Additional Contract Resources:** | +| | | - _Custom Contracts:_ Refer to [Custom Contracts Guide](/checkouts/custom-contracts) for integration details. | +| | | - _Pre-built Contracts:_ For using pre-built contracts, see [Pre-built Contracts Information](/checkouts/pre-built-contracts). | +| elementOrId | string \| HTMLElement | If provided, the iframe will be appended to this element. You can pass in the DOM element or the `id` associated with the element. A minimum width of 380px is recommended. | +| appName | string | If provided, the wallet card will display your `appName`. | +| locale | enum (Valid values: `en`, `fr`, `es`, `it`, `de`, `ja`, `ko`, `zh`) | The language to show text in. Defaults to `en`. | +| options | object | Customize component styling. See [Customization](#customization). | +| onLoad | () => void | This method is called when the iframe loads. | +| onError | (error: PaymentsSDKError) => void | This method is called when an error occurs during the payment process. | +| onPaymentSuccess | (props: { transactionId: string }) => void | This method is called when the buyer has successfully paid. | +| onReview | (props: { cardholderName: string, id: string }) => void | This method is called after the user enters their card details. | ## Customization @@ -150,7 +178,7 @@ The optional `options` argument allows you to customize the component's styling. #### Examples -Here's an example component with the following props: +Here's an example component with the following `options` arguments: ```javascript {