import PaymentMethodFields from "../../../src/reference/subbly-sdk/types/PaymentMethod.mdx";

<SdkPage group="wallet" />

<Method id="list" signature="subbly.wallet.list(currencyCode)">

Gets the payment methods the signed-in customer saved for one currency. A
payment method belongs to a gateway, and a gateway belongs to a currency, so a
customer who pays in two currencies has two sets. Needs an authenticated
customer.

<Params>
  <Param name="currencyCode" required type="string">
    Currency to list, such as `USD`. Take it from
    `shop.currencies[].abbreviation`.
  </Param>
</Params>

<Returns type="Promise<PaymentMethod[]>">
The saved payment methods.
<Properties label="payment method" collapsed>
  <PaymentMethodFields />
</Properties>
</Returns>

<Example>

```js title="List the payment methods"
const paymentMethods = await subbly.wallet.list('USD')

await subbly.cart.update({ paymentMethodId: paymentMethods[0].id })
```

</Example>

</Method>

<Method id="setup" signature="subbly.wallet.setup(payload)">

Gets the token a gateway widget needs before it can collect card details. Run it
first, hand the token to the gateway's own SDK, then save what the gateway gives
back with `subbly.wallet.store`.

<Params>
  <Param name="payload" required type="WalletSetupPayload">
    The gateway to set up.
    <Properties label="payload">
      <Param name="gatewayId" required type="number">
        ID of the gateway, from `shop.currencies[].gateways[].id`.
      </Param>
    </Properties>
  </Param>
</Params>

<Returns type="Promise<WalletSetupResponse>">
The token for the gateway widget.
<Properties>
  <Param name="token" type="string">
    What the token is depends on the gateway. Stripe gives a client secret for
    `stripe.confirmCardSetup`. Braintree gives a client token that starts the
    Braintree SDK. PayPal gives an order ID for `createOrder` in
    `paypal.Buttons`.
  </Param>
</Properties>
</Returns>

<Example>

```js title="Start a Stripe card setup"
const [gateway] = subbly.shop.currencies[0].gateways
const { token } = await subbly.wallet.setup({ gatewayId: gateway.id })

const { setupIntent } = await stripe.confirmCardSetup(token, {
  payment_method: { card: cardElement }
})
```

</Example>

</Method>

<Method id="store" signature="subbly.wallet.store(payload)">

Saves a payment source for the customer from the token the gateway widget
returned. The saved method can then be set on the cart or on a subscription.
Needs an authenticated customer.

<Params>
  <Param name="payload" required type="PaymentMethodStorePayload">
    The source to save.
    <Properties label="payload">
      <Param name="gatewayId" required type="number">
        The gateway the token came from.
      </Param>

      <Param name="token" required type="string">
        The token the gateway widget returned. Stripe gives a setup intent ID.
        Braintree gives a payment method nonce. PayPal gives an order ID.
        Authorize.net gives the encrypted payment data, Base64-encoded.
      </Param>
    </Properties>
  </Param>
</Params>

<Returns type="Promise<PaymentMethod>">
The payment method saved.
<Properties label="payment method" collapsed>
  <PaymentMethodFields />
</Properties>
</Returns>

<Example>

```js title="Save a Stripe card"
const paymentMethod = await subbly.wallet.store({
  gatewayId: gateway.id,
  token: setupIntent.id
})

await subbly.cart.update({ paymentMethodId: paymentMethod.id })
```

</Example>

</Method>

<Method id="setup-intent" signature="subbly.wallet.setupIntent(payload)">

Gets a Subbly-hosted page where Stripe runs 3-D Secure on a new card. Send the
customer to `subblyUrl`; Stripe returns them to the `redirectUrl` you gave.
Needs an authenticated customer.

<Params>
  <Param name="payload" required type="WalletSetupIntentPayload">
    The gateway to verify with, and where to come back to.
    <Properties label="payload">
      <Param name="gatewayId" required type="number">
        ID of the Stripe gateway.
      </Param>

      <Param name="redirectUrl" required type="string">
        Page of yours that Stripe sends the customer back to, such as
        `https://your-shop.com/checkout/CART_ID`.
      </Param>
    </Properties>
  </Param>
</Params>

<Returns type="Promise<WalletSetupIntentResponse>">
Where to send the customer, and how long the link lasts.
<Properties>
  <Param name="id" type="string">
    ID of the setup intent.
  </Param>

  <Param name="redirectUrl" type="string">
    The page you asked Stripe to return to.
  </Param>

  <Param name="expiresAt" type="string">
    When the hosted page stops working.
  </Param>

  <Param name="subblyUrl" type="string">
    The Subbly-hosted page to send the customer to.
  </Param>
</Properties>
</Returns>

<Example>

```js title="Verify a card with 3-D Secure"
const { subblyUrl } = await subbly.wallet.setupIntent({
  gatewayId: gateway.id,
  redirectUrl: `https://your-shop.com/checkout/${subbly.cart.id}`
})

window.location.assign(subblyUrl)
```

</Example>

</Method>