updating checkout-with-card docs

thirdweb-dev · Jan 3, 2024 · 9f99f39 · 9f99f39
1 parent 86ef9dc
commit 9f99f39
Showing 1 changed file with 60 additions and 32 deletions.
diff --git a/.../22 NFT Checkouts/1b Advanced Guides/0 Embedded Elements/1 CheckoutWithCard.mdx b/.../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
 {