Skip to content
This repository has been archived by the owner on Jan 5, 2024. It is now read-only.

updating checkout-with-card docs #1132

Merged
merged 1 commit into from
Jan 3, 2024
Merged

updating checkout-with-card docs #1132

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 60 additions & 32 deletions .../22 NFT Checkouts/1b Advanced Guides/0 Embedded Elements/1 CheckoutWithCard.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ import { CheckoutWithCard } from "@thirdweb-dev/react";
currency: "ETH",
},
},
// contractArgs (for thirdweb contracts)
// contractArgs (for prebuilt contracts)
contractArgs: {
tokenId: 0,
},
Expand All @@ -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
Expand All @@ -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);
},
Expand All @@ -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

Expand All @@ -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
{
Expand Down