Returns payment options selected by the buyer.
import {
reactExtension,
Banner,
useSelectedPaymentOptions,
} from '@shopify/ui-extensions-react/checkout';
export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);
function Extension() {
const options = useSelectedPaymentOptions();
if (
options.some(
(option) => option.type === 'creditCard',
)
) {
return (
<Banner>
All credit card transactions are secure
</Banner>
);
}
return null;
}
Returns payment options selected by the buyer.
export function useSelectedPaymentOptions< Target extends RenderExtensionTarget = RenderExtensionTarget, >(): PaymentOption[] { const api = useApi<Target>(); if ( !('selectedPaymentOptions' in api) || !('availablePaymentOptions' in api) ) { throw new ExtensionHasNoMethodError( 'selectedPaymentOptions', api.extension.target, ); } const selectedPaymentOptions = useSubscription(api.selectedPaymentOptions); const availablePaymentOptions = useSubscription(api.availablePaymentOptions); return useMemo(() => { const availablePaymentOptionsMap: {[key: string]: PaymentOption} = {}; for (const option of availablePaymentOptions) { availablePaymentOptionsMap[option.handle] = option; } return selectedPaymentOptions.map((paymentOption) => { return { handle: paymentOption.handle, type: availablePaymentOptionsMap[paymentOption.handle]?.type, }; }); }, [availablePaymentOptions, selectedPaymentOptions]); }
A payment option presented to the buyer.
The type of the payment option. Shops can be configured to support many different payment options. Some options are only available to buyers in specific regions. | Type | Description | |---|---| | `creditCard` | A vaulted or manually entered credit card. | | `deferred` | A [deferred payment](https://help.shopify.com/en/manual/orders/deferred-payments), such as invoicing the buyer and collecting payment at a later time. | | `local` | A [local payment option](https://help.shopify.com/en/manual/payments/shopify-payments/local-payment-methods) specific to the current region or market | | `manualPayment` | A manual payment option such as an in-person retail transaction. | | `offsite` | A payment processed outside of Shopify's checkout, excluding integrated wallets. | | `other` | Another type of payment not defined here. | | `paymentOnDelivery` | A payment that will be collected on delivery. | | `redeemable` | A redeemable payment option such as a gift card or store credit. | | `wallet` | An integrated wallet such as PayPal, Google Pay, Apple Pay, etc. | | `customOnsite` | A custom payment option that is processed through a checkout extension with a payments app. |
The unique handle for the payment option. This is not a globally unique identifier. It may be an identifier specific to the given checkout session or the current shop.